路飞学城Python-Day53

2023-01-31 17:34:07

01-jquery的介绍

JS在做项目或者是实现功能的时候，用JS去操作DOM元素非常复杂，代码量大，重复性代码也多

多个元素使用for循环遍历也是非常麻烦的，对于JS使用来说加大了难度

jQuery框架是用来查询JS的，write less do more！

特点

1.容量小，轻量级框加，目前只有30KB

2.支持CSS3的选择器

3.兼容各种浏览器

What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

使用jQuery需要改变JS写法，原理还是用的JS，但是语法和写法是完全不同的

02-jquery文件引入和加载的区别

jQuery和JS的区别

Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。
jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发
jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到

注意：一般情况下，是库的文件，该库中都会抛出来构造函数或者对象，如果是构造函数，那么使用new关键字创建对象，如果是对象直接调用属性和方法

DOM文档加载的步骤

解析HTML结构。
加载外部脚本和样式表文件。
解析并执行脚本代码。
DOM树构建完成。
加载图片等外部文件。
页面加载完毕

全局引用

// 如果不写window.onload(),代码的执行顺序是从上到下

window.onload = function () {

var oDiv = document.getElementById('box');

console.log(oDiv);

};

</script>

</head>

<body>

</body>

// jQuary是js的一个库，既然是库文件，那么就会抛出来一个构造函数或者对象

// 全局引用了jQuery

// 引用jQuery的时候一定要把文件先引入，再写JS代码

// 书写jQuery的方式入口函数

// $(document).ready(function () {

// // 等待文档加载完成之后就执行函数

// alert(11);

// });

$(function () {

alert('等价于加载DOM后就直接执行')

})

</script>

03-jquery的基础选择器

jQuery的选择器和css基本类似，书写方式有些不同，但是基本原理类似

<!DOCTYPE html>

<head>

<title>jQuery基础选择器</title>

</head>

<body>

<ul>

<li id="1">pandaboy0</li>

<li id="2">pandaboy1</li>

<li><a href="https://www.baidu.com">pandaboy2</a></li>

<li class="li4">pandaboy3</li>

<li>pandaboy4</li>

<li>pandaboy5</li>

<li>pandaboy6</li>

</ul>

</body>

// 回调函数

$(document).ready(function () {

//基本选择器

// 1.id选择器

// console.log($('#1'));

$('#1').css('color','red');

// 2.标签选择器

// $('a').css('color','yellow');

// 设置多个值->字典形式，设置多个值的时候使用key value的形式

$('a').css({'color':'yellow','font-size':'24px'});

// 3.类选择器

$('.li4').css('background','yellow');

// 4.通配符选择器用的很少，使用不是很频繁

// $('*').css('background','black');

});

</script>

</html>

04-jquery的层级选择器

//:first 获取第一个元素

$('li:first').text('真的吗？')

//:last 获取最后一个元素

$('li:last').html('我是最后一个元素？')

//:odd 匹配所有索引值为奇数的元素，从0开始计数

$('li:odd').css('color','green');

//:even 匹配所有索引值为偶数的元素，从0开始计数

$('li:even').css('color','red')

//:eq(index) 获取给定索引值的元素从0开始计数

$('li:eq(1)').css('font-size','30px')

//:gt(index)匹配所有大于给定索引值的元素

$('li:gt(1)').css('font-size','40px')

//:lt(index) 匹配所有小于给定索引值的元素

$('li:lt(1)').css('font-size','40px')

//一个给定索引值的元素

console.log($('p:eq(3)').text())

05-jquery的基本过滤选择器

<!DOCTYPE html>

<head>

<title>过滤选择器</title>

</style>

</head>

<body>

<ul>

</ul>

</body>

$(function () {

//获取第一个：first

//获取最后一个元素：last

//获取奇数的

$('li:odd').css('color','red');

//获取偶数

$('li:even').css('color','yellow');

$('li').css('list-style-type','none');

//选中索引值为0的元素

$('li:eq(0)').css('font-size','25px');

//选中索引值大于1的元素

$('li:gt(1)').css('font-size','30px');

//选中索引值小于1的元素

$('li:lt(1)').css({'display':'block','border':'1px solid red'})

})

</script>

</html>

06-jquery的属性选择器

<!DOCTYPE html>

<head>

<title>属性选择器</title>

</head>

<body>

<h2 class="title">属性元素器</h2>

<p class="p1">我是一个段落</p>

<ul>

