JQuery选择器

动态修改样式

$("#div1").attr("display","block"); //有问题

$("#div1").css("display","block"); 

 

find 寻找子标签

$(this).find(".price").text();

$(this).find("input").val();

 

  jQuery

->*对象 $ #start

        $(function () { }) 窗体加载

 

 //javaScript 的一堆函数库

 jQuery(dom对象) //转换为jQuery对象

 $(dom对象) //转换为jQuery对象

 $(dom对象).ready(方法) //

 

 $(document) // document对象 转换为jQuery对象

    $('body') // body对象 转换为jQuery对象

 

 ready加载元素后触发 比onload效率高

 onload加载元素慢

 $(function() {   }); => $().ready() => $(document) //页面加载后触发；

 

$(function () {

 

$('#btn').click(function () {

 

//获取body中所有的元素

 

$('body *').css('backgroundColor','black');

 

});

 

});

 

 

 ->遍历数组 map/each #middle

 $.map(数组，function(值参数，索引参数){ })

 //可以遍历 也可以返回新的数组

 //return 返回数组值

 $.each(数组，function(key,value){ }); //key键参数，value值参数

 //变量键值对 变量数组是不可以修改值

 //return fase 相当于break

 ->切空格 trim #middle

         $.trim(字符串); //切空格 先左后右

 ->jquery变成dom对象 #middle

 $(dom对象).get(0);

 $(dom对象)[0]; //两种都可以

 ->链式编程

         返回是对象才能链式编程

 ->$().text(''); //相当于innerText;

 ->$().html(''); //相当于innertHTML;

 ->$().val(); //获取 value值

 ->隐式迭代 获取多个元素设值是 内部会全部循环 #end

 

 ->选择器s #start

  ->jQuery直接获取dom对象 #str

  $('#id值') //id获取对象

  $(this).val() // this的value

 ->标签选择器 $('标签名') 

 ->类选择器 $('.类名') // #mid

 ->标签+类选择器 #mid

              $('标签名.类名')

  //获取指定标签的类名为..的标签

  ->多条件选择器 mid

              $('标签名,标签名.类名,id名...') //选中多个

 ->层次选择器 mid

  $('标签名1 标签名2')

          //获取 标签1 内的所有 标签2

          $('标签名1>标签名2')

          //获取 标签1 第一层的 所有标签2

          $('标签名1+标签名2')

  //标签名1的下一个同级元素

  //如果是 标签名2 就返回，不是就没有

  $('标签名1~标签名2')

  //标签名1的后面 的所有同级 标签名2

  $('标签名1~')

  //标签名1的后面 的所有同级 元素

 ->获取同级元素的方法 #mid

  对象.next(); //对象 后的第一个同级元素

  对象.nextAll(); //对象 后的所有同级元素

  对象.nextAll('p'); //对象 后的所有同级 p标签 和'~'一样

   对象.prev(); //对象 前面的第一个同级元素

  对象.prevAll(); //对象 前面的所有同级元素

  对象.siblings(); //当前元素 的所有同级元素(不包含当前元素)

 ->两个参数_相对搜索 #mid

  $('ul','#div')

  //在 #div 元素下搜索ul

 ->$('body *') //body的所有元素 #en

 $().parent()； //获取当前元素的父级元素

 $().children('li') //当前元素的li子元素

  //没有参数就是所有子元素

 $('body *') //body的所有元素

 #end

 ->end() 连接    start

 还原断链之前的元素(对象)

 $(this).prevAll()....end().nextAll()...

 ->判断对象是否存在

 $(对象).length >0 //大于0存在

 ->样式 #middle

 ->$(dom对象).css('样式','值')

          //设置样式

 ->设置多个样式

        css({'ontSize':'20px','backgroundColor':'red'});

 ->添加_类样式

           $(对象).addClass('样式名')

 ->移除_类样式

          $(对象).remove  Class('样式名')

 ->判断 类样式是否存在

          $(对象).hasClass('样式名')

 ->切换 _类样式

          $(对象).toggleClass('样式名')

 ->过滤器     : 号中间空格不能少

 ->索引常用 //索引从0开始 #str

 ->$('p:eq(2)') //索引为2的p标签

 ->$('p:lt(5)') //索引小于5的p标签

 ->$('p:gt(5)') //索引大于5的p标签

 ->:gt(5):lt(3))

      $('#ul2 li:gt(4):lt(2)')

   //先按获得的gt(4) 第5个按0开始算 gt(2)

 ->$('div:first') //获取第一个元素

              $('div').first 也可以

 ->$('div:last')

