javascript基础

本文深入讲解了jQuery的核心API,包括闭包、事件处理、动画控制、DOM操作等关键功能,帮助开发者快速掌握jQuery的使用技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

闭包函数内的子函数:如闭包函数运行过以后,它的私有变量并没有从内存中消失,如果它的子函数被外面再调用时,仍然可以用闭包函数的私有变量。如
1.通过注册到全局window对像接收闭包函数提供的功能. 

(function jQ(window){
    var kk = 1,
        jQ = function(){
            kk++;
            return kk;
                },
        jQ2 =  function(){
            kk++;kk++;
            return kk;
                };
        
   window.jQ = jQ;
   window.jQ2 = jQ2;
  })(window);
  当在外面调用jQ() jQ2时,它们共享了闭包函数私有变量kk,实际上闭包函数相当于一个静态类,kk 相当于一个静态私有变量。

2.通过变量接收闭包函数的提供的功能.

//web 变量接收到返回
web = function(){
    
    //供内部调用
    function outPut(v)
    {
        console.log(v);
    }
    //本函数可以向外提供的功能.
    var funcs = {
          func1:function(){
              outPut('func1');
          },
          func2:function(){
            outPut('func2');
          },
      };
    //把可以提供的功能返回
    return funcs;

}();//让函数执行.
//测试调用
web.func1();
web.func2();

  jquery防类库冲突函数
  $.noConflict(true/false); 
  正常情况下可以通过$(...),window.$,window.jQuery,jQuery调用jquery中的函数,
  当调用jQuery.noConflict()后,只可以与window.jQuery,jQuery了,而$(...),window.$不再可以使用
  而调用jQuery.noConflict(true)后,四个都不可以使用了,请你自己用它的返回值设为自己的变量再使用。
  注意:如果是与prototype同时用,调用jQuery.noConflict();就可以了,如果是与 jQuery的以前版本同时使用,请用jQuery.noConflict(ture);

  $.extend 类的继承(只能对jQuery静态方法库的扩展)
  $.fn.extend实现对jQuery实例方法的扩展
  jQuery.extend / jQuery.fn.extend / $.extend
  $.extend(true,tg_obj,source_obj);//会把source_obj的所有方法与属性copy入tg_obj。
  $.extend(target,obj1,[objN]);//会把source_obj的所有方法与属性copy入tg_obj。
  $.extend(source_obj); //把 source_obj所有方法与属性copy入jquery静态方法库.
  $.extend(true,source_obj); //把 source_obj所有方法与属性copy入jquery.

  $.fn.XX可以实现对jQuery实例方法的扩展,同$.fn.extend
  $.fn.func1 = function(){return 'Francis';}; 
  或 $.fn.extend({func1:function(){return 'Francis';}});
  $(document).func1();//Francis

  类型判断
  $.isPlainObject(),是否是一个类(包括空类)
  $.isEmptyObject(),是否是一个空类
  $.isArray(),是否是一个数组
  $.isFunction(),是否是一个function
  $.makeArray(),把一个类数组的对象转化为数组.如
      var arg = $.makeArray(arguments);
  $.trim  trim字符串
      $.trim(" teststr ");

  $.inArray是否是数组中的元素,是返回index,否返回-1
      $.inArray('wang',arr) 
  
  $.merge 合并数组
      $.merge(arr1,arr2);
  把数组arr2合并入arr1



  prototype 的理解
  prototype是对类(就是一个包含的this的方法)的属性的扩展,但只能在类的实例中调用,不能在类里调用。
  使用 
     class.func1 = function(){..1...};
     class.prototype.func1 = function(){...2...};
     obj = new class;
     obj.func1(); //调用的是function(){...2...};
     class.func1();//调用的是function(){...1...};