<li id="li1">分手应该体面</li>

<li class="what" id="li2">分手应该体面</li>

<li class="what">分手应该体面</li>

<li class="heihei">分手应该体面</li>

</ul>

</form>

</div>

</body>

$(function(){

//标签[属性名]，查找所有含有id的该标签的元素

$('li[id]').css('color','red');

//标签[class = className]

$('li[class = what]').css({'display':'block','border':'1px red solid'});

$('li[class != what]').css('font-size','26px');

//按标签的名称开头

$('input[name ^= u]').css('background','grey');

$('input[name $= 22]').css('background','red');

$('button[class ^= btn]').css('background','red');

})

</script>

</html>

07-jquery的筛选选择器

<!DOCTYPE html>

<head>

</head>

<body>

<span>我是第一个span标签</span>

<span>我是第二个span标签</span>

<span>我是第三个span标签</span>

</p>

</div>

<ul>

</ul>

</body>

//获取第n个元素，数值从0开始

$('span').eq(1).css('color','red');

//获取第一个元素：first last

//.语法就是get方法和set方法

$('span').first().css('color','yellow');

$('span').last().css('color','grey');

$('span').parent('.p1').css({'width':'300px','height':'150px'});

//查找后代元素

$('div').find('button').css('background','red');

</script>

</html>

08-jquery对象和DOM对象的转换

<!DOCTYPE html>

<head>

<title>jQuery和DOM对象的转换</title>

#box{

width: 100px;

height: 100px;

color: #FFFFFF;

text-align: center;

}

</style>

</head>

<body>

</body>

// DOM对象转换为jQuery对象

var box = document.getElementById('box');

console.log($(box));

// jQuery对象转换为DOM对象

// 第一种方式

console.log($('button')[0]);

// 第二种方式

// $('button').get(0)

var isShow = true;

$('button').get(0).onclick = function () {

if(isShow){

$('#box').hide();

$(this).text('显示');

isShow = false;

}else{

$('#box').show();

$(this).text('隐藏');

isShow = true;

}

</script>

</html>

09-jquery效果-显示和隐藏

show

概念:显示隐藏的匹配元素语法：show(speed,callback) 参数：

speed：三种预定速度之一的字符串('slow','normal','fast')或表示动画时长的毫秒值（如：1000毫秒==1秒）

callback:在动画完成时执行的函数，每个元素执行一次

hide

hide(speed,callback)跟show使用方法类似，表示隐藏显示的元素。

可以通过show（）和hide（）方法，来动态控制元素的显示隐藏

toggle

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

slideDown

概念：通过高度变化（向下增大）来到动态地显示所有匹配的元素，在显示完成后触发一个回调函数

用法和参数跟上面类似

slideUp

通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

用法和参数跟上面类似

slideToggle

概念:通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数

跟toggle用法类似

fadeIn

概念：通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化

fadeOut

概念：通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

fadeTo

概念：把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

fadeToggle

概念：通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

实现淡入淡出的效果就是使用此方法

animate

概念：用于创建自定义动画的函数

语法：animate(params,[speed],[fn])

参数：

params:一组包含作为动画属性和终值的样式属性和及其值的集合

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

fn:在动画完成时执行的函数，每个元素执行一次。

stop

概念：停止所有在指定元素上正在运行的动画

语法：stop([clearQueue],[jumpToEnd])

参数：

clearQueue:如果设置成true，则清空队列。可以立即结束动画。

gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等

delay

概念：用来做延迟的操作

语法：delay(1000)，一秒之后做后面的操作

<!DOCTYPE html>

<head>

<title>显示和隐藏</title>

padding: 0;

margin: 0;

}

#box{

width: 600px;

height: 600px;

margin: 0 auto;

font-size: 60px;

text-align: center;

}

#btn{

display: block;

width: 60px;

height: 60px;

margin: 0 auto;

color: #FFFFFF;

/*margin-left: 300px;*/

}

</style>

</head>

<body>

<div id="box">一个div</div>

</body>

$('#btn').get(0).onclick = function(){

$('#box').toggle(1000);

}

</script>

</html>

10-jquery的效果-slide

<!DOCTYPE html>

<head>

<title>slide</title>

#box{

width: 300px;

height: 300px;

margin: 0 auto;

text-align: center;

}

</style>

</head>

<body>

<div id="box">life is short</div>

</body>

$('#box').get(0).onclick = function () {

// $('#box').slideUp(3000);

$('#box').fadeOut(1000);

}

