| ⑤、可见性过滤选择器 $(document).ready(function(){ //$("div:hidden").show(1000); //$("div:visible").hide(1000); }) ⑥、属性操作 <style> .high{ font-style:italic; font-weight:bold; } </style> <script> //jQuery的属性操作基本上 使用 attr() removeAttr() //通过json格式的参数定义多个属性 $(function(){ //$(".head:last").attr({"class":"high","title":"second"}); //removeAttr()删除属性 $(".high").click(function(){ $(this).removeAttr("class");//删除当前对象身上的某个属性 }) }) </script> </head> <body> <div id="container"> <span class="head">这是行内元素</span> <span class="high">这是第二个行内元素</span> <ul> <li title="orange">橘子</li> <li>苹果</li> <li>梨</li> </ul> </div> 三、增删改查操作 ①、查找元素 <script> $(document).ready(function(){ //查找元素节点,并输出元素内容 alert($(".head").text()); //查找属性节点 //alert($("#container ul li:first").attr("title","apple")); //attr()方法 如果2个参数,表示给属性复制;如果1个参数,表示查询属性节点 alert($("#container ul li:first").attr("title"));//查询title属性的值 $("#container ul li:first").attr("title",'apple');//给title属性重新赋值 }) </script> </head> <body> <div id="container"> <span class="head">这是行内元素</span> <ul> <li title="orange">橘子</li> <li>苹果</li> <li>梨</li> </ul> </div> ②、创建元素节点 <script> $(document).ready(function(){ //创建元素节点$()参数直接写元素名,就表示创建元素 //确定其位置 1.append() 2.appendTo() $("<li>香蕉</li>").appendTo("ul"); //append() 哪个元素追加参数为子元素 $("ul").append("<li>西瓜</li>"); }) </script> </head> <body> <div id="container"> <span class="head">这是行内元素</span> <ul> <li title="orange">橘子</li> <li>苹果</li> <li>梨</li> </ul> </div> </body> ③、删除元素节点 <script> //删除元素节点 remove() empty() $(function(){ //remove()从元素集合中移除某个元素 $("#container ul li").remove();//删除所有元素 $("#container ul li").remove("ul li");//表示删除ul下面的所有li $("#container ul li").remove("ul li[title=orange]");//通过属性名找到元素 //empty()清空元素的内容,不删除 $("ul li:first").empty(); }) </script> </head> <body> <div id="container"> <span class="head">这是行内元素</span> <ul> <li title="orange">橘子</li> <li>苹果</li> <li>梨</li> </ul> </div> </body> ④、替换节点 //节点替换 replaceWith() replaceAll() $(function(){ //定位到span元素,绑定点击事件 使用谁替换谁 $(".head").click(function(){ //$(this).replaceWith("<h1>明显吗?</h1>");//使用参数替换自己 $("<p>我是段落</p>").replaceAll("span"); //前面的元素替换所有的查找到的参数 }) }) ⑤、//遍历元素节点 children() next() prev() sibs() $(function(){ //获得body下面有多少子节点 var length = $("body").children().length; //alert(length); //next() 当前元素的下一个兄弟 var orange = $("ul li[title=orange]").next(); //alert(orange.html()); //prev() 当前元素的上一个兄弟 var span = $(".high").prev().html(); //alert(span); //siblings() 当前元素的前面的和后面的兄弟姐妹元素 var sibs = $("ul li[title=apple]").siblings(); alert(sibs.length); }) ⑥、样式操作 <script> //样式操作 //通过attr()给某个元素增加一个样式 //通过addClass() 增加样式 //通过toggleClass() 增加样式, $(function(){ $("ul li[title=orange]").click(function(){ //$(this).addClass("high");//方法就是增加class属性,参数就是class属性值 $(this).toggleClass("high");//切换样式,如果有的话，就删除,如果没有就增加
}) $(".high").removeClass();//移除当前元素的class属性 }) ⑦、设置、获得元素内容 $(function(){ //html() == innerHTML //text() == innerText //val() == value alert($("ul li:first").html()); alert($("ul li:first").text()); alert($(":password").val()); }) ⑧、复制节点 //复制节点 clone() 将某个元素复制一份,然后在确定其位置 $(function(){ $("ul li[title=orange]").click(function(){ //$(this).clone().appendTo("ul"); //克隆方法默认情况下,不会复制当前元素的事件,但是我们可以通过传递参数(true)，这样在克隆节点的时候也将元素身上的事件复制 $(this).clone(true).appendTo("ul"); }) }) ⑨、包裹节点 //包裹节点 wrap() wrapAll() //什么是包裹 $(function(){ $("ul li").wrap("<b></b>");//使用参数包裹前面匹配到的每一个元素 //$("ul li").wrapAll("<b></b>");//使用参数把整体包裹起来了 }) 四、jQuery事件 ①、绑定事件bind $(function(){ //绑定事件bind("事件名称","触发的函数") //bind()方法可以给某个元素绑定多个事件 $(".head") .bind("click",function(){ $(".content").hide(3000); }) .bind("click",function(){ $(".content").show(3000); }) }) ②、事件对象属性 //事件对象(鼠标的位置、键盘的按键码) $(function(){ $(".head").bind("mousedown",function(event){ //获得事件对象 event //alert(event.type);//获得事件类型 //通过事件可以获得鼠标的状态、以及键盘按键的状态 //alert(event.pageX); //alert(event.pageY); alert(event.which); //如果是鼠标事件 获得的是 左键、右键还是中间 }) $("body").keydown(function(event){ alert(event.which);//指的是键盘的按键码 }) }) ③、合成事件 $(function(){ //合成事件 hover() toggle() //toggle(参数1,参数2)第一次点击触发第一个函数,第二次点击触发第二个函数 $(".head").toggle(function(){ $(".content").hide(3000); },function(){ $(".content").show(3000); }) //hover() 鼠标移入触发第一个函数,鼠标移除，触发第二个函数 $(".head").hover(function(){ $(".content").hide(3000); },function(){ $(".content").show(3000); }) }) ④、事件模拟操作 <script> //事件模拟操作(可以自定义事件) //触发自定义的事件的时候,会传递参数参数1:event事件对象,参数2..依次传递进来的 $(function(){ $(".head").bind("myClick",function(event,arg2,arg3,arg4){ alert(event.type); alert(arg2+arg3+arg4); }) //手动触发这个事件(参数1,触发的事件名称;参数2,传递进去的参数列表) $(".head").trigger("myClick",["name","age","gender"]); }) </script> ⑤、自定义动画 <script> //自定义动画使用animate()有3个参数 //参数1,修改的样式{} //参数2,动画时间 //参数3,callback，动画结束后执行的函数 $(function(){ $(".head") .animate({width:"+=300px",opacity:"0.5",left:"+=300px"},3000,function( ){ $(this).css("background","red"); }) }) </script> ⑥、动画效果 <script> //jquery的动画效果,通过 hide() show() fadeIn() fadeOut slideUp() slideDown() animate()来实现的 //动画效果，需要保证元素是相对定位 relative //animate()自定义动画 $(function(){ $(".head").toggle(function(){ //$(".content").fadeOut(2000);//淡出 $(".content").slideUp(2000);//向上滑入 },function(){ //$(".content").fadeIn(2000);//淡入 $(".content").slideDown(2000);//向下滑出 }); }) </script> 五、图片提示 <style> li{ list-style:none; float:left; border:1px solid #ccc; margin-right:15px; } #newImg{ font-weight:bold; } </style> <script src="./jquery-1.4.2.min.js"></script> <script> $(function(){ $("li a") .hover(function(event){ //生成一个img $("<div id='newImg'><img src='"+this.href+"'/><br/>"+this.title+"</div>") .appendTo("body") .css({"left":event.pageX+"px",'top':event.pageY+'px','position':'absolute'}); },function(){ //移除这个图像 $("#newImg").remove(); }) .mousemove(function(event){ $("#newImg").css({"left":event.pageX+20+"px",'top':event.pageY+20+'px'}) }) }) </script> </head> <body> <ul> <li><a href="./images/apple_1_bigger.jpg" title="Apple MP3"><img src="./images/apple_1.jpg"/></a></li> <li><a href="./images/apple_2_bigger.jpg" title="Apple iPod"><img src="./images/apple_2.jpg"/></a></li> <li><a href="./images/apple_3_bigger.jpg" title="Apple iPhone"><img src="./images/apple_3.jpg"/></a></li> <li><a href="./images/apple_4_bigger.jpg" title="Apple iMac"><img src="./images/apple_4.jpg"/></a></li> </ul> </body> 六、表单验证 <script> $(function(){ //先找到所有必填的表单,提示 * each方法会循环便利到每一个元素 $(".required").each(function(){ //先创建一个 * var require = $("<strong class='high'>*</strong>"); $(this).parent().append(require); }) //给输入框绑定焦点事件 $("#form :input") .focus(function(){ if(this.value==this.defaultValue){ $(this).val(""); } $(this).addClass("focus"); }) .blur(function(){ $(this).removeClass("focus"); var parent = $(this).parent();//当前对象的父类 //验证用户名 if($(this).is("#username")){ //$("span").remove("span"); $(this).parent().find("span").remove(); if(this.value==''||$(this).val().length<6){ var errmsg = "用户名不能少于6个字符"; //创建提示错误的元素 parent.append($("<span class='error'>"+errmsg+"</span>")); }else{ var okmsg = "输入正确"; parent.append($("<span class='ok'>"+okmsg+"</span>")); } } //验证邮箱 if($(this).is("#email")){ $(this).parent().find("span").remove();//当前对象的父类 if(this.value==''|| !/.+\@.+\..{2,4}/.test(this.value)){//正则的使用 var errmsg = "请输入正确的邮箱"; //创建提示错误的元素 parent.append($("<span class='error'>"+errmsg+"</span>")); }else{ var okmsg = "输入正确"; parent.append($("<span class='ok'>"+okmsg+"</span>")); } } }) //绑定点击事件 $(".sub").click(function(){ //找到所有的必填的输入框 $(".required").trigger("blur");//触发 //想知道有几个错误 var error = $(".error").length; if(error){ //说明错误数大于0 return false; } alert('ok成功'); }) }) </script> </head> <body> <form action="#" method="post" id="form"> <div> 用户名:<input type="text" id="username" value="" class="required"/> </div> <div> 邮箱:<input type="text" id="email" class="required"/> </div> <div> <input type="button" value="提交" class="sub"/> </div> </form> </body> 七、表格选中、筛选内容 <script> $(function(){ $("table tbody tr:even").addClass("even");//添加class属性 $("table tbody tr:odd").addClass("odd"); //给每一行绑定click事件 $("table tbody tr").click(function(){ //判断当前这一行是否被选中(在这里要获得当前这一行的状态) var ischecked = $(this).hasClass("selected");//判断class属性是否存在 //如果有class样式就删除,如果没有增加 //$(this)["removeClass"]("selected")==$(this).removeClass("selected") $(this)[ischecked?"removeClass":"addClass"]("selected")//三目运算符 .find(":checkbox") //查找 .attr("checked",!ischecked) }) //筛选 $("#filter").keyup(function(){ $("table tbody tr") .hide() .filter(":contains('"+this.value+"')")//过滤 .show();//再显示匹配的结果 }) }) </script> </head> <body> 筛选：<input type="text" id="filter"> <table> <thead> <tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thead> <tbody> <tr><td><input type="checkbox" name="choice"/></td><td>张三</td><td>男</td><td>浙江杭州</td></tr> <tr><td><input type="checkbox" name="choice"/></td><td>李四</td><td>男</td><td>北京</td></tr> <tr><td><input type="checkbox" name="choice"/></td><td>王五</td><td>女</td><td>天津</td></tr> <tr><td><input type="checkbox" name="choice"/></td><td>赵六</td><td>男</td><td>保定</td></tr> <tr><td><input type="checkbox" name="choice"/></td><td>张三</td><td>女</td><td>浙江杭州</td></tr> <tr><td><input type="checkbox" name="choice"/></td><td>张三</td><td>男</td><td>浙江杭州</td></tr> </tbody> </table> </body> 八、折叠菜单 <script> $(function(){ $(".parent").click(function(){ //1.点击之后,给当前元素设置样式 $(this) .toggleClass("selected")//切换样式 .siblings(".child_"+this.id) .toggle() }).click();//调用 }) </script> </head> <body> <table> <thead><tr><th>姓名</th><th>性别</th><th>居住地</th></tr></thead> <tbody> <tr class="parent" id="row_1"><td colspan="3">前台设计组</td></tr> <tr class="child_row_1"><td>张三</td><td>男</td><td>湖北武汉</td></tr> <tr class="child_row_1"><td>李四</td><td>女</td><td>湖南长沙</td></tr> <tr class="child_row_1"><td>小王</td><td>女</td><td>湖南长沙</td></tr> <tr class="parent" id="row_2"><td colspan="3">后台开发组</td></tr> <tr class="child_row_2"><td>王五</td><td>男</td><td>湖北武汉</td></tr> <tr class="child_row_2"><td>赵六</td><td>女</td><td>湖南长沙</td></tr> <tr class="parent" id="row_3"><td colspan="3">数据库设计组</td></tr> <tr class="child_row_3"><td>小白</td><td>男</td><td>湖北武汉</td></tr> <tr class="child_row_3"><td>小黑</td><td>女</td><td>湖南长沙</td></tr> </tbody> </table> </body> | 
扫一扫
2634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
