- jQuery是一个轻量级,兼容多浏览器的JavaScript库;
- 更方便的处理HTML Document (文档), Events(事件),实现动画效果,方便地进行Ajax交互,能简化JavaScript编程,宗旨是:'Write less, do more.'
- jQuery的优势
-
jQuery的优势1.一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。 2.丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。 3.链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。 4.事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 5.Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。 6.跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。 7.插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
jQuer查找标签
- id选择器:
-
$("#id")得到是一个jQuery对象 - 标签选择器:
-
$("tagName")得到也是一个jQuery对象 jQuery对象通过索引得到是标签对象,可以使用标签内置方法 - class选择器:
-
$(".className")得到一个jQuery对象 - 配合使用:
-
$("div.c1") // 找到有c1 class类的div标签 - 所有元素选择器:
-
$("#id, .className, tagName") - 层级选择器:
-
$("x y");// x的所有后代y（子子孙孙） $("x > y");// x的所有儿子y（儿子） $("x + y")// 找到所有紧挨在x后面的y $("x ~ y")// x之后所有的兄弟y -
###基本选择器
:first // 第一个 :last // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 :gt(index)// 匹配所有大于给定索引值的元素 :lt(index)// 匹配所有小于给定索引值的元素 :not(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一或多个标签在其内的标签(指的是从后代(子子孙孙)元素找)var s = $('div:first'); 找到第一个div标签
s
w.fn.init [div#s1, prevObject: w.fn.init(1)]0: div#s1length: 1prevObject:
var s = $('div:last'); 找到最后一个标签
s
w.fn.init [div.s3, prevObject: w.fn.init(1)]0: div.s3length: 1prevObject:var s = $('div'); 找到所有div标签
s
w.fn.init(3) [div#s1, div.s2, div.s3, prevObject: w.fn.init(1)] - 属性选择器:
-
[attribute] [attribute=value]// 属性等于 [attribute!=value]// 属性不等于
案例:<input type="text"> <input type="password"> <input type="checkbox"> $("input[type='checkbox']");// 取到checkbox类型的input标签 $("input[type!='text']");// 取到类型不是text的input标签 - 筛选器
- 下一个元素:
-
$("#id").next() $("#id").nextAll() $("#id").nextUntil("#i2") - 上一个元素:
-
$("#id").prev() $("#id").prevAll() $("#id").prevUntil("#i2") - 父亲元素:
-
$("#id").parent() $("#id").parents() // 查找当前元素的所有的父辈元素 $("#id").parentsUntil() // 查找当前元素的所有的父辈元素，
直到遇到匹配的那个元素为止。 - 儿子和兄弟元素:
-
$("#id").children();// 儿子们 $("#id").siblings();// 兄弟们 - 查找:搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法
-
$("div").find("p")
-
操作标签
- 样式操作:
-
addClass();// 添加指定的CSS类名。 removeClass();// 移除指定的CSS类名。 hasClass();// 判断样式存不存在 toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。 - css
-
css("color","red")//DOM操作：tag.style.color="red" 如果想要设置多个,则按对象(字典)格式传入多个属性值即可;
css('{'color':'green','font-size':'16px'}') 样例:$("p").css("color", "red"); //将所有p标签的字体设置为红色 - 位置:
-
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置 position()// 获取匹配元素相对父元素的偏移 scrollTop()// 获取匹配元素相对滚动条顶部的偏移 scrollLeft()// 获取匹配元素相对滚动条左侧的偏移 -
定位例子
<style> .s1{ position: relative; 100px; height: 100px; background-color: aqua; } .s2{ position: absolute; 100px; height: 100px; background-color: blue; left: 100px; top: 100px; } </style> </head> <body> <div class="s1"> <div class="s2"></div> </div> #输出 $('.s1').offset(); {top: 8, left: 8} $('.s2').offset() {top: 108, left: 108} $('.s2').position() {top: 100, left: 100}
- 尺寸:
-
height() #指的是content内容的高度 width() #指的是标签内content内容的宽度 innerHeight() #content + padding(上 和 下) innerWidth() outerHeight() #content + padding上和下) + boder(上和下) outerWidth()
-
文本操作
- HTML代码:
-
html() // 如果匹配到多个对象,则显示第一个内容 $('.s1').html() "55699 <div class="s2"> <p><span>1122</span></p> </div> " 里面可以放参数,则把当前标签下所有内容替换成参数值
$('.s1').html('<a href="https://www.baidu.com">百度一下</a>')$('.s1').html()
"<a href="https://www.baidu.com">百度一下</a>" - 文本值:
-
text()// 取得所有匹配元素的内容 text(val)// 设置所有匹配元素的内容
不认识标签,只能单一显示纯文本 - 值:
-
val()// 取得第一个匹配元素的当前值 val(val)// 设置所有匹配元素的值 val([val1, val2])// 设置checkbox、select的值
- 示例:val获取value值
-
获取radio的值: $('input:checked').val() "1" $('input:checked').val() "0" 获取checkbox的值: 跟radio一样,只是当你选中多个选项时, $(input[name='checkbox']:checked).val()默认返回的是第一个;
-
属性操作
- 用于ID等或自定义属性:
-
attr(attrName)// 返回第一个匹配元素的属性值 attr(attrName, attrValue)// 为所有匹配元素设置一个属性值 attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值 removeAttr()// 从每一个匹配的元素中删除一个属性
- 用于checkbox和radio(得到True or false):
-
prop() // 获取属性 removeProp() // 移除属性
跟attr类似,,获取文本类属性时,用attr
获取bool值时,用prop;
-
文档处理
- 添加到指定元素内部的后面,包含在标签内
-
$(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B 例子::: var dEle1 = document.createElement('div') dEle1.innerText = '黑山老妖' $('#d1').append(dEle1) html结构::: <div id="d1"> 黄袍哥 <div>黑山老妖</div> </div>
- 添加到指定元素的外部的后面
-
$(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面 例子::: var dEle1 = document.createElement('div') dEle1.innerText = '黑山老妖' $('#d1').after(dEle1) html结构::: <div id="d1">黄袍哥</div> <div>黑山老妖</div>
- 添加到指定元素内部的前面
-
$(A).prepend(B)// 把B前置到A $(A).prependTo(B)// 把A前置到B
- 添加到指定元素外部的前面
-
$(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面
- 移除和清空元素
-
remove()// 从DOM中删除所有匹配的元素(把调用这个方法的标签,内容都删除)。
$('#d1').remove() ##把id为d1删除
empty()// 删除匹配的元素集合中所有的子节点。
保留标签本身, - 替换
-
replaceWith() ## $('p').replaceWith(dom) 把p标签替换为dom标签 replaceAll() ## $(dom).replaceAll('p')替换页面的所有的p标签 - 克隆
-
clone()// 参数
<button id="b1">666</button>
<script src="jquery-3.3.1.min.js"></script>
<script>
$('#b1').click(function () {
// 这个true代表把事件也一起克隆
$(this).clone(true).insertAfter(this);
})
</script>
-
事件
- 常用事件:
-
click(function(){...}) #触发 hover(function(){...}) #鼠标移进移出 blur(function(){...}) #鼠标聚焦消失退出 focus(function(){...}) #鼠标聚焦进入 change(function(){...}) #改变value值 keyup(function(){...}) #鼠标按下移开
-
shift赋值
思想: 1.keydown事件:::按下shift将一个全局变量设为True, 2.标签触发事件根据变量是否为真,然后判断是否触发 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <table border="1" id="t1"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>绝技</th> <th>状态</th> <th>操作</th> <th></th> </tr> </thead> <tbody> <tr> <td>001</td> <td>任我行</td> <td>吸星大法</td> <td> <select name="tai" id="ll"> <option value="1">在职</option> <option value="2">下线</option> <option value="3">离职</option> </select> </td> <td> <button class="s1">移除</button> </td> <td><input type="checkbox" name="hobby"></td> </tr> <tr> <td>002</td> <td>令狐冲</td> <td>独孤九剑</td> <td> <select name="tai"> <option value="1">在职</option> <option value="2">下线</option> <option value="3">离职</option> </select> </td> <td> <button class="s1">移除</button> </td> <td><input type="checkbox" name="hobby"></td> </tr> <tr> <td>003</td> <td>林平之</td> <td>辟邪剑法</td> <td> <select name="tai"> <option value="1">在职</option> <option value="2">下线</option> <option value="3">离职</option> </select> </td> <td> <button class="s1">移除</button> </td> <td><input type="checkbox" name="hobby"></td> </tr> </tbody> </table> <button id="b1">添加</button> <button id="b2">全选</button> <button id="b3">反选</button> <button id="b4">取消</button> <script src="jquery-3.3.1.min.js"></script> <script> $('#b1').click(function () { var tdEle = document.createElement('tr'); tdEle.innerHTML = ` <td>004</td> <td>任盈盈</td> <td>暗影飞蝶</td> <td> <select name="tai"> <option value="1">在职</option> <option value="2">下线</option> <option value="3">离职</option> </select> </td> <td> <button class="s1">移除</button> </td> <td><input type="checkbox" name="hobby"></td> `; $('#t1').append(tdEle) }); $(window).on('click', '.s1', function () { $(this).parent().parent().remove(); }); $('#b2').click(function () { $(':checkbox').prop('checked', true); }); $('#b4').click(function () { $(':checkbox').prop('checked', false); }); $('#b3').click(function () { var $check = $(':checkbox'); for (var i = 0; i < $check.length; i++) { $($check[i]).prop('checked', !($($check[i]).prop('checked'))) } }); var flag = false; // 先判断按键是否被按下,然后把全局变量置为true,触发另一事件 $(window).on('keydown',function (event) { if (event.keyCode === 16){flag = true;} }); $(window).on('keyup',function (event) { if(event.keyCode === 16){flag = false;} }); // 事件委托 $('table').on('change','select',function () { if(flag){ var $find = $(this).parent().siblings().last().find('input'); if($($find).prop('checked')){ var $val = $(this).val(); $('input:checked').parent().parent().find('select').val($val); } } }) </script> </body> </html>
-
实时监测input框
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <input type="text" id="i1"> <script src="jquery-3.3.1.js"></script> <script> // 只要input框的值发生变化就触发 $("#i1").on("input", function () { var value = $(this).val(); console.log(value); }) </script> </body> </html>
取消自动触发事件#若input框为空,则取消submit的默认事件,自动刷新页面 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>位置相关示例之返回顶部</title> <style> </style> </head> <body> <form action=""> <input type="text" id="i1"> <input type="submit" id="i2"> </form> <script src="jquery-3.3.1.min.js"></script> <script> // submit触发事件,判断是否input是否为空,若为空则阻止submit的默认事件 $('#i2').on('click',function (event) { if($('#i1').val().length === 0){event.preventDefault()} }) </script> </body> </html>
- 页面载入
-
$(document).ready(function(){ // 在这里写你的JS代码... })
简写:
-
$(function(){ // 你在这里写你的代码 })
- each循环机制
-
each的return效果
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>位置</title> <style> </style> </head> <body> <form action=""> <input type="text" id="i1"> <input type="submit" id="i2"> </form> <script src="jquery-3.3.1.min.js"></script> <script> // submit触发事件,判断是否input是否为空,若为空则阻止submit的默认事件 $('#i2').on('click',function (event) { if($('#i1').val().length === 0){event.preventDefault()} }); var li = [11,22,33]; $.each(li,function (k,v) { // 1.跳出本次循环,直接return相当于continue // if (k === 1){return} //结果:11 33 end // 2.return false结束本次循环,相当于break if(k ===1 ){return false} //结果:11 end console.log(v); }); console.log('end'); </script> </body> </html>