元素寻找
选择器(selector)
1、基本选择器
$("*") // 选取所有元素 $("element") // 选取标签名称的所有元素 $("#id") // 选取id 属性指定的元素 $(".class") // 选取指定的 class 查找元素 $(".calss,p,div") // 选取多样
2、层级选择器
$(".outer div") // 后代选择器查找 $(".outer>div") // 子代选择器查找 $(".outer+div") // 通过毗邻查找,用的少。。只能往下找 $(".outer~div") // 自下找,不限制紧挨
3、属性选择器
$('[id="div1"]') $('["alex="sb"][id]') // 可双层属性选择
筛选器
1、基本筛选器
$('li:first') //第一个元素 $('li:last') //最后一个元素 $("tr:even") //索引为偶数的元素,从 0 开始 $("tr:odd") //索引为奇数的元素,从 0 开始 $("tr:eq(1)") //给定索引值的元素 $("tr:gt(0)") //大于给定索引值的元素 $("tr:lt(2)") //小于给定索引值的元素 $(":focus") //当前获取焦点的元素 $(":animated") //正在执行动画效果的元素
2、表单筛选器
$(":input") // 匹配所有 input, textarea, select 和 button 元素 $(":text") // 所有的单行文本框 $(":password") // 所有密码框 $(":radio") // 所有单选按钮 $(":checkbox") // 所有复选框 $(":submit") // 所有提交按钮 $(":reset") // 所有重置按钮 $(":button") // 所有button按钮 $(":file") // 所有文件域 $("input:checked") // 所有选中的元素 $("select option:selected") // select中所有选中的option元素
3、内容筛选器
$("div:contains('test')") // 包含test文本的元素 $("td:empty") // 不包含子元素或者文本的空元素 $("div:has(p)") // 含有选择器所匹配的元素 $("td:parent") // 含有子元素或者文本的元素
4、查找筛选器
$("div").children() // 查找div下的所有儿子标签 $("div").find() // 查找div下的所有后代标签 $("p").next() // 紧邻p元素后的下一个同辈元素 $("p").nextAll() // p元素之后所有的同辈元素 $("#test").nextUntil("#test2") // id为"#test"元素之后到id为'#test2'之间所有的同辈元素(开区间) $("p").prev() // 紧邻p元素前的一个同辈元素 $("p").prevAll() // p元素之前所有的同辈元素 $("#test").prevUntil("#test2") // id为"#test"元素之前到id为'#test2'之间所有的同辈元素(开区间) $("p").parent() // 每个p元素的父元素 $("p").parents() // 每个p元素的所有祖先元素,body,html $("#test").parentsUntil("#test2")// id为"#test"元素到id为'#test2'之间所有的父级元素(开区间) $("div").siblings() // 所有的同辈元素,不包括自己 $("p").hasClass("test") // 查找p标签有class名字为test
更多选择器玩转
$("[href]") // 选取带有 href 属性的元素 $("a[target='_blank']") // 选取所有 target 属性值等于 "_blank" 的 <a> 元素 $("a[target!='_blank']") // 选取所有 target 属性值不等于 "_blank" 的 <a> 元素
属性操作
1、基本属性操作
$("img").attr("src"); // 返回文档中所有图像的src属性值 $("img").attr("src","test.jpg"); // 设置所有图像的src属性 $("img").removeAttr("src"); // 将文档中图像的src属性删除 $("input[type='checkbox']").prop("checked", true); // 选中复选框 $("input[type='checkbox']").prop("checked", false); // 取消复选框 $("img").removeProp("src"); // 删除img的src属性 // attr与prop区别 // attr可以找到自定义的属性、prop只能找到固有的属性
2、CSS类操作
$("p").addClass("test"); // 为p元素加上 'test' 类 $("p").removeClass("test"); // 从p元素中删除 'test' 类 $("p").toggleClass("test"); // 如果存在就删除,否则就添加
3、HMTL文本内容/值
$('p').html(); // 返回p元素的html内容 $("p").html("Hello <b>test</b>!"); // 设置p元素的html内容 $('p').text(); // 返回p元素的文本内容 $("p").text("test"); // 设置p元素的文本内容 $("input").val(); // 获取文本框中的值 $("input").val("test"); // 设置文本框中的内容
CSS操作
1、样式
$("p").css("color"); // 访问查看p元素的color属性 $("p").css("color","red"); // 设置p元素的color属性为red $("p").css({ "color": "red", "background": "yellow" }); // 设置p元素的color为red,background属性为yellow(设置多个属性要用{}字典形式)
2、位置
$('p').offset() // 元素在当前视口的相对偏移,Object {top: 122, left: 260} $('p').offset().top $('p').offset().left $("p").position() // 元素相对父元素的偏移,对可见元素有效,Object {top: 117, left: 250} $(window).scrollTop() // 获取滚轮滑的高度 $(window).scrollLeft() // 获取滚轮滑的宽度 $(window).scrollTop('100') // 设置滚轮滑的高度为100
3、尺寸
$("p").height(); // 获取p元素的高度 $("p").width(); // 获取p元素的宽度 $("p:first").innerHeight() // 获取第一个匹配元素内部区域高度(包括补白、不包括边框) $("p:first").innerWidth() // 获取第一个匹配元素内部区域宽度(包括补白、不包括边框) $("p:first").outerHeight() // 匹配元素外部高度(默认包括补白和边框) $("p:first").outerWidth() // 匹配元素外部宽度(默认包括补白和边框) $("p:first").outerHeight(true)// 为true时包括边距
文档处理(标签的操作)
1、内部插入
$("p").append("<b>nick</b>"); // 每个p元素内后面追加内容 $("p").appendTo("div"); // p元素追加到div内后 $("p").prepend("<b>Hello</b>"); // 每个p元素内前面追加内容 $("p").prependTo("div"); // p元素追加到div内前
2、外部插入
$("p").after("<b>nick</b>"); // 每个p元素同级之后插入内容 $("p").before("<b>nick</b>"); // 在每个p元素同级之前插入内容 $("p").insertAfter("#test"); // 所有p元素插入到id为test元素的后面 $("p").insertBefore("#test"); // 所有p元素插入到id为test元素的前面
3、替换
$("p").replaceWith("<b>Paragraph.</b>"); // 将所有匹配的元素替换成指定的HTML或DOM元素 $("<b>Paragraph.</b>").replaceAll("p"); // 用匹配的元素替换掉所有selector匹配到的元素
4、删除
$("p").empty(); // 删除匹配的元素集合中所有的子节点,不包括本身 $("p").remove([expr]); // 删除所有匹配的元素,包括本身 $("p").detach(); // 删除所有匹配的元素(和remove()不同的是:所有绑定的事件、附加的数据会保留下来)
5、复制
$("p").clone() // 克隆元素并选中克隆的副本 $("p").clone(true) // 布尔值指事件处理函数是否会被复制
循环
jQuery实现的数组循环机制
// 方式一 $.each(Array,function () { }) // 方式二 $(element).each(function () { })
事件
1、事件
$("p").click(); // 单击事件 $("p").dblclick(); // 双击事件 $("input[type=text]").focus() // 元素获得焦点时,触发 focus 事件 $("input[type=text]").blur() // 元素失去焦点时,触发 blur事件 $("button").mousedown() // 当按下鼠标时触发事件 $("button").mouseup() // 元素上放松鼠标按钮时触发事件 $("p").mousemove() // 当鼠标指针在指定的元素中移动时触发事件 $("p").mouseover() // 当鼠标指针位于元素上方时触发事件 $("p").mouseout() // 当鼠标指针从元素上移开时触发事件 $(window).keydown() // 当键盘或按钮被按下时触发事件 $(window).keypress() // 当键盘或按钮被按下时触发事件,每输入一个字符都触发一次 $("input").keyup() // 当按钮被松开时触发事件 $(window).scroll() // 当用户滚动时触发事件 $(window).resize() // 当调整浏览器窗口的大小时触发事件 $("input[type='text']").change()// 当元素的值发生改变时触发事件 $("input").select() // 当input 元素中的文本被选择时触发事件 $("form").submit() // 当提交表单时触发事件 $(window).unload() // 用户离开页面时
2、绑定方式
$(标签).事件(函数内容)
$(标签).bind("事件",函数名)
3、页面载入
// bind 为每个匹配元素绑定事件处理函数,绑定多个用{}。 $("p").bind("click", function(){ alert( $(this).text() ); }); $(menuF).bind({ "mouseover":function () {$(menuS).parent().removeClass("hide");}, "mouseout":function () {$(menuS).parent().addClass("hide");} }); $("p").one("click", fun...) // one 绑定一个一次性的事件处理函数 $("p").unbind("click") // 解绑一个事件
5、页面委派
...
6、事件委托
$('ul').on("click","li",function () { alert(999); }); // 阐释...
7、event object
// 所有的事件函数都可以传入event参数方便处理事件 $("p").click(function(event){ alert(event.type); //"click" }); (evnet object)属性方法: event.pageX // 事件发生时,鼠标距离网页左上角的水平距离 event.pageY // 事件发生时,鼠标距离网页左上角的垂直距离 event.type // 事件的类型 event.which // 按下了哪一个键 event.data // 在事件对象上绑定数据,然后传入事件处理函数 event.target // 事件针对的网页元素 event.preventDefault() // 阻止事件的默认行为(比如点击链接,会自动打开新页面) event.stopPropagation()// 停止事件向上层元素冒泡
动画效果
1、基点
$("p").show() // 显示隐藏的匹配元素 $("p").show("slow"); // 参数表示速度,("slow","normal","fast"),也可设置为毫秒 $("p").hide() // 隐藏显示的元素 $("p").toggle(); // 切换 显示/隐藏
2、滑动
$("p").slideDown("1000"); // 用1000毫秒时间将段落滑下 $("p").slideUp("1000"); // 用1000毫秒时间将段落滑上 $("p").slideToggle("1000"); // 用1000毫秒时间将段落滑上,滑下
3、淡入淡出
$("p").fadeIn("900"); // 用900毫秒时间将段落淡入 $("p").fadeOut("900"); // 用900毫秒时间将段落淡出 $("p").fadeToggle("900"); // 用900毫秒时间将段落淡入,淡出 $("p").fadeTo("slow", 0.6); // 用900毫秒时间将段落的透明度调整到0.6
4、回调函数
// 回调函数指什么 一个动作完成之后执行的一段代码 // DEMO <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-2.2.3.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(1000,function(){ alert('动画结束') }) // $("p").css('color','red').slideUp(1000).slideDown(2000) }) }); </script> </head> <body> <button>隐藏</button> <p>helloworld helloworld helloworld</p> </body> </html>
扩展(插件机制)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a{ color: #65ff9b; } </style> </head> <body> <div>Hello World</div> <input type="checkbox"> <input type="radio" checked> <script src="jquery-3.1.1.js"></script> <script> // 方式一 $.extend({ Myprint:function (content) { console.log(content) } }); $.Myprint(666); // 方式2 $.fn.extend({ check:function () {return this.each(function () {this.checked=true})}, uncheck:function () {return this.each(function () {this.checked=false})} }); $(":checkbox").check(); $(":radio").uncheck() </script> </body> </html>
对象访问
$.trim() // 去除字符串两端的空格 $.each() // 遍历一个数组或对象,for循环 $.inArray() // 返回一个值在数组中的索引位置,不存在返回-1 $.grep() // 返回数组中符合某种标准的元素 $.extend() // 将多个对象,合并到第一个对象 $.makeArray() // 将对象转化为数组 $.type() // 判断对象的类别(函数对象、日期对象、数组对象、正则对象等等 $.isArray() // 判断某个参数是否为数组 $.isEmptyObject() // 判断某个对象是否为空(不含有任何属性) $.isFunction() // 判断某个参数是否为函数 $.isPlainObject() // 判断某个参数是否为用"{}"或"new Object"建立的对象 $.support() // 判断浏览器是否支持某个特性
jQuery拾遗
hover()方法
// 语法 $(selector).hover(inFunction,outFunction) // 等同于 $( selector ).mouseover( handlerIn ).mouseout( handlerOut ); 参数 描述 inFunction 必需。规定 mouseover 事件发生时运行的函数。 outFunction 可选。规定 mouseout 事件发生时运行的函数。 // DEMO $("p").hover(function(){ $("p").css("background-color","yellow"); },function(){ $("p").css("background-color","pink"); });
实例
返回顶部
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 12 .HA,.HE{ 13 height: 900px; 14 } 15 .HA{ 16 background-color: #8aab30; 17 } 18 .HE{ 19 background-color: #99aecb; 20 } 21 .go_top{ 22 display: inline-block; 23 position: fixed; 24 right: 30px; 25 bottom: 50px; 26 39px; 27 height: 39px; 28 background: url("go_top.png") 0 78px; 29 } 30 31 .go_top:hover{ 32 background: url("go_top.png") 0 39px; 33 } 34 .hide{ 35 display: none; 36 } 37 38 </style> 39 40 </head> 41 <body> 42 <div class="HA"></div> 43 <div class="HE"></div> 44 <a class="go_top hide" title="返回顶部"></a> 45 46 <script src="jquery-3.1.1.js"></script> 47 <script> 48 window.onscroll = function () { 49 var xyz = $(window).scrollTop(); 50 console.log(xyz); 51 if (xyz>100){ 52 $(".go_top").removeClass("hide"); 53 }else { 54 $(".go_top").addClass("hide"); 55 } 56 }; 57 58 $(".go_top").click(function () { 59 $('body,html').animate({scrollTop:0},1000); 60 }) 61 62 </script> 63 </body> 64 </html>
轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .square:hover{ background-color: black; opacity: 0.7; } #play_img{ height: 340px; 790px; position: absolute; left: 280px; top: 100px; } li{ display: inline-block; list-style: none; } .hide{ display: none; } /*圆形按钮渲染*/ .round_click{ 180px; height: 20px; position: absolute; border-radius: 12px; bottom: 20px; left: 300px; background-color: hsla(0,0%,100%,.3); } .round_click span{ display: inline-block; 12px; height: 12px; border-radius: 12px; margin-right: 2px; margin-left: 2px; background-color: white; } .round_click .round_item{ margin-left: 10px; } .round_click .round_item_a{ background-color: red; } /*方形框按钮渲染*/ .square{ 30px; height: 60px; position: absolute; bottom: 140px; background-color: rgba(0,0,0,.1); } .click_right{ right: 0; } </style> </head> <body> <div id="play_img"> <ul> <li class=""><img src="photo/1.png" alt=""></li> <li class="hide"><img src="photo/2.jpg" alt=""></li> <li class="hide"><img src="photo/3.jpg" alt=""></li> <li class="hide"><img src="photo/4.jpg" alt=""></li> <li class="hide"><img src="photo/5.jpg" alt=""></li> <li class="hide"><img src="photo/6.jpg" alt=""></li> <li class="hide"><img src="photo/7.jpg" alt=""></li> <li class="hide"><img src="photo/8.jpg" alt=""></li> </ul> <div class="round_click"> <span class="round_item round_item_a"></span> <span class=""></span> <span class=""></span> <span class=""></span> <span class=""></span> <span class=""></span> <span class=""></span> <span class=""></span> </div> <div class="square click_left"></div> <div class="square click_right"></div> </div> <script src="jquery-3.1.1.js"></script> <script> var $photos = $("ul li"); // 获取图片数组 var $button = $(".round_click span"); // 获取按钮数组 var i = 0; // 定义变量 // 右击框事件 $(".click_right").bind("click",carousel); // 左击框事件 $(".click_left").bind("click",leftMove); // 鼠标悬浮于圆形按钮上方事件 $button.bind("mouseover",mouseHover); // 自动轮播 var s = setInterval(carousel,1000); // 右击框 function carousel() { i++; if (i==$photos.length){ i = 0; $photos.eq(i).removeClass("hide"); } $photos.eq(i-1).addClass("hide").next().removeClass("hide"); $button.eq(i).addClass("round_item_a").siblings().removeClass("round_item_a") } // 左击框 function leftMove() { // 若按钮触发的图片定位,使用if判断进行操作标签 if (i>0){ $photos.eq(i).addClass("hide").prev().removeClass("hide"); $button.eq(i-1).addClass("round_item_a").siblings().removeClass("round_item_a"); i--; }else { i = 7; $photos.addClass("hide"); $photos.eq(i).removeClass("hide"); $button.eq(0).removeClass("round_item_a"); $button.eq(i).addClass("round_item_a"); } } // 圆按钮点击事件 /*$button.click(function () { var $index = $(this).index(); i = $index; $photos.eq($index).removeClass("hide").siblings().addClass("hide"); $button.eq($index).addClass("round_item_a").siblings().removeClass("round_item_a") });*/ // 鼠标位于元素圆按钮上方触发 function mouseHover() { var $index = $(this).index(); i = $index; $photos.eq($index).removeClass("hide").siblings().addClass("hide"); $button.eq($index).addClass("round_item_a").siblings().removeClass("round_item_a"); } // 鼠标悬浮和鼠标离开 $("#play_img").hover(function () { clearInterval(s); s = undefined; },function () { s = setInterval(carousel,1000); }) </script> </body> </html>
面板拖动
// offset() 方法设置或返回被选元素相对于文档的偏移坐标。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div style="border: 1px solid #ddd; 600px;position: absolute;"> <div id="title" style="background-color: black;height: 40px;color: white;"> <strong style="padding-left: 300px;;line-height: 40px">标题</strong> </div> <div style="height: 300px;"> 内容...... </div> </div> <script type="text/javascript" src="jquery-3.1.1.js"></script> <script> $(function () { $('#title').mouseover(function () { $(this).css('cursor','move'); }).mousedown(function (e) { var _event = e || widows.event; var old_x = _event.clientX; var old_y = _event.clientY; var parent_left = $(this).parent().offset().left; var parent_top = $(this).parent().offset().top; $(this).bind('mousemove',function (e) { var _new_event = e || window.event; var new_x = _new_event.clientX; var new_y = _new_event.clientY; var x = parent_left + (new_x - old_x); var y = parent_top + (new_y - old_y); $(this).parent().css('left',x+'px'); $(this).parent().css('top',y+'px'); }) }).mouseup(function () { $(this).unbind('mousemove'); }); }) </script> </body> </html> 拖动面板 面板拖动
clone实例之输入框增减
<head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="HE"> <div class="HA"> <button onclick="add(this)">+</button> <input type="text"> </div> </div> <script src="jquery-3.1.1.js"></script> <script> // 添加文本框 function add(self) { var $add_ele = $(self).parent().clone(); // 修改子文本框html内容 var $remove_ele = $add_ele.children("button").html("-"); // attr() 方法设置或返回被选元素的属性和值。 $remove_ele.attr("onclick","remove_self(this)"); $(".HE").append($add_ele) } // 删除文本框 function remove_self(self) { $(self).parent().remove(); } </script> </body> </html>
查询
$("div").children() // 查找div下的所有儿子标签 $("div").find() // 查找div下的所有后代标签 $("p").next() // 紧邻p元素后的下一个同辈元素 $("p").nextAll() // p元素之后所有的同辈元素 $("#test").nextUntil("#test2") // id为"#test"元素之后到id为'#test2'之间所有的同辈元素(开区间) $("p").prev() // 紧邻p元素前的一个同辈元素 $("p").prevAll() // p元素之前所有的同辈元素 $("#test").prevUntil("#test2") // id为"#test"元素之前到id为'#test2'之间所有的同辈元素(开区间) $("p").parent() // 每个p元素的父元素 $("p").parents() // 每个p元素的所有祖先元素,body,html $("#test").parentsUntil("#test2")// id为"#test"元素到id为'#test2'之间所有的父级元素(开区间) $("div").siblings() // 所有的同辈元素,不包括自己 $("p").hasClass("test") // 查找p标签有class名字为test
bootstrap 模态框点背景不退出
$('#follow_up_front').modal({backdrop:"static", keyboard: false, show: true});
$("#follow_up_front").modal('show')
$.ajax({ url:"/manage/role_change/", type:"POST", data:{ 'csrfmiddlewaretoken': '{{ csrf_token }}', 'enrolled_degree_course_id': $("#enrolled_degree_course_id").val(), 'follower_role': $("#follower_role").val(), 'follower_id': $("#follower_id").val(), 'followup_tool': $("#followup_tool").val(), 'record': $("#record").val(), 'has_feedback': $("#has_feedback").prop("checked") }, success:function (arg) { if (arg == 1){ //console.log(arg) window.location.reload() } } })