前端之jQuery
1. jQuery概述
- jQuery是一个javascript库，在它内部把几乎所有功能都做了封装
- 在使用jQuery时，需要提前下载并应用jQuery之后，才能在代码中使用
1.1 jQuery的引入
<!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <title>jQuery</title> </head> <body> <div class="body"> <ul> <li id="login">登录</li> <li id="register">注册</li> </ul> </div> <!--引入jQuery--> <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> <script> // 利用jQuery提供的功能获取标签文本 var value = $('#login').text(); console.log(value); </script> </body> </html>
1.2 DOM对象和jQuery对象
- DOM对象和jQuery之间可以进行相互转换
<!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <title>jQuery</title> </head> <body> <div id="content">hgzero</div> <!--引入jQuery--> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> // DOM操作 // 获取文本 var txt = document.getElementById('content').innerText; document.getElementById('content').innerText = '煞笔';
// jQuery操作 var text = $('#content').text(); $('#content').text('傻狗');
// Dom对象转换jQuery对象：$(dom对象) $(document.getElementById('content')) // jQuery对象转换成Dom对象：jQuery对象[0] $('#content')[0] </script> </body> </html>
2. 选择器
2.1 常用的选择器
$(document) // 选择整个文档对象 $('li') // 选择所有的li元素 $('#myId') // 选择id为myId的网页元素 $('.myClass') // 选择class为myClass的元素 $('input[name=first]') // 选择name属性等于first的input元素 $('#ul1 li span') // 选择id为为ul1元素下的所有li下的span元素
2.2 表单选择器
1）html代码
<form> <input type="button" value="Input Button"/> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select> <option>Option</option> </select> <textarea> </textarea> <button>Button</button> </form>
2）jQuery代码
$(":text") // 找到所有input标签
// $(":input") 找到所有input标签
// $(":password") 找到所有input且type=password的标签
// $(":radio") 找到所有input且type=radio的标签
// $(":checkbox") 找到所有input且type=checkbox的标签
3. 筛选器
- 筛选器一般用于对选择器选中的标签进行再次筛选
3.1 对选择集进行修饰过滤
- 类似CSS伪类
$('#ul1 li:first') // 选择id为ul1元素下的第一个li
$('#ul1 li:odd') // 选择id为ul1元素下的li的奇数行
$('#ul1 li:eq(2)') // 选择id为ul1元素下的第3个li
$('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li
$('#myForm :input') // 选择表单中的input元素
$('div:visible') // 选择可见的div元素
3.2 对选择集进行函数过滤
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); // 选择class不等于myClass的div元素
$('div').filter('.myClass'); // 选择class等于myClass的div元素
$('div').first(); // 选择第1个div元素
$('div').eq(5); // 选择第6个div元素
3.3 选择集转移
$('div').prev('p'); // 选择div元素前面的第一个p元素
$('div').next('p'); // 选择div元素后面的第一个p元素
$('div').closest('form'); // 选择离div最近的那个form父元素
$('div').parent(); // 选择div的父元素
$('div').children(); // 选择div的所有子元素
$('div').siblings(); // 选择div的同级元素
$('div').find('.myClass'); // 选择div内的class等于myClass的元素
4. 样式操作
4.1 操作行间样式
- 选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width
// 获取div的样式 $("div").css("width"); $("div").css("color"); //设置div的样式 $("div").css("width","30px"); $("div").css("height","30px"); // 一次操作多个css样式 $("div").css({fontSize:"30px",color:"red"});
4.2 操作样式类名
$("#div1").addClass("divClass2") // 为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass") // 移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") // 移除多个样式
$("#div1").toggleClass("anotherClass") // 重复切换anotherClass样式
5. 属性操作
5.1 html() 和 text()
1）html() 取出或设置html内容
// 取出html内容 var $htm = $('#div1').html(); // 设置html内容 $('#div1').html('<span>添加文字</span>');
2）text() 取出或设置text内容
// 取出文本内容 var $htm = $('#div1').text(); // 设置文本内容 $('#div1').text('<span>添加文字</span>');
5.2 attr()
- attr() 取出或设置某个属性的值
// 取出图片的地址 var $src = $('#img1').attr('src'); // 设置图片的地址和alt属性 $('#img1').attr({ src: "test.jpg", alt: "Test Image" });
5.3 val() 值
1）html代码
<input type="text" id="username"> <input type="text" class="a1" name="sex">男 <input type="text" class="a1" name="sex">女 <input type="text" class="a2" name="hobby">抽烟 <input type="text" class="a2" name="hobby">喝酒 <input type="text" class="a2" name="hobby">烫头 <select name="city" id="s1"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">深圳</option> </select> <select name="lover" id="s2"> <option value="1">波多</option> <option value="2">苍井</option> <option value="3">小泽</option> </select>
2）获取值
// 文本输入框： $('#username').val(); // 单选radio框： $('.a1:checked').val(); // 多选checkout框： $('.a2:checked').val()是不行的, 需要循环取值，如下： var d = $(':checkbox:checked'); for (var i=0;i<d.length;i++){ console.log(d.eq(i).val()); } // 单选select框： $('#city').val()； // 多选select框： $('#lover').val();
3）设置值
// 文本输入框： $('#username').val('you are my love'); // 单选radio框： $('.a1').val([2]); // 注意里面必须是列表，写的是value属性对应的值 // 多选checkout框： $('.a2').val(['2','3']) // 单选select框： $('#city').val('1')； // 多选select框： $('#lover').val(['2','3'])
5.4 prop() 属性
// HTML代码： <input type="checkbox" id="i1" value="1"> // jQuery代码： $("#i1").prop("checked") // 结果： false
6. jQuery元素节点操作
6.1 创建节点
var $div = $('<div>'); var $div2 = $('<div>这是一个div元素</div>');
6.2 插入节点
- append() 和 appendTo()：在现存元素的内部，从后面插入元素
var $span = $('<span>这是一个span元素</span>'); $('#div1').append($span); ...... <div id="div1"></div>
- prepend() 和 prependTo()：在现存元素的内部，从前面插入元素
- after() 和 insertAfter()：在现存元素的外部，从后面插入元素
- before() 和 insertBefore()：在现存元素的外部，从前面插入元素
6.3 删除节点
1）empty 删除标签内部的标签
// HTML代码： <div class="d1"> <span>波多</span> </div> // jQuery代码： $('.c1').empty() // 结果： <div class="d1"> </div>
2）remove 删除标签
// HTML代码： <div class="d1"> <span>波多</span> </div> <div>你好</div> // jQuery代码： $('.c1').remove() // 结果： <div>你好</div>
7. 事件
7.1 click事件
- jQuery的链式调用：jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写
$('#btn1').click(function(){
// 内部的this指的是原生对象
// 使用jquery对象用 $(this)
})
7.2 jQuery特殊效果
- hide() 隐藏元素
- show() 显示元素
- fadeIn() 淡入
- fadeOut() 淡出
- fadeToggle() 切换淡入淡出
- toggle() 依次展示或隐藏某个元素
- slideDown() 向下展开
- slideUp() 向上卷起
- slideToggle() 依次展开或卷起某个元素
$btn.click(function(){ $('#div1').fadeIn(1000,'swing',function(){ alert('done!'); }); });
7.3 jQuery动画
- 通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数
$('#div1').animate({
width:300,
height:300
},1000,swing,function(){
alert('done!');
});
// 参数可以写成数字表达式：
$('#div1').animate({
width:'+=100',
height:300
},1000,swing,function(){
alert('done!');
});
7.4 尺寸相关、滚动事件
1）获取和设置元素的尺寸
width()、height() # 获取元素width和height innerWidth()、innerHeight() # 包括padding的width和height outerWidth()、outerHeight() # 包括padding和border的width和height outerWidth(true)、outerHeight(true) # 包括padding和border以及margin的width和height
2）获取元素相对页面的绝对位置
offse()
3）获取可视区高度
$(window).height();
4）获取页面高度
$(document).height();
5）获取页面滚动距离
$(document).scrollTop();
$(document).scrollLeft();
6）页面滚动时事件
$(window).scroll(function(){
......
})
7.5 绑定事件
1）绑定事件&取消绑定事件
- 绑定事件的其他方式
$(function(){ $('#div1').bind('mouseover click', function(event) { alert($(this).html()); }); });
- 取消绑定事件
$(function(){ $('#div1').bind('mouseover click', function(event) { alert($(this).html()); // $(this).unbind(); $(this).unbind('mouseover'); }); });
2）主动触发与自定义事件
- 主动触发
- 可以使用jQuery对象上的trigger方法来触发对象上绑定的事件
- 自定义事件
- 除了系统事件外，可以通过bind方法自定义事件，然后用trigger方法触发这些事件
//给element绑定hello事件 element.bind("hello",function(){ alert("hello world!"); }); //触发hello事件 element.trigger("hello");
7.6 事件冒泡
1）什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序；
如果没有定义此事件处理程序或者事件返回true，那么这个事件就会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）
2）事件冒泡的作用
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
3）阻止事件冒泡
- 事件冒泡机制有时候是不需要的，需要阻止掉，通过event.stopPropagation()来阻止
$(function(){ var $box1 = $('.father'); var $box2 = $('.son'); var $box3 = $('.grandson'); $box1.click(function() { alert('father'); }); $box2.click(function() { alert('son'); }); $box3.click(function(event) { alert('grandson'); event.stopPropagation(); }); $(document).click(function(event) { alert('grandfather'); }); }) ...... <div class="father"> <div class="son"> <div class="grandson"></div> </div> </div>
4）阻止默认行为
// 阻止右键菜单 $(document).contextmenu(function(event) { event.preventDefault(); });
5）合并阻止操作
一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用：return false
// event.stopPropagation(); // event.preventDefault(); // 合并写法： return false;
7.7 事件委托
1）什么是事件委托
事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作。
事件委托首先可以极大的减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
2）一般绑定事件的写法
$(function(){ $ali = $('#list li'); $ali.click(function(event) { $(this).css({background:'red'}); }); }) ... <ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
3）事件委托的写法（delegate）
$(function(){ $list = $('#list'); $list.delegate('li', 'click', function(event) { $(this).css({background:'red'}); }); }) ... <ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
4）事件委托的写法（on）
- 其实on和delegate只不过是开头两个参数的位置调换了一下而已
$(function(){ $("#lists").on("click","li",function(event){ var target = $(event.target); target.css("background-color","red"); }) })
5）取消事件委托
// ev.delegateTarge 委托对象 $(ev.delegateTarge).undelegate(); // 上面的例子可使用 $list.undelegate();
7.8 滚轮事件&函数节流
1）jquery.mousewhell插件
jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.mousewheel.js
2）函数节流
JavaScript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流。
