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

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。