JQuery 使用手册摘录
//筛选出name以 “$chkIsLock” 结尾的 checkbox 控件,返回值类型:数组 $("input[type='checkbox'][name$='$chkIsLock']"); 1、//将一个JQuery对向转化为DOM对象 var a = $("#div1")[0] 或者 var a = $("#div1").get(0) 2、//Jquery选择器 $("body *") //取得body下所有的元素 $("div, #abc, p .myclass") //选择所有div,所有span, 所有p 且类名为myclass $(".classname") //查找有css的元素 $("#abc span"); //选择#abc下的所有儿子孙子span元素(多层) $("#abc > span") //选择#abc下的儿子span元素(孙子不管) $("#abc + span") = $("#abc").next("span") //选取#abc下的紧挨着的一个span兄弟元素 $("#abc ~ span") = $("#abc").nextAll("span") //选取#abc后面的所有span兄弟元素(只要是兄弟都可以,前面的不管) $("#abc").).siblings("div") //找到兄弟层的div //下面这些过滤选取器,从后往前读 $("div:first") //选取第一个div元素 $("div:last") //选取最后一个div元素 $("input:not(.myclass)") //选取class不是myclass的input元素 $("tr:even") //选取索引是偶数的tr 从0开始 $("tr:odd") //选取索引是奇数的tr 从0开始 $("tr:eq(1)") //选取索引等于2的元素 $("tr:gt(1)") //选取索引大于1的元素,不包括1 $("tr:lt(1)") //选取索引小于1的元素,不包括1 $("div:contains('我们')") //选取内容含有"我们"的div元素 $("div:has(p)") //选取含有p元素的div元素 $("div:parent") //选取拥有子元素(含文本元素)的div元素 $("div:empty") //和上面对应,选取为空(不含元素及文本)的div $("div:hidden") //选取蕴藏的div $("div:visible") //选取所有可见的div $("div:animated") 选取正在执行动画的div元素 $("div[id]") //选取拥有属性id的元素 $("div[id=div1]") 选取id属性为div1的div $("div[id!=div1]") $("div[title=test]") //选取属性title为"test"的div $("div[title!=test]") //选取属性title不为"test"的div $("div[title^=test]") //选取属性title以"test"开始的div $("div[title$=test]") //选取属性title以"test"结束的div $("div[title*=test]") //选取属性title含有"test"的div $("div[id][title*=test]") //选取拥有属性id 并且属性title含有"test"的div $("input[type=checkbox]") //取得所有的checkbox也可以写成: $(":checkbox"); $("ul li:first-child") //选取每个ul 中第一个li $("ul li:last-child") //选取每个ul 中最后一个li $("ul li:only-child") //选取每个ul 只有一个子元素的li $("form :enabled") //选取form下的所有可用的元素 $("form :disabled") //选取form下的所有不可用的元素 $("input:checked") //选取所有被选中的input元素 $("select:selected") //选取所有被选中的选项元素 $("#div1 li:even", $(this)) //相对选择器,第二个参数传递一个jquery对象,则相对于这个对象为基准进行相对选择 //区别 $("#myform :input") //会获取到所有input textarea select button元素 $("#myform input") //获取到所有的input元素 $(".test :hidden") //选取class为test的元素当中的隐藏子元素(下层) $(".test:hidden") //选取隐藏的class为test的元素(从后往前读) $(":input") //包含input、textarea、select、button $(":text") //选取所有单行文本框. 同理还有:radio :checkbox :submit :image :reset :button :file :hidden 3、属性 e.pageX //鼠标的横坐标 e.pageY e.target //是最原始的元素(冒泡的起始元素),与this不一样 e.altKey //返回是bool值 shiftKey keyCode(小键盘与主键盘的keyCode不一样) charCode(即是ASC码) 4、JQuery 方法 $("input").length $("body").children() $("#abc").css("opacity","0.5"); //将css的透明程度为0.5 $("input").text(); //返回仅是文本 $("input").html(); //返回含html标签文本 $("#div1").show() //元素显示 $("#div1").hide(10000) $("#div1").toggle() //方法隐藏与显示切换 $("#div1").next(); //方法,获得下一个元素 $("#div1").prev(); //前一元素 $("#div1").next("p") //获得下一个p元素 $("#div1").nextAll() //获得所有 $("#div1").siblings("div") //取得所有兄弟 $("br").replaceWith("<hr/>"); //接点替换 $("p").wrap("<font color='red'></font>"); //wrap方法将所选的元素用指定的标签包裹 attr() //方法用来读取或者设置元素属性,对于Jquery没有封装的属性,例如 $("#cmd1").attr("disabled", true); attr("class") //获取样式 attr("class","myclass") //设置样式 attr({"name":"name1", "css":"mycss"}) removeAttr() .addClass("myclass") //追加样式 .removeClass("myclass") //移除样式 .toggleClass("myclass") //判断有无样式,如果有就移除,如果没有就添加 .hasClass("myclass") //判断是否有样式myclass 返回真假 .is(".myclass") //和上面一样是否有class=myclass .is(":visible") //判断是否可见 //根据html代码动态创建元素 $("div").append("<b>hello</b>"); //在div中的元素最后加 $("div").prepend("<b>hello</b>"); //把后面的加到div中元素最前面去 $("div").after("<b>hello</b>"); //在div后面加入,兄弟节点 还可以实现节点的移动 $("div").before("<b>hello</b>"); //在div前面加入,兄弟节点 var tempdiv = $("#div").remove() //删除选中的元素,返回值为被删除的节点对象 (在移动选择项中常被用,从左移到右) $("ul li").remove("li[title != 2]"); //将后面条件的元素删除 $("ul li:eq(1)").empty() //清空,元素本身还在 $(this).clone() //复制自己 $(this).clone(true) //复制自己并有以前对象一切方法与属性 $("#div1").replaceWith("<a href='' >aaa</a>"); //替换元素 $("#div1").replaceAll("#div2"); $("p").wrap("<a href='' ></a>") //将p用a包裹起来 $("p").wrapInner("<a href='' ></a>") //p还是在最外层,但p的内容放到a中 5、$.each() 方法与 $.map() 方法 a、//$.map方法对数组中每个元素进行处理,有返回值 <script type="text/javascript"> var a1 = [1, 3, 5]; var a2 = $.map(a1, function (item) { return item * 2; }); alert(a2); b、//$.each方法对数组中每个元素进行处理,没有返回值,对于var a1 = [1, 3, 5];相当于key=序号,value=数组值 var a3 = { "leo": 20, "juanually": 40, "tom": 50 }; $.each(a3, function (key, value) { alert(key+"的年龄是:"+value); }); </script> c、//使用each方法对元素进行遍历 $("input").click(function () { var arr = new Array(); $("input:checked").each(function (key, value) { arr[key] = $(value).val(); //给数组付值,注意将Dom对象转成Jquery对象 }); $("#p1").text("共选中:"+arr.length+"项 "+arr.join(",")); //数组的join方法将字符串连起来 }); d、//将所有的checkbox反选 $("#div1 input[type=checkbox]").each(function () { $(this).attr("checked", !$(this).attr("checked")); }); 6、Jquery事件 return false 含下面二个 e.stopPropagation(); //终止冒泡事件,e:表示匿名函数增加一个参数,e就是事件对象 e.preventDefault(); //方法用来阻止默认行为。相当于window.event.returnvalue = false; $("input").unbind("click") //取消click事件 ,如不加参数,则取消所有事件 $("#cmd1").one("click",function(){ alter("只执行一次的事件");}) //只执行一次的事件 $("input").trigger("click") //模拟用户click事件 7、动画 $("#dtl").css("opacity", "0.5"); //设定透明度为0.5 $("#div1").toggle(1000); //切换div1隐藏与显示 $("#div1").toggle( 1 == 1 ); //为true是显示, 为假时隐藏 $("#div1").toggle("fast",function(){ alert("Animation Done."); }); $("#dtl").animate({left:"+=200px",height:"400px", opacity:"1"}, 3000, function(){ alert(3);} ); //每次往左200、所需时间、回调函数 .fadeIn(2000) //开始隐藏,利用透明度,最后完全看见 .fadeOut() .slideUp() //从下往上收起来,最后看不见 .slideDown() //开始隐藏,然后从下往下展开