1.JQuery介绍
JQuery是一个JavaScript库，是对ECMScript、dom、bom、的一个浅封装，让用户更方便操作。
可以理解成一个大的函数，函数内部封装了很多函数来供你使用。
复制代码
1
2
3
4
5
6
7
8
9
10jQuery库包含以下功能 * HTML选取 * HTML元素操作 * CSS操作 * HTML事件函数 * JavaScript特效和函数 * HTML DOM遍历和修改 * AJAX
提示： 除此之外，JQuery还提供了大量的插件，目前jQuery兼容于所有主流浏览器
1.1 JQuery函数
复制代码
1
2
3
4
5
6
7
8
9
10通过"jQuery"和'$'来调用函数 1.$(选择器) 通过选择器选择到符合条件的Element元素，将其保存到jQuery对象中 2.$(html片段) 将html片段转换成Element元素，然后再封装成一个jQuery对象 3.$(Element元素) 将Element元素转换成一个jQuery对象 4.$(匿名函数) 匿名函数在文档加载完毕后执行，类似于window.onload=function(){}
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22// jquery核心函数 console.log($,typeof $) //function jQuery(selector, context) function // jquery核心对象 console.log($(),$() instanceof Object)//Object{} true 1.选择器 选择到符合条件的Element元素，将其保存到jQuery对象中 console.log($('.box')); var children=$('.child'); console.log(children); <div class="box"> <div class="child">one</div> <div class="child">two</div> <div class="child">three</div> </div> 2.html片段 将html代码片段转换成Element元素，封装成一个jQuery对象 var newChild=$('<div class="new">four</div>'); console.log(newChild) 3.Element元素 console.log($('div'))--转换成一个Jquery对象 4.$(匿名函数)
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
531.比较原生js和jQuery 通过原生js和jQuery来获取到三个div并修改他们的背景色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./js/jquery.js"></script> <script> // 原生js来获取div并修改背景色 window.onload=function(){ //1.获取element元素 var div1=document.getElementsByTagName('div')[0]; var div2=document.getElementsByClassName('box1')[0]; var div3=document.getElementById('box2'); console.log(div1,div2,div3) //2.修改element元素背景色 div1.style.backgroundColor='red' div2.style.backgroundColor='yellow'; div3.style.backgroundColor='cyan'; div1.style.width='400px'; div1.style.height='400px'; } //利用jquery获取div并修改背景色 $(function(){ // 获取到element元素 var div1=$('div:first'); var div2=$('.box1'); var div3=$('#box2'); console.log(div1,div2,div3) // 修改背景色 div1.css({ backgroundColor:'red' }); div2.css({ width:'400px', height:'200px', backgroundColor:'yellow' }) //如果是想要创建并插入节点 var div4 = $('<div id="box3">four</div>').appendTo('.parent') }) </script> </head> <body> <div></div> <div class="box1"></div> <div id="box2"></div> </body> </html>
1.2 比较原生js和jquery入口函数的区别
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37原生js 1.如果编写了多个入口就函数，后面的会覆盖掉前面的 window.onload=function(){ alert('我是入口函数1') }; window.onload=function(){ alert('我是入口函数2') } jquery 2.如果编写了多个入口文件，会依次执行 $(document).ready(function(){ alert('我是入口函数1jquery') }) $(document).ready(function(){ alert('我是入口函数2jquery') }) $(document).ready(function(){ alert('我是入口函数3jquery') }) 3.jquery入口函数的写法 第一种: $(document).ready(function(){ alert('我是入口函数3jquery') }) 第二种 jQuery(document).ready(function(){ alert('我是入口函数4jquery') }) 第三种-->推荐写法 $(function(){ alert('我是入口函数5jquery') }) 第四种 jQuery(function(){ alert('我是入口函数6jquery') })
2.JQuery选择器
jQuery选择器与CSS选择器几乎完全一致，这里就不再赘述。
1.基本选择器
2.层次选择器
3.伪类选择器
4.伪元素选择器
5.属性选择器
复制代码
1
2
3$("form") $("ul.nav > li")
jQuery中所有选择器都以美元符号开头：$()
2.1 元素选择器
在页面中选取所有<div>元素
复制代码
1
2$("div")
实例
用户点击按钮后所有<div>隐藏
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15$(function(){ var div= $('div'); console.log(div) var button=$('button'); button.click(function(){ div.hide() }) }) <button>隐藏按钮</button> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div>
3.事件绑定
jQuery的事件绑定与Element元素不同，不可以使用onxxx属性，也不能使用addEventListener，而是使用on()，可以理解为on是对于Element元素事件绑定的封装。
on(event,[selector],[data],fn)
off(event,[selector],fn)
one(event,[selector],fn)
trigger(event,[data]) 模拟事件
快捷绑定 click
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
131.on $('.child').on('click',function(event){ // this--dom节点 console.log(this) }) <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>
复制代码
1
2
3
4
5
62.one $('.child').one('click',function(event){ // this--dom节点 console.log(this) })
复制代码
1
2
3
4
5
6
7
8
93.trigger 先有一个点击事件 trigger模拟点击事件 $('.child').on('click',function(event){ // this--dom节点 console.log(this) }) // trigger 模拟事件触发 // 触发第一个child的点击事件 $('.child:first-child').trigger('click')
复制代码
1
2
3
4
5
6
74.off 解绑 解绑第二个参数必须是具名函数，匿名函数不可解绑 function handler(){ console.log(this) } $('.child').on('click',handler); $('.child').off('click',handler);
复制代码
1
2
3
4
55.快捷绑定 $('.child').click(function(){ console.log(this) })
3.1 事件类型
1.click()
click()方法是当按钮点击事件被触发时会调用一个函数
2.dblclick()
当双击元素时，会发生dbclick事件
复制代码
1
2
3
4$('.child').dblclick(function(){ console.log(this) })
3.mouseenter()
当鼠标指针穿过元素时，会发生mouseenter事件
复制代码
1
2
3
4$('.child').mouseenter(function(){ console.log(this) })
4.mouseleave()
当鼠标指针离开元素时，会发生mouseleave事件
复制代码
1
2
3
4$('.child').mouseleave(function(){ console.log(this) })
5.mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件
复制代码
1
2
3
4$('.child').mousedown(function(){ console.log(this) })
6.mouseup()
当元素上松开鼠标按钮时，会发生mouseup事件
复制代码
1
2
3
4$('.child').mouseup(function(){ console.log(this) })
7.hover()
hover()方法用于模拟光标悬停事件
当鼠标移动到元素上时，会触发指定当第一个函数（mouseenter）；当鼠标移出这个元素时，会触发指定当第二个函数（mouseleave）
复制代码
1
2
3
4$('.child').hover(function(){ console.log(this) })
8.blur()
当元素失去焦点时，发生blur事件
复制代码
1
2
3
4$('input').blur(function(){ console.log(this) })
9.keydown()
键盘事件：按键按下事件
复制代码
1
2
3
4$('.child').keydown(function(){ console.log(this) })
10.keyup()
键盘事件：按键抬起事件
复制代码
1
2
3
4$('.child').keyup(function(){ console.log(this) })
3.3事件代理
复制代码
1
2
3
4$('body').on('click','button',function (event) { console.log(event) })
4.JQuery Dom操作
jQuery中提供了一系列的操作DOM节点的api,用于解决DOM原生API无法进行批量操作并且功能性较差的弊端。
插入方法：append、appendTo、prepend、prependTo、after、before、insertBefore、insertAfter
包裹方法：wrap、unwrap、wrapAll、wrapInner、
替换方法：replaceWith、replaceAll
移除方法：empty、remove、detach
克隆方法：clone
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
231.append 将内容插入到元素内同尾部 $(function(){ $('.parent').append('<b>Hello</b>') }) <div class="parent">parent</div> 2.appendTo 讲添加的元素插入到目标元素中 $(function(){ $('<div class="new">new</div>').appendTo('.parent') }) 3.empty();无参数 清空目标元素子节点 $('.parent').empty() 4.clone();默认浅克隆，只克隆节点不克隆事件；传递参数为true的时候深克隆，和dom事件一样克隆节点的时候,也会克隆事件 function myfun(){ console.log('dom克隆') } $('.child:last-child').on('click',myfun) $('.child:last-child').clone(true).appendTo('.parent'); <div class="parent"> <div class="child">one</div> <div class="child">two</div> <div class="child">three</div> </div>
属性操作
1.属性：attr、removeAttr
2.css：addClass、removeClass、toggleClass
3.内容：html、text、val
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
331.atte 获取属性 一个参数代表获取属性值 两个参数代表修改当前属性值为第二个参数 console.log($('.parent').attr('class')) <div class="parent" title="lalalal"></div> $('.parent').attr('title','one') console.log($('.parent').attr('title')) 2.removeAttr $('.parent').removeAttr('title') console.log($('.parent').attr('title')) 3.removeClass 移除类名 并且移除样式 $('.child').removeClass('child'); 4.addClass 添加类名 $('.child').addClass('active') <div class="parent" title="lalalal"> <div class="child">one</div> <div class="child">two</div> <div class="child">three</div> </div> 5.toggleClass 切换类名 原dom有类名删除，没有类名添加 $('.child').toggleClass('active') <div class="parent" title="lalalal"> <div class="child active">one</div> <div class="child active">two</div> <div class="child active">three</div> </div> 使用this通过点击事件也可以切换 $('.child').on('click',function(){ $(this).toggleClass('active') }) 6. 获取内容 console.log($('.parent').html()); console.log($('.parent').text()); console.log($('input[type=text]').val());
最后
以上就是阳光美女最近收集整理的关于JQuery基础知识的全部内容，更多相关JQuery基础知识内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复