jq就是js库，封装了js常见的操作
jQuery的作用 简化js的DOM树操作
js对象：document.getElement() 获得的都是js对象 大部分是属性 jq对象：$()大部分是方法
jq本质上虽然是js，但是使用jq的属性和方法必须保证对象是jQuery对象而不是js方式获得的DOM对象。 使用js方式获取的对象是js的DOM对象，使用jq获取的对象是jq对象
转换语法 js的DOM对象转换成jQuery对象，语法：$(js对象) jQuery对象转换成js对象，语法：jquery对象[索引]或jquery对象.get(索引)：一般索引写0
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.3.1.js"></script> </head> <body> <span id="spanId"></span><br/> <input type="button" value="插入内容" onclick = "writeIn()"/> <input type="button" value="插入内容" onclick = "writeIn02()"/> </body> <script> function writeIn() { var spanEle = document.getElementById("spanId"); var $sE = $(spanEle); $sE.html("hello..."); } function writeIn02() { var $spanEle = $("#spanId"); var spanEle = $spanEle[0]; spanEle.innerHTML = "hello"; } </script> </html>点击事件
<body> <input id="btnid" type="button" value="click"/> </body> <script> $("#btnid").click(function () { alert("点击") }) </script>获得焦点和失去焦点
<body> <input id="btnid" type="text" value="focus"/> </body> <script> $("#btnid").focus(function () { alert("获得了焦点"); }); $("#btnid").blur(function () { alert("失去焦点"); }); </script>内容改变事件
<body> <select id="select"> <option value = "1">这是1</option> <option value = "2">这是2</option> <option value = "3">这是3</option> <option value = "4">这是4</option> </select> </body> <script> $("#select").change(function () { alert("内容改变为" + this.value); }) ; </script>鼠标相关事件
<head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.3.1.js"></script> <style> #divId{ width:200px; height:200px; background: black; } </style> </head> <body> <div id = "divId"></div> </body> <script> $("#divId").mouseenter(function () { $(this).css("backgroundColor","red"); }); $("#divId").mouseout(function () { $(this).css("backgroundColor","blue"); }); </script>键盘相关事件
<body> <input id="inputId" type="text"> </body> <script> $("#inputId").keydown(function () { console.log("键盘摁下") }) $("#inputId").keyup(function () { console.log("键盘抬起"); }); </script>事件的绑定 jq元素对象.on(事件类型，function(){})
事件的解绑 jq元素对象.off(事件名称)
<body> <input id="btnid" type="button" value="click"/><br/> <input id="bthid2" type="button" value="解绑"> </body> <script> var btn = $("#btnid"); btn.click(function () { alert("helli") }) $("#btnid2").on("click",function () { btn.off("click"); }); </script>方法 show([speed],[easing],[fn]) 显示元素方法 hide([speed],[easing],[fn]) 隐藏元素方法 toggle([speed],[easing],[fn]) 切换元素方法
参数 speed 三种预定速度之一的字符串(“slow”,“normal”,or"fast") easing 用来指定切换，默认是swing，可用参数是linear fn 在动画完成时执行的函数，每个元素执行一次
<body> <input type="button" value="show()" id="btn1"/> <input type="button" value="hide()" id="btn2"/> <input type="button" value="toggle()" id="btn3"/><br/> <div id="div1" style="width: 100px;height: 100px;border: 1px solid red;"></div> </body> <script> $("#btn1").click(function () { $("#div1").show(1000); }); $("#btn2").click(function () { $("#div1").hide(1000); }); $("#btn3").click(function () { $("#div1").toggle(); }) </script>方法 slideDowm([speed],[easing],[fn]) 向下滑动方法 slideUp([speed],[easing],[fn]) 向上滑动方法 slideToggle([speed],[easing],[fn]) 切换元素方法
方法 fadeIn(同上) fadeOut(同上) fadeToggle(同上)
标签选择器(元素选择器) $(“html标签名”) 获得所有匹配标签名称的于元素 id选择器 $("#id的属性值") 获得与指定id属性值匹配的元素 类选择器 $(".class的属性值") 获得与指定的class属性值匹配的元素
后代选择器 $(“A B”) 选择A元素内部的所有B元素 子选择器 $(“A>B”) 选择A元素内部的所有B子元素 兄弟选择器 $(“A+B”) 获得A元素同级的下一个B元素 兄弟选择器 $(“A~B”) 获得A元素同级的所有B元素
$(“A[属性名]”) 包含指定属性的选择器 $(“A[属性名=值]”) 包含指定属性等于指定值的选择器
首元素选择器 :first 获得选择的元素中的第一个元素 尾元素选择器 :last 获得选择的元素中的最后一个元素 非元素选择器 :not(selecter) 不包括指定内容的元素 偶数选择器 :even 偶数，从0开始 奇数选择器 :odd 奇数，从0开始 等于索引选择器 :eq(index) 指定索引元素 大于索引选择器 :gt(index) 小于索引选择器 :It(index)
可用元素选择器 :enabled 获得可用元素 不可用元素选择器 :disable 获得不可用元素 选中选择器 :checked 获得单选/复选框选中的元素 选中选择器 :selected 获得下拉框选中的元素
方法 css(name) 获取CSS样式 css(name,value) 设置CSS样式
<body> <div id="divId" style="width: 100px ; height: 100px ; background-color: #ff0000;"></div> <input type="button" value="获得背景色样式值" id="btn01"/> <input type="button" value="设置背景色样式" id="btn02"/> </body> <script> $("#btn01").click(function () { var colorValue = $("#divId").css("background-color"); alert("colorValue = " + colorValue); }); $("#btn02").click(function () { $("#divId").css("background-color" , "green"); }); </script>方法 attr(name,[value]) 获得/设置属性的值 prop(name,[value]) 获得/设置属性的值(checked,selected)
API val([value]) 获得/设置标签里面value属性相应的值 text([value]) 获得/设置元素的文本内容 html([value]) 获得/设置元素的标签体内容
val()和val(…)
<body> <input type="text" value="hello" id="inputId"/> <br/> <input type="submit" value="获得value" id="btn01" /> <input type="submit" value="设置value" id="btn02"/> </body> <script> $("#btn01").click(function () { var value = $("#inputId").val(); console.log(value); }); $("#btn02").click(function () { $("#inputId").val("balabalablabala"); }); </script>text()和html()
<body> <p id="pid"></p><br/> <input type="button" value="html(...)" id="btn01"/> <input type="button" value="text(...)" id="btn02"/> </body> <script> $("#btn01").click(function () { $("#pid").html("<font color='red'>hello...html</font>"); }); $("#btn02").click(function () { $("#pid").text("<font color = 'red'>hello...text</font>");//不支持标签 }); </script>API
$(“A”) 创建A元素对象 append(element) 添加成最后一个子元素，两者之间是父子关系 prepend(element) 添加成第一个子元素,两者之间是父子关系 appendTo(element) 添加到父元素的内部最后面 prependTo(element) 添加到父元素的内部最前面 before(element) 添加到当前元素前面，两者之间是兄妹关系 after(element) 添加到当前元素的后面，两者之间是兄妹关系
内部插入
append a.apend(c) 将c插入到a的内部的后面 appendTo c.appendTo(a) 将c插入到a的内部的后面 <a> ... <c></c> </a> prepend a.prepend(c) 将c插入到a的内部的前面 prependTo c.prepend(a) 将c插入到a的内部的前面 <a> <c></c> ... </a>外部插入
after a.after(c) <a></a><c></c> before a.before(c) <c><c><a></a>API remove() 删除指定元素 empty() 清空指定元素的所有子元素
js方式遍历
for(var i = 0;i<元素数组.length;i++){ 元素数组[i]; }
<script> var array = [1,2,3,4,5]; for(var i = 0 ; i < array.length ; i++){ array[i]; } </script>jquery对象.each(function(index,element){})
<script> var array = [1,2,3,4,5]; $(array).each(function (a,n) { console.log("array[" +a+ "]="+n); }); </script>$.each(jquery,function(index,element){});
<script> var array = [1,2,3,4,5]; $.each($(array),function (a,n) { console.log(a,n); }) </script>jq3.0新特性for of语句遍历 for(变量 of jquery对象){ 变量; }
for(n of $ (array)){ console.log(n); }进入页面3s后弹出广告，3s后广告隐藏
<body> <div id="adDiv" style="width: 100%;height: 300px;display: none"> <img src="../src/ad.jpg" height="100%" width="100%"/> </div> </body> <script> setTimeout("showAd()",3000); function showAd(){ var $adObj = $("#adDiv"); $adObj.show(3000,function () { setTimeout("hideAd()",3000); }); } function hideAd(){ var $adObj = $("#adDiv"); $adObj.hide(3000); } </script>使用筛选器，匹配出奇数偶数行，设置背景色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.3.1.js"></script> </head> <body> <table width="500px" align="center" border="1px"> <tr> <td><input type="checkbox" id="all" /></td> <td>商品名称</td> <td>商品价格</td> <td>商品数量</td> <td>操作</td> </tr> <tr> <td><input type="checkbox" class="one"/></td> <td>Mac</td> <td>18800</td> <td>10</td> <td> <a href="#">删除</a> <a href="#">修改</a> </td> </tr> <tr> <td><input type="checkbox" class="one"/></td> <td>Mac</td> <td>18800</td> <td>10</td> <td> <a href="#">删除</a> <a href="#">修改</a> </td> </tr> <tr> <td><input type="checkbox" class="one"/></td> <td>Mac</td> <td>18800</td> <td>10</td> <td> <a href="#">删除</a> <a href="#">修改</a> </td> </tr> <tr> <td><input type="checkbox" class="one"/></td> <td>Mac</td> <td>18800</td> <td>10</td> <td> <a href="#">删除</a> <a href="#">修改</a> </td> </tr> <tr> <td><input type="checkbox" class="one"/></td> <td>Mac</td> <td>18800</td> <td>10</td> <td> <a href="#">删除</a> <a href="#">修改</a> </td> </tr> </table> </body> <script> $("tr:odd").css("backgroundColor","#ffb6c1"); $("tr:even").css("backgroundColor","#4f818d"); </script> </html>