Jquery
一：JQuery是什么？
Jquery为一个Javascript库，实现动画效果，并且方便地为网站提供AJAX交互。
二：什么是JQuery对象？
Jquery中文在线手册：
jquery的对象有两个：
$ 或者 jQuery
<script> $("div").css("color","red") </script>
<script> jQuery("div").css("color","red") </script>
二、jquery的基础语法：$（selector).action()
筛选出 li 标签
console.log($("li"))
选择器
全部代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div>hello</div> <a href="">click</a> <p id="'p1" alex="sb">pppp</p> <p id="'p2" alex="sb">ppp</p> <div class="outer"> outer <div class="inner"> inner <p>inner p</p> </div> <p>alex</p> </div> <div class="outer2">yuan</div> <p>xialv</p> <ul> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li> <li>4444</li> <li>4444</li> <li>4444</li> </ul> <input type="text"> <input type="checkbox"> <input type="submit"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> //基本选择器 // $("div").css("color","red") element类型,即标签类型 // $("*").css("color","red") //$("#p1").css("color","red") //$(".outer").css("color","red") //$(".inner,p,div").css("color","red") 多个并列的 //层级选择器 // 后代选择器 $(".outer p").css("color","red") // 子代选择器 $(".outer>p").css("color","red") // outer下面紧挨的同级标签 $(".outer+p").css("color","red") // outer下面的同级标签 $(".outer~p").css("color","red") //基本筛选器 //拿到li标签： console.log($("li")) // $("li:last").css("color","red") //$("li:eq(1)").css("color","red") //选择某行 $("li:eq(0)").css("color","red")==$("li:first").css("color","red") // 奇数行 $("li:even").css("color","red") //偶数行 $("li:odd").css("color","red") //大于某一行的操作 $("li:gt(2)").css("color","red") //小于某一行的操作$("li:lt(2)").css("color","red") //属性选择器 //选择所有alex属性$("[alex]" ).css("color","red") //$("[alex='sb']" ).css("color","red") //表单选择器 //$("[type='text']").css("width","200px") //简写形式 $(":text").css("width","400px") </script> </body> </html>
代码：
console.log($(".outer .inner p").parent().html())
打印结果如下：
查找筛选器
全部代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div>hello</div> <a href="">click</a> <p id="'p1" alex="sb">pppp</p> <p id="'p2" alex="sb">ppp</p> <div class="outer"> outer <div class="inner"> inner <p>inner p</p> </div> <p>alex</p> </div> <div class="outer2">yuan</div> <p>xialv</p> <ul> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li> <li>4444</li> <li id="end">4444</li> <li>4444</li> </ul> <input type="text"> <input type="checkbox"> <input type="submit"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> //筛选器 //前面学的通过索引进行操作.$("li:eq(2)").css("color","red"); // 这个和前面的效果一样但更方便，不需要进行字符串的拼接：$("li").eq(2).css("color","red"); // $("li").first().css("color","red"); // $("li").last().css("color","red"); //查找筛选器 //子代：$(".outer").children("p").css("color","red"); //后代：$(".outer").find("p").css("color","red"); //下一个：$("li").eq(2).next().css("color","red"); //下一个所有：$("li").eq(2).nextAll().css("color","red"); //找下一个直到,上下开区间：$("li").eq(2).nextUntil("#end").css("color","red"); //上一个 $("li").eq(4).prev().css("color","red"); //上一个所有 $("li").eq(4).prevAll().css("color","red"); //找上一个直到,上下开区间 $("li").eq(4).prevUntil("li:eq(0)").css("color","red"); //打印其父类结果：console.log($(".outer .inner p").parent().html()) $(".outer .inner p").parents().css("color","red"); //往外找，开区间$(".outer .inner p").parentsUntil("body").css("color","red"); //找上下的兄弟级,除了它自己以外 $(".outer").siblings().css("color","red") </script> </body> </html>
实例之左侧菜单：
代码为：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ height: 1000px; width: 100%; } .menu{ float: left; background-color: beige; width: 30%; height: 500px; } .content{ float: left; background-color: rebeccapurple; width: 70%; height: 500px; } .title{ background-color:aquamarine; line-height: 40px; } .hide{ display: none; } </style> </head> <body> <div class="outer"> <div class="menu"> <div class="item"> <div class="title" onclick="show(this)">菜单一</div> <div class="con hide"> <div>111</div> <div>111</div> <div>111</div> </div> </div> <div class="item"> <div class="title" onclick="show(this)">菜单二</div> <div class="con hide"> <div>222</div> <div>222</div> <div>222</div> </div> </div> <div class="item"> <div class="title" onclick="show(this)"> 菜单三 </div> <div class="con hide"> <div>333</div> <div>333</div> <div>333</div> </div> </div> </div> <div class="content"></div> </div> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> function show(self){ $(self).next().removeClass("hide"); $(self).parent().siblings().children(".con").addClass("hide"); } </script> </body> </html>
呈现的效果：
jq属性操作之html、text、val：
部分代码为：
console.log($("div").hasClass("div1"))
得到的结果：
部分代码为：
console.log($("div").attr("con", "c2"))
得到的结果：
部分代码如下：
console.log($(":checkbox:first").attr("checked")) console.log($(":checkbox:last").attr("checked")
所得到的效果图：
解决办法如下：利用prop方法，用法与attr类似.用于判断多选勾选的布尔值，true or false
console.log($(":checkbox:first").prop("checked")) console.log($(":checkbox:last").prop("checked"))
效果如下：
所有的代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="div1" con="c1"></div> <input type="checkbox" checked="checked">是否可见 <input type="checkbox">是否可见 <input type="text" value="123"> <div value="456"></div> <div id="id1"> uuuu <p>ppppp</p> </div> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> //关于属性操作 //取到布尔值：console.log($("div").hasClass("div1")) //取到属性值：console.log($("div").attr("con")) //设置默认值： console.log($("div").attr("con", "c2")) //prop找固有的属性。判断是否勾选了，得到布尔值 //console.log($(":checkbox:first").prop("checked")) //console.log($(":checkbox:last").prop("checked")) //prop用来找到固有的属性,attr用来处理自己定义的属性 //取不到值console.log($("div").prop("con")) //取到值console.log($("div").prop("class")) //HTML代码/文本/值 // 取所有标签内容，包括标签 console.log($("#id1").html()); //取文本内容 console.log($("#id1").text()); //console.log($("#id1").html("<h1>YUAN</h1>")) //替换文本内容 console.log($("#id1").text("<h1>YUAN</h1>")) // val只能针对固有属性是val的，不能是自定义的；比如input标签等 //console.log($(":text").val()); // 打印不出来，因为在div中，val不是固有的属性：console.log($(":text").next()) //$(":text").val("789"); //找到标签，CSS以键值对的方式：单个键值对：$("div").css("color","red") //找到标签，CSS以键值对的方式：多个键值对以字典的形式：$("div").css({"color":"red", "background-color": "green"}) //或者：$("div").css("color","red").css("background-color", "green") </script> </body> </html>
jq循环方法和attr,prop方法：
知识点：
jquery的遍历：两种方法分别为：
$.each
$("element").each
js的循环部分代码如下：
arr = [11, 22, 33]
// 通过js的循环,jquery的对象来遍历数组.
for (var i = 0; i < arr.length; i++) {
$("p").eq(i).html(arr[i])
效果如下，p标签被改为数组的值：
部分代码如下：方式一
arr = [11, 22, 33]
$.each(arr, function (x, y) {
console.log(x);
console.log(y);
})
效果如下，可以取到x与y的值，分别为下标和数组的值。
部分代码如下：方法二：（最常用）
$("p").each(function (){ console.log($(this)) $(this).html("hello") })
效果如下：
全部代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>1111</p> <p>2222</p> <p>3333</p> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> //jquery循环的两种方式 arr = [11, 22, 33] // 通过js的循环,jquery的对象来遍历数组. // for (var i = 0; i < arr.length; i++) { // $("p").eq(i).html(arr[i]) // } // 方式一，通过jquery的循环来遍历数组对象. // $.each(arr, function (x, y) { // console.log(x); // console.log(y); // // }) // 方式二：遍历标签，DOM结构下经常会去找标签集合，自动遍历标签 // $("p").each(function (){ // console.log($(this)); // $(this).html("hello") // }) </script> </body> </html>
实例之正反选
全部代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button onclick="selectall();">全选</button> <button onclick="cancel();">取消</button> <button onclick="reverse();">反选</button> <hr> <table border="1"> <tr> <td><input type="checkbox"></td> <td>111</td> </tr> <tr> <td><input type="checkbox"></td> <td>222</td> </tr> <tr> <td><input type="checkbox"></td> <td>333</td> </tr> <tr> <td><input type="checkbox"></td> <td>444</td> </tr> </table> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> function selectall(){ $(":checkbox").each(function (){ $(this).prop("checked",true) }) } function cancel(){ $(":checkbox").each(function (){ $(this).prop("checked",false) }) } function reverse(){ $(":checkbox").each(function (){ if( $(this).prop("checked")){ $(this).prop("checked",false) } else { $(this).prop("checked",true) } }) } </script> </body> </html>
jquery模态对话框和clone的应用
目标：使隐藏的显示出来。
模态对话框全部代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .back{ background-color: rebeccapurple; height: 2000px; } .shade{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: red; opacity:0.4; } .hide{ display: none; } .models{ position: fixed; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; height: 200px; width: 200px; background-color: gold; } </style> </head> <body> <div class="back"> <input id="ID1" type="button" value="click" onclick="action1(this)"> </div> <div class="shade hide"></div> <div class="models hide"> <input id="ID2" type="button" value="cancel" onclick="action2(this)"> </div> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> function action1(self){ $(self).parent().siblings().removeClass("hide"); } // function action2(self){ // $(self).parent().parent().children(".models,.shade").addClass("hide"); // } //或者 function action2(self){ // $(self).parent().addClass("hide") // $(self).parent().prev().addClass("hide"); // } // 又或者链式操作(最优解)：function action2(self) { // $(self).parent().addClass("hide").prev().addClass("hide"); // } </script> </body> </html>
4.2 文档处理
jquery_docu.html中：
部分代码截图：弹出警告框
代码：
$("button").click(function () { $(".c1").append("<h1>HEELLO YUAN</h1>") })
截图：
$("button").click(function () { // 创建标签赋值给变量：var $ele=$("<h1></h1>"); })
全部代码如下：
$("button").click(function () {
//创建标签赋值给变量:var $ele=$("<h1></h1>");
//加入文本:$ele.html("HELLO WORLD");
//添加属性:$ele.css("color","red");
//内部插入：$(".c1").append($ele);
})
效果如下：
全部代码如下：
$("button").click(function () { // $(".c1").append("<h1>HEELLO YUAN</h1>") var $ele=$("<h1></h1>"); $ele.html("HELLO WORLD"); $ele.css("color","red"); //内部插入(按次序放后边） // $(".c1").append($ele); //效果一样：$ele.appendTo(".c1") //内部插入(放内容最前面） // $(".c1").prepend($ele); //效果一样： $ele.prependTo(".c1")
})
部分代码：
$(".c1").after($ele)
删除：
$(".c1").empty()
清空：
$(".c1").remove()
复制：
var $ele2=$(".c1").clone(); $(".c1").after($ele2)
效果是不停的找之前复制的进行迭代，使得其成倍的增加，所以不行。
全部代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="c1"> <p>PPP</p> </div> <button>add</button> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> // $("button").click(function () { // alert(1243) //弹出警告框 // }) $("button").click(function () { // $(".c1").append("<h1>HEELLO YUAN</h1>") var $ele=$("<h1></h1>"); $ele.html("HELLO WORLD"); $ele.css("color","red"); //内部插入(按次序放后边） // $(".c1").append($ele); //效果一样：$ele.appendTo(".c1") //内部插入(放内容最前面） // $(".c1").prepend($ele); //效果一样： $ele.prependTo(".c1") // //外部插入 // 在同级后面$(".c1").after($ele) //效果一样：$ele.insertAfter(".c1") // 在同级前面:$(".c1").before($ele) //效果一样：$ele.insertBefore(".c1") // //替换 // $("p").replaceWith($ele) // //删除与清空(区别在于有没有留最外层的盒子） // $(".c1").empty() // $(".c1").remove() // clone(复制） var $ele2=$(".c1").clone(); $(".c1").after($ele2) }) </script> </body> </html>
进行修改在文件jquery_exe.html中：
全部代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="outer"> <div class="item"> <button onclick="add(this)">+</button> <input type="text"> </div> </div> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> function add(self){ // var $clone_obj=$(".item").clone(); //克隆item标签 var $clone_obj=$(self).parent().clone(); //修改标签里的内容 $clone_obj.children("button").html("-").attr("onclick","remove_obj(this)"); $(".outer").append($clone_obj) } function remove_obj(self){ $(self).parent().remove() } </script> </body> </html>
css操作之位置：
console.log($(".div1").offset().top); console.log($(".div1").offset().left);
得到的值为：0，0
console.log($(".div2").offset().top); console.log($(".div2").offset().left);
得到的值为：200，0
部分代码如下：
console.log($(".div1").position().top); console.log($(".div1").position().left); console.log($(".div2").position().top); console.log($(".div2").position().left);
注释:
效果如下：
偏移量变为200， 0了。
在jquery_offset.html中：全部代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0px; padding: 0px; } .div1,.div2{ width: 200px; height: 100px; } .div1{ border: 5px solid rebeccapurple; padding: 20px; margin:2px ; background-color: antiquewhite; } .div2{ background-color: rebeccapurple; } /*.outer{*/ /* position: relative;*/ /*}*/ </style> </head> <body> <div class="div1"></div> <div class="outer"> <div class="div2"></div> </div> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> //offset()指标签距离视口(相当于body)的偏移量，只有两个属性，top和left. // console.log($(".div1").offset().top); // console.log($(".div1").offset().left); // console.log($(".div2").offset().top); // console.log($(".div2").offset().left); //position()：相对于已经定位的父标签的偏移量，也只有两个属性，top和left. // console.log($(".div1").position().top); // console.log($(".div1").position().left); // console.log($(".div2").position().top); // console.log($(".div2").position().left); // console.log($(".div1").height()); // console.log($(".div2").height()); //文本内容的高度：console.log($(".div1").height()); //加padding后的高度：console.log($(".div1").innerHeight()); //加border的高度：console.log($(".div1").outerHeight()); //加margin的高度：console.log($(".div1").outerHeight(true)); // 改变文本内容的高度：console.log($(".div1").height("300px")); </script> </body> </html>
滚动滑轮的功能：
1、对整个窗口绑定监听事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0px; padding: 0px; } .div1,.div2{ width: 100%; height: 800px; } .div1{ background-color: antiquewhite; } .div2{ background-color: rebeccapurple; } .returnTop{ position: fixed; right: 20px; bottom: 20px; width: 90px; height: 50px; background-color: gray; color: white; text-align: center; line-height: 50px; } .hide{ display: none ; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> <div class="returnTop hide" onclick="returnTop()">返回顶部 </div> </div> </body> </html> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> //绑定滚动事件,滑轮的变动触发事件，窗口监听滚动事件,scrollTop时刻获取滑轮位置信息,什么都不加默认是最顶端的距离,可以赋值 window.onscroll =function (){ //console.log($(window).scrollTop()); if ($(window).scrollTop()>300){ $(".returnTop").removeClass("hide") } else { $(".returnTop").addClass("hide") } } function returnTop(){ $(window).scrollTop(0) } </script>
对一个模块div1绑定监听事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0px; padding: 0px; } .div2{ width: 100%; height: 800px; } .div1{ width: 40%; height: 150px; background-color: antiquewhite; overflow: auto; } .div2{ background-color: rebeccapurple; } .returnTop{ position: fixed; right: 20px; bottom: 20px; width: 90px; height: 50px; background-color: gray; color: white; text-align: center; line-height: 50px; } .hide{ display: none ; } </style> </head> <body> <div class="div1"> <h1>1111</h1> <h1>1111</h1> <h1>1111</h1> <h1>1111</h1> <h1>1111</h1> <h1>1111</h1> </div> <div class="div2"> <button onclick="returnTop()">return</button> </div> <div class="returnTop hide" onclick="returnTop()">返回顶部 </div> </div> </body> </html> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> //绑定滚动事件,滑轮的变动触发事件，窗口监听滚动事件,scrollTop时刻获取滑轮位置信息,什么都不加默认是最顶端的距离,可以赋值 window.onscroll =function (){ //console.log($(window).scrollTop()); if ($(window).scrollTop()>30){ $(".returnTop").removeClass("hide") } else { $(".returnTop").addClass("hide") } } function returnTop(){ // //$(window).scrollTop(0) $(".div1").scrollTop(0) }
用jquery绑定事件的写法：
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> //绑定滚动事件,滑轮的变动触发事件，窗口监听滚动事件,scrollTop时刻获取滑轮位置信息,什么都不加默认是最顶端的距离,可以赋值 window.onscroll =function (){ //console.log($(window).scrollTop()); if ($(window).scrollTop()>30){ $(".returnTop").removeClass("hide") } else { $(".returnTop").addClass("hide") } } function returnTop(){ $(window).scrollTop(0) } //用jquery绑定事件 $(".div2 button").click(function () { $(".div1").scrollTop(0) }) </script>
jquery的事件委托：
全部代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li> </ul> <button>add</button> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> $(" ul li").html(5); //事件绑定：在内部进行遍历（简写形式） // $("ul li").click(function (){ // alert(6666) // }) //事件绑定相同形式的写法. // $("ul li").bind("click",function (){ // alert(777) // }); //事件委托 //对原有的Li和新加入的li都进行绑定事件.对ul进行绑定，ul委托li // $('ul').on("click","li",function (){ // alert(999); // }); // // $("button").click(function (){ // // var $ele=$("<li>"); // var len=$("ul li").length; // $ele.html((len+1)*1111); // $("ul").append($ele) // }); // //解除绑定 // $("ul li").unbind("click") //页面载入 </script> </body> </html>
另外一种写法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> //事件准备加载方式一（即等页面都加载完再执行函数. $(document).ready(function (){ $(" ul li").html(5); })
//事件准备加载方式二：
$(function (){
$(" ul li").html(5);
})
</script> </head> <body> <ul> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li> </ul> <button>add</button>
一些注释如下:
六 动画效果
版权声明：本文为费皿啊原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。