从对象中取值时,如obj['name'],如果这个对象中不存在这个属性,则会从它的原型(obj.prototype)中找此属性,
如果它的原型中找不到,因为原型本身也是一个对象,那就从此对象的原型里再找,就是从原型的原型里找,直到找到最终的Object.prototype,Object.prototype是一切对象的最终原型.

 例子: 
 function clas1(){};
 clas1.prototype = {class1_name:'class1_name'};
 obj1 = new clas1(); //obj1的原型是clas1.prototype:就是{clas1:'111'}
 obj1.obj1_name = 'obj1_name';
 
 function clas(){};
 clas.prototype = obj1;  
 obj = new clas();   //obj的原型是clas.prototype:就是obj1,而obj1的原型是clas1.prototype,所以clas的原型的原型是{class1_name:'class1_name'}

 Object.prototype.Object_name = 'Object_name'; //一切对象的最终原型
 
 console.log(obj.class1_name); //class1_name,从obj的原型的原型中取到数据
 console.log(obj.obj1_name);   //obj1_name,从obj的原型中取到数据
 console.log(obj.Object_name); //Object_name,从最终的原型中取到数据

 
  jquery核心函数
  $(func)文档就绪, 是$(document).ready(fn)的别名。
      $(function(){
        //文档就绪后执行
       console.log('ready');
      });

  $(ele)把dom转成jQuery对像
    $(elements).hide(); 
  
  $(html)创建dom
    $("<div><p>Hello</p></div>").appendTo("body"); 

  css选择器:参数1表示所用的css选择器,参数2表示搜索的对像(是一个dom)
  var tg = $("div#out div", document);  var tg = $("div", $("#out")); 
  关于css选择器请参考:https://developer.mozilla.org/en/CSS_Reference
  
  .selector返回传给jquery的第一个参数(选择器)
  $("ul li").selector//返回ul li

  .context返回传入jQuery第二个参数(原始dom),如果没有则为document
  $("ul",$(document.body)).context //返回body dom

  .each(obj,callback) 对元素数组统一执行一个函数,在这个函数里,$(this)与示例中的$(domEle)一样,下面示例中传了两个参数,也可以也传一个参数(表示index),或不传参数。
    $("div#out div").each(function (index, domEle) { 
      // domEle == this 
      $(domEle).css("backgroundColor", "yellow");  
      if ($(domEle).is("#sub_div1")) { 
          return false; 
      };
    });

    $.each( [0,1,2], function(i){
     console.log( "Item #" + i + ": " + this );
    }); 

   $.grep(array,callback,[invert]) 用函数过滤数组,如invert为true则返回return false的元素,默认为false,返回return true的元素.
    arr = $.grep( [0,1,2], function(n,i){
          return n > 0;
          });
   $.map(array,callback)把数组通过函数转化为存入另一个数组.如
     tg = $.map( [0,1,2], function(n){
          return n + 4;
    });// [4, 5, 6]

  .get(),返回匹配元素的数组[是element数组,不是jqery对像]。
   tg = $("body div").get(); 返回的是数组,数组中每一个元素只是一个单纯的dom,而$("body div")是一个jquery对像,$("body div")中的每一项也都是一个jqery对像。

  .get(index) 返回匹配结果中的第index个元素[是element,不是jqery对像]。

   .index(jQ ele) 与.get(index)相反,通过元素返回索引值,找不到返回-1
   $("body div").index($('#sub_div2'));  //2

   .length 返回jQuery元素的个数
   $("body div").length

   .size() 与.length一样,返回jQuery元素的个数
   $("body div").size();

   .jquery 返回版本号,只能在jQuery对像里才能用,不能静态调用.
   $("body div").jquery;//1.4.2

   .data / .removeData 暂存数据
     $(document).data('name','Document'); //存一个名为name,值为Document的键值对。
    var v = $(document).data('name');    //取得名为name的值
    $(document).removeData('name');      //删除名为name的值
   
   .queue/.dequeue 处理顺序执行的函数组
   $(document).queue("myAnimation",FUNC); //向dom添加一个序列 myAnimation,是队列名,FUNC是一个函数数组如[func1,func2,fuc3...]
   $(document).dequeue("myAnimation"); //相当于数组的shift操作,先从myAnimation组中移出最先的函数然后执行它。
   $(document).queue("myAnimation",function(){console.log('move over');});//向myAnimation最后添加一个函数元素
   (document).queue("myAnimation");//返回名为myAnimation的函数数组
    function test_queues()
    {
       $("#sub_div1").css('position','fixed');
       $("#sub_div2").css('position','fixed');
       var FUNC=[
        function() {$("#sub_div1").animate({left:"+=100"},3000,aniCB);},
        function() {$("#sub_div2").animate({left:"+=100"},3000,aniCB);},
        function() {$("#sub_div1").animate({left:"+=100"},2000,aniCB);},
        function() {$("#sub_div2").animate({left:"+=100"},2000,aniCB);},
        function() {$("#sub_div1").animate({left:"+=100"},1000,aniCB);},
        function() {$("#sub_div2").animate({left:"+=100"},1000,aniCB);},
        ];
        var aniCB=function() {
          $(document).dequeue("myAnimation");
       }
       $(document).queue("myAnimation",FUNC);
       $(document).queue("myAnimation",function(){console.log('move over');});
       aniCB();
    }
    注:animate(params[,duration[,easing[,callback]]]) 其中callback是当动画完成时调用的函数 或 animate(params,options)。

   ajax部分
   $.ajax()常用参数:
    type:"POST" 或 "GET"
    url:请求地址
    data:发送的数据,可以是串如"a=2&b=3",也可以是键值对的类。
          $('#form1').serialize();可以让一个form生成这里需要的串。但如果form里有数组形或的一个名对多个值的情况就会出现类似&multiple=Multiple&multiple=Multiple3这样的事,这样php的$_GET里只能得到最后一个值。
      $('#form1').serializeArray() 把form的转成一个对像数组
    success:成功时所调用的函数。
    cache:是否从浏览器缓存中取数据,默认为true
    dataType:预期接收到的数据类型 xml/html/script/json/jsonp/text
    async: 默认为true异步加载,如果需要同步请用false,但同步时会锁住浏览器,用户其它操作必须等待请求完成才可以执行
    $.ajax({
       type: "POST",
       url: "http://test/test.php",
       data: data,
       success: function(msg){
         console.log(msg);
       }
    }); 

   $.post(url,[data],[callback])
   $.get(url,[data],[callback])
   $.getJSON(url,[data],[callback])
   $.getScript(url,[callback])
        var data = {name:'francis',age:'22'}; 
    var url = "http://test/test.php";
    $.post(url,data,function(res){console.log(res);}); 
    $.get(url,data,function(res){console.log(res);}); 
    //PHP 输出的是json格式,这边接到后被直接解析到res对像上。
    $.getJSON(url,data,function(res){console.log(res);}); 
    //php 输出js时可以不加<script></script>,getScript接收到后script后会直接运行,但回调函数仍然可以得到script串
    $.getScript(url,function(res){console.log(res);});  
  
   .css 
   $("p").css("color","red"); //设置匹配元素的一个css值。
   $("div").css({"margin-left": "20px", "background-color": "blue"}); 设置匹配元素的css,如果name中有-要用""
   $("div").css('margin-left'); 得到第一个匹配元素的相应的css值.
   
   位置 
