查看: 550|回复: 0

  JQuery 总结笔记


16-4-6 15:19:12 | [复制链接]

20

主题

197

帖子

454

积分

牛人

Rank: 3Rank: 3

发表于 16-4-6 15:19:12 | 显示全部楼层 |阅读模式
  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开始

  $("trdd") //选取索引是奇数的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 linly-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("


       "); //接点替换

  $("p").wrap(""); //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("hello"); //在div中的元素最后加

  $("div").prepend("hello"); //把后面的加到div中元素最前面去

  $("div").after("hello"); //在div后面加入,兄弟节点 还可以实现节点的移动

  $("div").before("hello"); //在div前面加入,兄弟节点

  var tempdiv = $("#div").remove() //删除选中的元素,返回值为被删除的节点对象 (在移动选择项中常被用,从左移到右)

  $("ul li").remove("li[title != 2]"); //将后面条件的元素删除

  $("ul li:eq(1)").empty() //清空,元素本身还在

  $(this).clone() //复制自己

  $(this).clone(true) //复制自己并有以前对象一切方法与属性

  $("#div1").replaceWith("aaa"); //替换元素

  $("#div1").replaceAll("#div2");

  $("p").wrap("") //将p用a包裹起来

  $("p").wrapInner("") //p还是在最外层,但p的内容放到a中

  5、$.each() 方法与 $.map() 方法

  a、//$.map方法对数组中每个元素进行处理,有返回值
  
  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() //开始隐藏,然后从下往下展开



您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

订阅|小黑屋|手机版|千锋教育论坛 ( 京ICP备12003911号-3

GMT+8, 19-11-14 11:46 , Processed in 0.320101 second(s), 38 queries .

Powered by Discuz! X3.2

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表