//获取最后一个元素

              $('div').last

 ->$("input:not(.myClass)")

  //选取样式名不是myClass的<input>  

  $(':not(div)') //标签不是div的元素

 ->$('div:even') //索引为偶数

 ->$('div:odd') //索引为奇数

 ->$(':header') //所有的标题标签(h1,h2,h3,h4,h5,h6)

 ->属性过滤器 #mid

  ->$('input[name]')

           //所有input标签中 有name属性的标签

  ->$('input[name=name1]')

           //所有input标签中 name属性值 为name1的标签

->$('input[name!=name1]')

           //所有input标签中 name属性值 不为name1的标签

  ->$('input[name^=na]')

           //所有input标签中 name属性值以 na开头的标签

  ->$(input[name$=me])

           //所有input标签中 name属性值以 me结尾的标签

  ->$('input[name*=a]')

           //所有input标签中 name属性值 包含a 的标签

 ->复选框选中过滤器 #mid

  ->$('div :disabled') //在层中被禁用的元素

           $('#fm1 :disabled[type=button]')

  ->checked

           $('#fm1 :checked') //fm1中选中的元素

  ->selected

 

  ->$('div:disabled') //获取 被禁用到的层元素

 ->表单选择器 #mid

  ->$(':input')

       s//获得所有input textarea select和button元素

  $(:text) //获得文本框

  $(:checkbox) //获得复选选择框

  :button

  :radio

  :password

  ...

 ->可见性过滤器 #mid

  hidden

   选取所有不可见元素包括:(如果直接写:hidden则会包含head\title\script\style….)

   1.表单元素type=“hidden”(表示的是隐藏域)

   2.设置css的display:none

   3.高度和宽度明确设置为0的元素。

   4.父元素时隐藏的，所以子元素也是隐藏的

   visibility: hidden 与opacity为0不算，因为还占位所以不认为是hidden.(与之前版本jQuery不太一样，1.3.2之前)

   :visible

   选取所有可见元素

   注意：$('.cls :hidden');与$('.cls:hidden');是不一样的。

 ->内容过滤器 #mid

  $('div:contains(帅)')

  //获取层中 含有 帅 的层

  $('div:empty')

  //获取层中 内容为空(空格也没有的) 的层

  $('div:has(input)')

  //获取层中 含有a标签 的层

  $('div:parent') //父元素

  //即该元素有子元素或者元素中包含文本。s

 ->子元素过滤器 #mid

  $('ul li:first-child') //返回多个

  //所有ul 的第一个li元素

  $('ul li:first') //只返回一个

  //页面上第一个ul 的第一个li元素

 

  $('ul li:last-child')

  //所有ul 的最后一个li元素

  $('ul li:last')

  //页面上第一个ul 的最后一个li元素

 

  $('ul li:only-child')

  //所有ul 中只有一个子元素 的ul元素

 

  ->:nth-child,对比eq()来理解，eq()值匹配一个

   ，nth-child()为每个父元素都要匹配一个子元素。

   :nth-child(index),index从0开始。

   :nth-child(even)

   :nth-child(odd)

   :nth-child(3n),选取3的倍数的元素

   :nth-child(3n+1),满足3的倍数+1的元素。

   #en

 ->属性设值 #middle

  ->$().attr('属性名',值)

          给元素属性设值 所有属性都可以设

  ->$().removeAttr('属性名')

          移除属性

 ->元素的each #middle

 元素数组.each(function(index,elem){ })；

  //index是索引 elem是元素对象

 checkbox的遍历选择的

 和遍历不同组的radio

 #end

 #endregion