.  offset() 相对于窗口的绝对位置
    pos = $('#sub_div1').offset(); //pos = $('#sub_div1').offset();  pos.left, pos.top
   .position()相对于父元素的位置  
    $('#sub_div2').position(); //pos = $('#sub_div1').position();  pos.left, pos.top
    //把一个元素由相对位置变成绝对位置
    pos = $('#sub_div1').offset();
    $('#sub_div1').css({position:'absolute',left:pos.left,top:pos.top});

   .scrollLeft()相对于横scroll bar的位置,如果传一个值表示设置
   .scrollTop()相对于纵scroll bar的位置,如果传一个值表示设置
     $("#scroll_div").scrollTop(); 
     $("#scroll_div").scrollTop(200); 
   注意:它们的位置都是相对于自己本身的scroll bar,并不是相对于子的或父的。

   宽高
   .width()得到或设置元素的宽度,(即:css中的width)可以用来捕获window或document的宽度
   .height()得到或设置元素的高度,(即:css中的height)可以用来捕获window或document的高度
   .innerWidth()得到元素的内部宽度(不包括border,即:css中的width+padding)
   .innerHeight()得到元素的内部高度(不包括border,即:css中的height+padding)
   .outerWidth()得到元素的外部宽度(即:css中的height+padding+border)
   .outerHeight()得到元素的内部宽度(即:css中的height+padding+border)

   
   事件:
   .blur()/.blur(fn)触发/绑定元素失去焦点的事件
   .focus()/.focus(fn)触发/绑定得到焦点focus事件
   .change()/.change(fn)触发/绑定元素change事件,注意:只有当元素内容变化且blur时才处罚,并不是在改变进实时的触发。如果你想在用户边输入边触发,使用keyup事件吧如:
   $('#send_user_name').keyup(function(){
     console.log($('#send_user_name').val());

    });

   .click()/.click(fn)触发/绑定元素click事件
   .dblclick()/.dblclick(fn)触发/绑定元素dbclick事件,注意:如果元素绑定了click事件,那么在dblclick事件发生时同时会触发两次click事件。
   .error()/.error(fn)触发/绑定元素error事件如:$("#img1").error(...)
   .keydown()/.keydown(fn)触发/绑定keydown事件
   .keyup()/.keyup(fn)触发/绑定keyup事件
   .keydown()/.keydown(fn)触发/绑定keydown事件
   .keypress()/.keypress(fn)触发/绑定keydown事件
      $(window).keydown(function(event){
          console.log("press:", event.keyCode);
    }); 
   .load(fn)绑定元素加载完成后执行的事件.

         如:<div id="img_div"> img div <img src="http://www.baidu.com/img/baidu_logo_jr_1005_mq.gif" id="img1" onload="show_img();"/></div>

