jquery知识点总结(转)

转载处:http://www.cnblogs.com/m-xy/p/3705251.html

1:jquery可以加载多个ready函数,而原始的js只能加载一次onload
2:用dom对象得到的对象不能使用jquery中的方法,比如var p=document.getElementById("id"),此时p不能这样使用p.html(),而应该使用innerHTML。同样,jquery对象不能使用dom中的方法,如果juqery中改写了dom中的方法,则可以使用dom中的方法。
3:jquery对象转换为dom对象的方法:
       <input type="text" id="a" value="111111">
       var input=$(‘#a‘)
       a:使用索引,alert(input[0].value)
       b:使用get,alert(input.get[0].value)
4:dom对象转换为juqery对象:
       用$()把DOM对象包装起来就OK:
      var input = document.getElementById(‘a‘);
      alert($(input).val());
5:jquery与其他js库共存
      <script>
          var sowhat = jQuery.noConflict()//自定义,可代替jQuery
          或者直接jQuery.noConflict(),然后用jQuery调用方法即可,注意Q不能小写,默认是大写
          alert(‘这是jquery弹出的‘+sowhat(‘#a‘).val());
          alert(‘这是prtotype弹出的‘+$F(‘a‘));
      </script>
6: >号表示子标签,项目中一般不用css表达式,因为它不停地计算会使浏览器特别卡
      $(function(){
          $(‘div>a‘).css(‘color‘,‘red‘);
      });
      <div>
          <a href="###">abcdefg</a>
          <p><a href="###">1234567890</a></p>
      </div>
7:jquery优势:
      a:兼容性强大,完美支持css1-2.0
      b:完美容错机制,eg:即使没有对应标签也不会报错
8:选择器:
      1:id    :$(‘#id‘)
      eg:$(‘#p1‘).css(‘color‘,‘red‘);//代替了#p1{color:red;}
      2:calss :$(‘.p1‘)
      eg:$(‘.p1‘).css(‘color‘,‘red‘);//代替了.p1{color:red;}
      3:标签选择器(不推荐*选择器)
      eg:$(‘p‘).css(‘color‘,‘red‘);//代替了.p1{color:red;}
      4:多重选择器
      eg: <span>123</span>
           <div>12312</div>
           <script>
           $(function(){
               $(‘p,div‘).css(‘color‘,‘red‘);
           });
           </script>
      5:层次选择器
          E   F  e元素所欲的后代元素
          E>F  e元素的子元素
          E+next  e元素后紧邻的标签为next的兄弟元素,等于next()
          E~siblings  e元素后的所有的标签为siblings的兄弟元素,等于nextAll()
          eg:给div标签后紧邻的p标签添加颜色
             $(‘div+p‘).css(‘color‘,‘red‘);
             $(‘div‘).next().css(‘color‘,‘red‘);
             给div标签后所有的p标签添加颜色
             $(‘div~p‘).css(‘color‘,‘red‘);
             $(‘div‘).nextAll().css(‘color‘,‘red‘);
      6:过滤选择器:(用法:只举一例,其他参考手册)
          :first
          $(‘p:first‘).css();
          注意:标签内嵌套标签时单引号和双引号错开使用,若计算偶数则下标从0算起
      7:属性选择器
          A:<p title="js">safs</p>
          选取title为js的p标签添加红色,注意title可以为原有标签,也可以为自己自定义的标签
          $(‘p[title=js]‘).css(‘color‘,‘red‘);
          或者$(‘p[title]‘).css(‘color‘,‘red‘);
          B:选取含有title和myuu属性的p元素,注意title可以为原有标签,也可以为自己自定义的标签
          $(‘p[title=js][myuu]‘).css(‘color‘,‘red‘);
          C:子元素:div的子标签p的第一个标签
          $(‘div p:first-child‘).css(‘color‘,‘red‘);
      8:表单元素及表单元素属性选择器
          $(‘:input[type=checkbox]‘).val();
          $(‘:input:disabled‘).val();
          $(‘:input[disabled=disabled]‘).val();
          $(‘select:selected‘).val();
9:dom筛选
      $(‘p:eq(0)‘).css();    //给指定下标为0的p标签添加颜色
      $(‘p‘).filter(‘#second‘).css(); //奇偶数添加
      $(‘p‘).click(function(){//单击p标签给当前添加颜色
         if($(this).is(‘.first‘)){
            $(this).css(‘backgound‘,‘red‘);
         }
      });
      $(‘p‘).not(‘:last‘).css();//给p标签添颜色,除了最后一个
      $(‘p‘).not(‘#secone‘).css();//给p标签添颜色,除了id为second的p标签
      $(‘input‘).map(function(){ //将一组元素转换为数组(一般不用,因为有一个序列化的方法比这个更好用)
          return $(this).val();
      }).get().join(‘,‘);//,即将三组文本框中的值用逗号隔开并转为字符串
      slice():$(‘p‘).slice(1,5).css();//    选中下标为1,2,3,4的元素,包含1,不包含5。也可传入负数
10:dom遍历查找:(注:返回一组元素的都可以加参数,返回一个的不能加参数)
      $(‘#p1‘).parent().css(); //通过子节点p1找到父节点wrap
      $(‘#p1‘).parents(‘.outer‘).css();//选取祖先元素,通常加参数,表示范围为class为outer的标签为止
      $(‘p1‘).offsetParent().css();//offsetParent()返回父元素中第一个其position设为relative或者absolute的元素,仅对可见元素有效
      $(‘#p2‘).siblings(‘div‘).css();//选择p2所有的兄弟元素(可加参数)
      $(‘span‘).parent().css(‘color‘,‘red‘).end().css(‘color‘,‘blue‘)//先设置红色再设置成蓝色,颜色可重叠。链式操作,end()函数
      $(‘input‘).each(function(){//用的不多,因为效率低,后面有工具函数可以代替它
         alert($(this).val());
      });
11:特殊符号的处理:有的加1个\,有的加2个\      $(‘input[name=gender[]]‘)没加转义符,报错
      $(‘input[name=gender\\[\\]]‘)加了转义符,正确
      $(‘input[name=\‘checkbox\‘]‘)正确
12:表格隔行变色
     ----------js代码-----------
     var table=document.getElementById(‘table‘);
     var tr=table.getElementByTagName(‘tr‘);
     for(var i=0;i<tr.length;i++){
         if(i%2==1){
             tr[i].style.background(‘blue‘);
         }else{
             tr[i].style.background(‘red‘);
         }
     }
     -----------jquery代码-------
     $(‘table tr:even‘).css(‘backgrpund‘,‘red‘);
     $(‘table tr:odd‘).css(‘backgrpund‘,‘blue‘);
     使用end()函数可以优化为一行代码:
     $(‘table tr‘).fliter(‘:even‘).css().end().fliter(‘:odd‘).css()
13:tab标签页
     $(‘#ul li‘).click(function(){
         $(this).addClass(‘current‘).siblings().removeClass(‘current‘);//点击li的时候切换样式
         $(#content>div).eq($(this).index()).show().siblings().hide();//根据li的索引值,来确定哪个div显示哪个div隐藏
         上面两行代码可优化为一行:
         $(this).addClass(‘current‘).siblings().removeClass(‘current‘).parent().next().children().eq($(this).index()).show().siblings().hide();
     });
14:jquery选择器的优化:
     a:最快的是id选择器:能用id获取到的标签尽量不用class选择器
     b:假如p标签下有一个class为a,则尽量:$(‘p.a‘),当然$(‘.a‘)这样写也可以。
        假如有一个div标签,id为a,则直接:$(‘#id‘),一定不要$(‘div#id‘)这样写。
     c:假如div有一个子div,则尽量使用直接使用id获取,不要通过父元素找。
     d:通过find()来找,尽量不使用上下文查找
         eg:$(‘li.item-li‘).find(‘li‘).css();
     e:链式操作比缓存快很多,只有在要通过一个元素查找另外的元素的时候才需要用到缓存,如果直接对某一个元素进行修改,则直接用链式操作。    

15:dom操作:
     a:创建节点:分为内部插入和外部插入。
     内部插入:插入后是子元素
     外部插入:插入后是兄弟元素
     $(‘body‘).append(‘<div>div标签</div>‘);//给页面添加了一个div标签
     或者也可以这样写:
     var str=‘<div>div标签</div>‘;
     $(‘body‘).append(str);
     $(‘p‘).append(‘<div>div标签</div>‘);//向p标签的尾部插入div标签,div是p的所有子标签中排序在最后一个
     $(‘<div>div标签</div>‘).appendTo(‘p‘);//结果和上一句一样
16:添加样式
     <style>
        .bg{background:red;}
        .white{color:#fff;}
     </style>
     <script>
         $(‘p‘).addClass(‘bg white‘);
         $(‘p‘).removeClass(‘bg white‘);
         //toggleClass();//切换样式
     </script>
     再比如:
     <p>11111111</p>
     <script>
         /*$(‘p‘).css(‘background‘,‘red‘).css(‘color‘,‘white‘).css(‘border‘,‘10px solid #abcdef‘);*/
         $(‘p‘).css({
             ‘backgroundColor‘:‘red‘,
             ‘color‘:‘white‘,
             ‘border‘:‘10px solid #abcdef‘
         });
         //建议大家把css属性名用引号引起来
     </script>
17:jquery中的事件和对象
18:jquery插件编写(类级别开发,几乎不用):
     $.zxit={  //zxit为命名空间
     centerDiv:function(obj){  //centerDiv为我们自己自定义的插件方法
         obj.css({
             ‘top‘:($(window).height()-div.height())/2,
             ‘left‘:($(window).width()-div.width())/2,
             ‘position‘:‘absolute‘
         });

         return obj;//返回和传入的都是jquery对象
     }
 }
19:jquery插件编写(对象级别开发,使用率99%):
     a:官方模板:
         ;(function($){
             $.fn.plugin=function(options){
             var defaults = {
             //各种参数,各种属性
             }
             var options = $.extend(defaults,options);

             this.each(function(){
             //实现功能的代码
             });
             return this;
             }
         })(jQuery);
时间: 2024-10-13 16:40:34

jquery知识点总结(转)的相关文章

jquery知识点梳理

jQuery知识点梳理 一.              jquery选择器 基本选择器 ID选择器 类选择器 标记选择器 分组选择器 通配符选择器 层次选择器 $(“ancestor descendent”):祖先后代选择器    空格 $(“parent > child”):父子选择器   大于 $(“prev + next”):相邻后兄弟元素选择器   加号 $(“prev ~ siblings”):所有后兄弟元素选择器  波浪线 过滤选择器:基本过滤选择器 :first.:last.:od

jQuery知识点总结(第一天)

整理笔记前的题外话: 我认为互联网的高速发展其中最为主要的一点就是——开源. 开源精神,使得无数的IT爱好者贡献所学,将自己的智慧结晶无偿奉献给大家.后辈的学习者在混沌的互联网世界里,追寻着前辈们留下的足迹,亦步亦趋的前往更高的层楼.开源精神,大大减少了后辈们在学习技术的难度,使得技术的升级和迭代日新月异.我希望成为一名思维开阔的人,成为对互联网有贡献的开源人. 我是后端PHP程序员,很少写前端页面.在做项目的过程中,被jQuery的便捷性所吸引.因此购买了<锋利的JQuery>一书,最近一边

jQuery知识点总结(第二天)

今天继续从我的笔记上面搬运.我们不产生知识,只是知识的搬运工. 内容过滤选择器: ○ 内容选择过滤器                                       $("div:contains('text')");   内容为'text'的那个div ○ 不包含子元素也不包含文本元素(一穷二白的选择器)   $("div:empty"); ○ 含有选择器所匹配元素的元素(真他妈绕口)              $("div:has(p)&q

jQuery知识点总结

一.元素的增删改查 1.增加 a.append() 和 appendTo()  区别 append():后边的加到前边的里边(后置插入) appendTo():前边的加到后边的里边 b.prepend()  和 prependTo() 区别 后边的加到前边的里边(前置插入) c.after()   和 before() 区别 后边的插入到前边的之后 后边的插入到前边的之前 2.删除 a.remove .empty 和 detach 方法的区别 Remove:移除 Empty:把元素内容清空 De

jQuery 知识点总结

[文章根据 尚硅谷 教学材料 总结] 发博备查. 1.        . class选择器    # id选择器    : 选取 2. $(function(){})相当于 window.onload 方法.    window.onload = function(){...}    3. 加载DOM的两种方式: jQuery 和 window.onload    $(document).ready(function(){...})    $(function(){...} 4. 选取butto

几个简单的jquery知识点练习

三.jquery对象和dom对象 <script type="text/javascript"> //页面的基本元素加载后 $(function () { var btnObjDom = document.getElementById('btn'); //dom对象变成jquery对象 alert($(btnObjDom).val());//如果val()该方法括号中什么都不写,表示的是获取值 //如果在括号中写内容了,表示的是设置该属性的值 //jquery对象变成dom

jQuery知识点积累

1.  jQuery对象与JavaScript对象转换 jQuery-->JavaScript 两种方法: $(selector).get(index) ;   $(selector)[index]; JavaScript-->jQuery 只需要将获取的JavaScript对象用$包装即可, 如: var obj = document.links;  $(obj).css("color","red");

jquery知识点复习

一. 基本概念 jQuery简介 jQuery是一个基于javascript的框架.它提供了丰富的选择器和大量的函数,可以方便的实现网页中各种动态的效果.迄今为止,已经有大量的jquery插件和基于jQuery的UI框架(miniui.easyui.ligerui). jQuery的宗旨是:write less,do more! 文档加载完毕函数 常规形式:$(document).ready(function(){- -}); 简写形式:$(function(){- -}); jquery对象和

jquery知识点整理

1.jquery可以加载多个ready函数,而原始的js只能加载一次onload 2.用dom对象得到的对象不能使用jquery中的方法,比如var p=document.getElementById("id"),此时p不能这样使用p.html(),而应该使用innerHTML.同样,jquery对象不能使用dom中的方法,如果juqery中改写了dom中的方法,则可以使用dom中的方法. 3.jquery对象转换为dom对象的方法: 4.<input type="te

jQuery知识点总结(第四天)

前三天是jQuery的基础部分,选择器学好了.才能进行下一步的操作,如果前三天没学过没学好,不要跳着学.粗俗的话叫做,步子大了,容易扯着蛋.一步一个脚印,是最好的方式. 强调一下.有问题,不要憋着不讲.评论区里可以尽情提问,有问题才是好孩子. jQuery插入节点的方法: 插入节点主要有两种方式,一种是内插,一种是外插.外插花样多,还分前插和后插.各位看官自动脑补岛国动画,只要你能记住,我拦不住您瞎想. 本着no picture no bibi 的精神.我画几个图,对比学习.当然更好的是你自己练