</script>

</html>

11-jquery的效果-fade

淡入和淡出效果

12-jquery的效果-animate

13-右下角弹出小广告

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

$(function () {

//队列式的调用，排队做事

$('#box').slideDown('normal').slideUp('fast').fadeIn(1000).click(function () {

$(this).fadeOut(1000);

});

})

</script>

</html>

14-jquery的属性操作-attr和prop

html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()

DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()

类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()

值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()

15-jquery的属性操作-class和值操作

attr

概念：设置属性值或者返回被选元素的属性值

//获取值：attr()设置一个属性值的时候只是获取值

var id = $('div').attr('id')

console.log(id)

var cla = $('div').attr('class')

console.log(cla)

//设置值

//1.设置一个值设置div的class为box

$('div').attr('class','box')

//2.设置多个值，参数为对象，键值对存储

$('div').attr({name:'hahaha',class:'happy'})

removeAttr

从每一个匹配的元素中删除一个属性

prop

prop()获取在匹配的元素集中的第一个元素的属性值.它是对当前匹配到的dom对象设置属性。

removeProp

用来删除由.prop()方法设置的属性集

addClass（添加多个类名）

为每个匹配的元素添加指定的类名。

$('div').addClass("box"):添加一个类名

$('div').addClass("box box2"):添加多个类名

removeClass

从所有匹配的元素中删除全部或者指定的类。

$('div').removeClass('box')移除指定的类

$('div').removeClass()移除全部的类

var tag = false;

$('span').click(function(){

if(tag){

$('span').removeClass('active')

tag=false;

}else{

$('span').addClass('active')

tag=true;

}

})

toggleClass

如果存在（不存在）就删除（添加）一个类。

语法：toggleClass('box')

$('span').click(function(){

//动态的切换class类名为active

$(this).toggleClass('active')

})

html

获取值：

html() 是获取选中标签元素中所有的内容

设置值：设置该元素的所有内容会替换掉标签中原来的内容

$('ul').html('<a href="#">百度一下</a>')

//可以使用函数来设置所有匹配元素的内容

$('ul').html(function(){

return '哈哈哈'

})

text

获取值：

text() 获取匹配元素包含的文本内容

设置值：

设置该所有的文本内容

注意：值为标签的时候不会被渲染为标签元素只会被当做值渲染到浏览器中

val

获取值：

val()用于表单控件中获取值，比如input textarea select等等

设置值：

$('input').val('设置了表单控件中的值')

<!DOCTYPE html>

<head>

span.active{

font-size: 30px;

}

</style>

</head>

<body>

</div>

<ul>

</ul>

</body>

// attr()方法操作HTML属性

// attr()如果有有一个参数，表示获取值

$(function () {

$('button').click(function () {

$('#box p').text($('#box').attr('id'));

})

});

// attr设置两个值，那么久表示设置两个属性，设置多个值的话就设置成key value的形式

$('#box').attr('class', 'foo');

$('#box').removeAttr('class');

//获取的是第一个元素的class值

var i = $('li').prop('class');

// 设置值

$('li').first().prop('name','pop');

console.log( $('li').first());

// addClass() removeClss()

$('span').addClass('span2 span 3');

$('span').removeClass('span1');

var isBig = true;

$('span').click(function () {

if (isBig){

$(this).addClass('active');

isBig = false;

}else{

$(this).removeClass('active');

isBig = true;

}

//值属性的操作

})

</script>

</html>

16-操作input中的value值

17-jquery文档操作-插入节点

18-jquery文档操作-复制,替换,删除

19-jquery的位置属性

20-仿淘宝导航栏案例

21-jquery的筛选方法

22-选项卡嵌套

23-小米官网部分案例

24-焦点式轮播图

25-动态实现轮播图

26-事件流

27-jquery的事件对象和事件冒泡

28-jquery事件的绑定和移除

29-自定义事件和事件代理

30-jquery的鼠标事件一

31-jquery的鼠标事件二

32-jquery的表单事件

33-jquery的ajax技术

34-Bootstrap介绍和引入

35-响应式原理

36-Bootstrap的栅格系统介绍

37-Bootstrap的栅格系统使用

38-Bootstrap的css全局样式一

39-Bootstrap的css全局样式二

40-bootstrap组件使用一

41-bootstrap组件使用二

42-bootstrap插件介绍

码农公寓

What is jQuery?

相关文章