<script type="text/javascript">

$('#img_div').hide();
function show_img()
{
 $('#img_div').show();
}

</script>

         注意: $('#img_div').hide();必须在这个html后写,因为html边解释边执行,当执行到它时,它的html dom必须已存在.
   .mouseover(fn)绑定当鼠标移入元素时执行的事件。
   .mouseout(fn) 绑定当鼠标移出元素时执行的事件。
   .mousedown(fn)绑定当鼠标在元素上按下执行的事件。(左右中三键都会执行)
   .mouseup(fn)  绑定当鼠标在元素上放开元素时执行的事件。(左右中三键都会执行)
   .mousemove(fn)绑定当鼠标在元素上移动时执行的事件。
   .resize(fn)   当元素resize时触发(没有测试成功)
   .scroll(fn)   当元素的scroll bar被拖动时触发。
   .select()/.select(fn) 触发/绑定当text或textarea的的内容被选中时。
   .submit()/.submit(fn) 触发/绑定form的提交事件
   .unload(fn) 当页面卸载时触发(没有测试成功)
   .hover(over_fn,out_fn) 元素悬停事件,当进入时执行over_fn,移出时执行out_fn
   .toggle(fn1,fn2,fn3...) 依次点击时轮番执行fn1,fn2,fn3...
     $("#div1").toggle(
      function () {
        $(this).css({"color":"red"});
      },
      function () {
        $(this).css({"color":"yellow"});
      },
      function () {
        $(this).css({"color":"blue"});
      }
     );
   .bind(type,[data],fn) 向某元素绑定事件,type为事件名,data为一个数据(在event.data里可以调到),fn是要要绑定的函数。如果这个函数里含有 this,this将指向事件发生时的元素。
      $("#div1").bind("click",{arg1:"value1"}, function(evt){
      console.log( $(this),this,evt.data );
    }); 
   .unbind([type],[fn]) 删除绑定的函数。不传参数时,将删除元素上绑定的所有函数,传type,则删除元素上此type的函数,传入 type,fn则只把此fn函数删除。
   .one(type,[data],fn) 向元素绑定一个只执行一次的函数。
   .trigger(type,[data]) 触发一组事件类型为type的事件。(第二个参数data测试时没有起作用)
   .triggerHandler(type,[data]) 与.trigger方法相同(没有测试出区别),是否会执行浏览器默认动作仅由绑定函数是return false(不执行默认动作)还是true(执行默认动作)。
   .live( type, fn ) 与.bind的区别在于可以事先实现绑定,就是说在目标元素还没有出现时就可以预先绑定了,等出现后就可以直接触发事件了。
       $("#name2").bind('click',function()
    {
        console.log(this);
    });
    $("<div>name2:<input type=/"text/" name=/"input/" id=/"name2/"/></div>").appendTo("body");
    这个click事件是不是会执行的,绑定失败,而下面的程序则可以绑定成功
        $("#name2").live('click',function()
    {
        console.log(this);
    });
    $("<div>name2:<input type=/"text/" name=/"input/" id=/"name2/"/></div>").appendTo("body"); 
    .die([type], [fn]) 与live相反。
    

    class类操作
    $("#div1").addClass('redFont'); 添加class
    $("#div1").removeClass('redFont'); 删除class
    $("#div1").toggleClass('redFont'); 如果有此class就去掉,如果没有就添加。
    $("#div1").hasClass("chui");前面的元素集合中是否包含此class.
    
    .html()/.html(val)获取或设置元素的html内容。
    .var()/.var(val)获取或设置元素值。check,select,radio,文本框都可以通过此赋值,如果是多个值可以用数组传入。

    .attr(key,fn)建立一个属性,此属性的值由函数返回 如:
             ('#img1').attr('title',function(){return this.src});
    .attr(key,value)为匹配的元素设置一个属性值 如:
                var re = $('#img1').attr('src','http://b.com/ifeng.gif');
    .attr(properties)用"名/值”形式的对象设置为所有匹配元素的属性
                $("img").attr({ src: "test.jpg", alt: "Test Image" }); 
    .removeAttr(name)删除一个属性
    .text()/text(val) 获取或设置元素的内容,获取时会去掉它的html标签,设置时如果包含html标签则会被转意成html实体(&...)
  
    $.param(obj) 把obj转成url请求串 如
        $.param({arg1:"arg value",arg2:"age value2"});输出:arg1=arg+value&arg2=age+value2 

    $.unique(document.getElementsByTagName("div")); 不能对数字数组或字串数组使用,只能对dom数组使用,(没测试成功)
    $.support 一组用于展示不同浏览器各自特性和bug的属性集合

    显示隐藏动画
    $('#div1').hide(),隐藏元素
    $('#div1').hide(2000,function(){console.log("over")}); 以动画隐藏元素
    $('#div1').show(),隐藏元素
    $('#div1').show(2000,function(){console.log("over")}); 以动画隐藏元素
    $('#div1').toggle();如果显示则隐藏,如果隐藏则显示.
    $('#div1').toggle(3000,function(){console.log("over")});以动画显示隐藏.

    淡入淡出显示隐藏动画(只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化,到最后display为none/block)
    $('#div1').fadeOut("slow",function(){console.log("over")});淡出
    $('#div1').fadeIn("slow",function(){console.log("over")}); 淡入
    $('#div1').fadeTo("slow",0.33,function(){console.log("over")}); 淡出到指定透明度

    滑动显示隐藏动画(总体效果与hide()show()差不多)
    $('#div1').slideDown("slow",function(){console.log("over")});向下滑动显示
    $('#div1').slideUp("slow",function(){console.log("over")});  向上滑动隐藏
    $('#div1').slideToggle("slow",function(){console.log("over")});滑动显示隐藏

    动画
    .animate(params,options) 如:
    $('#div1').animate({width:'50%',
                'font-size':"50"
                },
                {duration:2000,
                 complete:function(){console.log('ok')}
                }
                  );
    .animate(params[,duration[,easing[,callback]]]) 第三个参数easing平时可以不使用.如:
    $('#div1').animate({width:'50%','font-size':"50"},
                        2000,
                        function(){console.log("over");}
                       );

   $('#div1').stop();可以在动画播放的过程中停止动画
   $.fx.off = true; 让页面上所有的动画马上执行完毕(达到预先指定的效果)

   向元素内部最后插入
   $('#div1').append("<div> sub div1 </div>");向元素内部的最后加入内容.
   .appendTo()把别处的元素移入目标元素内,或建立一个元素放入目标元素.
    $("<div> sub div1 </div>").appendTo("#div1");
    $("#name").appendTo("#div1");
    
   向元素内部最前插入
   $("#div1").prepend("<b>#div1<b>");向元素内部的最先加入内容.
   .prependTo()把别处的元素移入目标元素内,或建立一个元素放入目标元素.
        $("<div> sub div1 </div>").prependTo("#div1");
    $("#name").prependTo("#div1");

   元素外部插入
   $("#div1").before("<b>test</b>");在#div1前面放一个b标签.
   $("#div1").after("<b>test</b>");在#div1后面放一个b标签.
   $("#div1").insertBefore("#div3");把#div1放到#div3之前.
   $("#div1").insertAfter("#div3"); 把#div1放到#div3之后.

   元素替换
   $("#div1").replaceWith("<b>test</b>");将#div1 用<b>test</b>代替.
   $("<b>tes</b>").replaceAll("div"); 用<b>tes</b>把所有的div全部替换.

   清空元素子节点
   $("#div1").empty(); //把它中的内容包括文本全部清空
   $("#div1").remove(); //删除匹配元素

   元素包裹
   .wrap()/.wrapAll()/.wrapInner可以传入html也可以直接传入dom 如:$("div").wrapAll($("#div1")); 
   $("#div1").wrap("<b></b>"); //把#div1用<b>包裹起来变成了 <b><div id="div1">k</div></b>
   $("div").wrapAll("<b></b>"); //用<b>把所有匹配的元素包裹起来,.wrap是每个匹配的都包裹一次,而.wrapAll只在最外层包裹一次.
   $("#div1").wrapInner("<b></b>"); //将每一个匹配的元素的子内容(包括文本节点)用DOM元素包裹起来

   .clone()元素复制
   .clone(true)事件也会被复制
    ele = $("#div1").clone();
    ele.attr('id','div_clone1');
    ele.appendTo($("#div2"));

   .andSelf()把当前的元素合并先前的集合,一起操作
      $("div").find("p")表示所有div中的所有p标签.加上andSelf()后集合变为:所有的div与它们的子元素p,结果全部为一个 border class.
   $("div").find("p").andSelf().addClass("border"); 

   .end()回到上一次的结果集合.
   $("div").find("p").end(); 的结果集是与$("div")一样的.

   .add(expr) 连接分别与两个表达式匹配的元素结果集
    re1 = $("div").find("p").andSelf() 与 re = $("div").add("p") 是一样的.

   .children();一级子元素
    $("#testdiv").children();#testdiv的一级子元素
   
   .find();在所有后代元素中查找条件
    $("#testdiv").find('b');

   .closest();先查本元素,如果不匹配就查它的父元素,如果还不匹配则查它的父元素的父元素,这样逐级上向查找,直到找到后返回,找不到会返回一个空的jQuery对象.
   $("#innerp").closest('.testdiv');

   .contents();查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容
   $('#con_two_2 div iframe').contents().find('body').html()//返回页面iframe内的body内的内容.
   .wrap(elem) 把所有匹配的元素用其他元素的结构化标记包装起来


   .next()/.prev(); 只返回紧挨着目标元素的那个元素之后/之前的那个元素.
   $("p").next() 

   .nextAll();/.prevAll();查找当前元素之后/之前的所有同辈元素
   $("#div1").nextAll(".class1");
   
   .parent();返回其父元素
   $("#sub_div1").parent();
   
   .parents() 返回祖先元素集合
   $("#sub_div1").parents()

   .siblings();返回所有同辈元素
   $("#div1").siblings();
   
   .offsetParent();父元素中第一个其position设为relative或者absolute的元素 如果没有就返回body
   $("#div1").offsetParent();
   
   .eq(0);获取第N个元素[是jquery对像]
   $("#div1").siblings().eq(0);

   .filter(fn/expr)从前面数组中再次过滤目标元素.
   $("#div1").siblings().filter('#out');

   .is()

用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。

如果没有元素符合,或者表达式无效,都返回'false'。 
     $("#div1").siblings().is('div'); //true/false

   .map(fn)所元素数组能过函数映射成别的数据,可以是串也可以是数字.
    vars = $("input").map(function(){
        return $(this).val();
    });

   .not()/:not(selector) 从前面集合中删除匹配的元素.
   $("input").not("input[type='text']");

   .slice(start,[end]);从前面集合中选取子集
   $("input").not("input[type='text']").slice(1,2);

   :contains(text) 匹配包含给定文本的元素
   $("p:contains('First')");

   :empty 匹配不包含子元素或者文本的空元素
   $("div:empty");

   :has(selector)匹配含有选择器所匹配的元素的元素
   $("div:has(p)");

   :parent 匹配含有子元素或者文本的元素
   $("div:parent")
 
   :hidden/:visible 匹配所有的不可见/可见元素
   $("div:hidden")
   
   :first-child/:last-child/:nth-child() 匹配第一个/最后一个/第n个子元素
   $("ul li:first-child")
   $("div:nth-child(2)")
   
   :only-child 某个元素是父元素中唯一的子元素,那将会被匹配
   $("input:only-child");
   
   选择器
selector1,selector2,selectorN 可以把符合条件的三组选择结果合并.
$("#div1,#div2") 返回  [div1 document,div1 document]
   parent > child 在给定的父元素下匹配所有的子元素
   prev + next  匹配所有紧接在 prev 元素后的 next 元素
   prev ~ siblings 匹配 prev 元素之后的所有 siblings(兄弟) 元素
   [attribute*=value] 匹配给定的属性是以包含某些值的元素
   [attribute!=value] 匹配所有含有指定的属性,但属性不等于特定值的元素。
   [attribute$=value] 匹配给定的属性是以某些值结尾的元素
   [attribute=value] 匹配给定的属性是某个特定值的元素
$("input[name='mobile_sign[]']") 
匹配: <input name="mobile_sign[]" type="hidden" value="{$info.mobile_sign}"/>

   [attribute] 查找所有含有 attribute 属性的元素
   [attribute^=value] 匹配给定的属性是以某些值开始的元素
   [selector1][selector2][selectorN] 复合属性选择器,需要同时满足多个条件时使用。
   var checked = $("input[type='checkbox'][name^='priv']");
   if(!checked.is("input[checked=true]"))....


   :animated 匹配所有正在执行动画效果的元素
   :eq(index) 匹配一个给定索引值的元素
   :even/:odd 匹配所有索引值为偶数/奇数的元素,从 0 开始计数
   :first 匹配找到的第一个元素
   :last 匹配找到的最后一个元素
   :gt(index)匹配所有大于给定索引值的元素
   :header 匹配如 h1, h2, h3之类的标题元素
   :lt(index) 匹配所有小于给定索引值的元素
   :button 匹配所有按钮
   :checkbox 匹配所有复选框
   :file 匹配所有文件域
   :image 匹配所有图像域
   :input 匹配所有 input, textarea, select 和 button 元素
   :password 匹配所有密码框
   :radio 匹配所有单选按钮
   :reset 匹配所有重置按钮
   :submit 匹配所有提交按钮
   :text 匹配所有的单行文本框
   :checked 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
   :disabled 匹配所有不可用元素
   :enabled 匹配所有可用元素
   :selected 匹配所有选中的option元素

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lixp3

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值