jquery知识点总结

  1 1:jquery可以加载多个ready函数，而原始的js只能加载一次onload
  2 2:用dom对象得到的对象不能使用jquery中的方法，比如var p=document.getElementById("id"),此时p不能这样使用p.html(),而应该使用innerHTML。同样，jquery对象不能使用dom中的方法，如果juqery中改写了dom中的方法，则可以使用dom中的方法。
  3 3：jquery对象转换为dom对象的方法：
  4       5     var input=$(‘#a‘)
  6     a：使用索引，alert(input[0].value)
  7     b：使用get,alert(input.get[0].value)
  8 4:dom对象转换为juqery对象：
  9     用$()把DOM对象包装起来就OK：
 10     var input = document.getElementById(‘a‘);
 11     alert($(input).val());
 12 5：jquery与其他js库共存
 13      19 6： >号表示子标签，项目中一般不用css表达式，因为它不停地计算会使浏览器特别卡
 20     $(function(){
 21         $(‘div>a‘).css(‘color‘,‘red‘);
 22     });
 23     

 24         abcdefg
 25         
1234567890
 26     
 27 7:jquery优势：
 28     a:兼容性强大,完美支持css1-2.0
 29     b:完美容错机制，eg：即使没有对应标签也不会报错
 30 8:选择器：
 31     1：id    ：$(‘#id‘)  
 32     eg:$(‘#p1‘).css(‘color‘,‘red‘);//代替了#p1{color:red;} 
 33     2：calss ：$(‘.p1‘)
 34     eg:$(‘.p1‘).css(‘color‘,‘red‘);//代替了.p1{color:red;} 
 35     3：标签选择器（不推荐*选择器）
 36     eg:$(‘p‘).css(‘color‘,‘red‘);//代替了.p1{color:red;}
 37     4：多重选择器
 38     eg： 123
 39          
12312
 40           45     5:层次选择器
 46         E   F  e元素所欲的后代元素
 47         E>F  e元素的子元素
 48         E+next  e元素后紧邻的标签为next的兄弟元素，等于next()
 49         E~siblings  e元素后的所有的标签为siblings的兄弟元素,等于nextAll()
 50         eg:给div标签后紧邻的p标签添加颜色
 51            $(‘div+p‘).css(‘color‘,‘red‘);
 52            $(‘div‘).next().css(‘color‘,‘red‘);
 53            给div标签后所有的p标签添加颜色
 54            $(‘div~p‘).css(‘color‘,‘red‘);
 55            $(‘div‘).nextAll().css(‘color‘,‘red‘);
 56     6：过滤选择器：(用法：只举一例，其他参考手册)
 57         :first
 58         $(‘p:first‘).css();       
 59         注意：标签内嵌套标签时单引号和双引号错开使用，若计算偶数则下标从0算起
 60     7：属性选择器
 61         A:
safs
 62         选取title为js的p标签添加红色,注意title可以为原有标签，也可以为自己自定义的标签
 63         $(‘p[title=js]‘).css(‘color‘,‘red‘);
 64         或者$(‘p[title]‘).css(‘color‘,‘red‘);
 65         B:选取含有title和myuu属性的p元素,注意title可以为原有标签，也可以为自己自定义的标签
 66         $(‘p[title=js][myuu]‘).css(‘color‘,‘red‘);
 67         C:子元素:div的子标签p的第一个标签
 68         $(‘div p:first-child‘).css(‘color‘,‘red‘);
 69     8：表单元素及表单元素属性选择器 
 70         $(‘:input[type=checkbox]‘).val();   
 71         $(‘:input:disabled‘).val();   
 72         $(‘:input[disabled=disabled]‘).val(); 
 73         $(‘select:selected‘).val();
 74 9:dom筛选        
 75     $(‘p:eq(0)‘).css();    //给指定下标为0的p标签添加颜色     
 76     $(‘p‘).filter(‘#second‘).css(); //奇偶数添加    
 77     $(‘p‘).click(function(){//单击p标签给当前添加颜色
 78        if($(this).is(‘.first‘)){
 79           $(this).css(‘backgound‘,‘red‘);
 80        }
 81     });
 82     $(‘p‘).not(‘:last‘).css();//给p标签添颜色，除了最后一个
 83     $(‘p‘).not(‘#secone‘).css();//给p标签添颜色，除了id为second的p标签
 84     $(‘input‘).map(function(){ //将一组元素转换为数组（一般不用，因为有一个序列化的方法比这个更好用）
 85         return $(this).val();
 86     }).get().join(‘,‘);//,即将三组文本框中的值用逗号隔开并转为字符串
 87     slice():$(‘p‘).slice(1,5).css();//    选中下标为1，2，3，4的元素,包含1，不包含5。也可传入负数
 88 10:dom遍历查找：（注：返回一组元素的都可以加参数，返回一个的不能加参数）
 89     $(‘#p1‘).parent().css(); //通过子节点p1找到父节点wrap
 90     $(‘#p1‘).parents(‘.outer‘).css();//选取祖先元素，通常加参数,表示范围为class为outer的标签为止
 91     $(‘p1‘).offsetParent().css();//offsetParent()返回父元素中第一个其position设为relative或者absolute的元素,仅对可见元素有效
 92     $(‘#p2‘).siblings(‘div‘).css();//选择p2所有的兄弟元素(可加参数)
 93     $(‘span‘).parent().css(‘color‘,‘red‘).end().css(‘color‘,‘blue‘)//先设置红色再设置成蓝色，颜色可重叠。链式操作，end()函数
 94     $(‘input‘).each(function(){//用的不多，因为效率低，后面有工具函数可以代替它
 95        alert($(this).val());
 96     });
 97 11：特殊符号的处理：有的加1个\，有的加2个\ 98     $(‘input[name=gender[]]‘)没加转义符,报错
 99     $(‘input[name=gender\\[\\]]‘)加了转义符，正确
100     $(‘input[name=\‘checkbox\‘]‘)正确
101 12：表格隔行变色
102     ----------js代码-----------
103     var table=document.getElementById(‘table‘);
104     var tr=table.getElementByTagName(‘tr‘);    
105     for(var i=0;i){
106         if(i%2==1){
107             tr[i].style.background(‘blue‘);
108         }else{
109             tr[i].style.background(‘red‘);
110         }
111     }
112     -----------jquery代码-------
113     $(‘table tr:even‘).css(‘backgrpund‘,‘red‘);
114     $(‘table tr:odd‘).css(‘backgrpund‘,‘blue‘);
115     使用end()函数可以优化为一行代码：
116     $(‘table tr‘).fliter(‘:even‘).css().end().fliter(‘:odd‘).css()
117 13：tab标签页
118     $(‘#ul li‘).click(function(){
119         $(this).addClass(‘current‘).siblings().removeClass(‘current‘);//点击li的时候切换样式
120         $(#content>div).eq($(this).index()).show().siblings().hide();//根据li的索引值，来确定哪个div显示哪个div隐藏
121         上面两行代码可优化为一行：
122         $(this).addClass(‘current‘).siblings().removeClass(‘current‘).parent().next().children().eq($(this).index()).show().siblings().hide();
123     });    
124 14:jquery选择器的优化:
125     a：最快的是id选择器:能用id获取到的标签尽量不用class选择器
126     b：假如p标签下有一个class为a，则尽量：$(‘p.a‘)，当然$(‘.a‘)这样写也可以。
127        假如有一个div标签，id为a，则直接：$(‘#id‘),一定不要$(‘div#id‘)这样写。
128     c：假如div有一个子div，则尽量使用直接使用id获取，不要通过父元素找。
129     d：通过find()来找，尽量不使用上下文查找
130         eg：$(‘li.item-li‘).find(‘li‘).css();
131     e：链式操作比缓存快很多，只有在要通过一个元素查找另外的元素的时候才需要用到缓存，如果直接对某一个元素进行修改，则直接用链式操作。    
132 15：dom操作：
133     a：创建节点：分为内部插入和外部插入。
134     内部插入：插入后是子元素
135     外部插入：插入后是兄弟元素
136     $(‘body‘).append(‘
div标签
‘);//给页面添加了一个div标签
137     或者也可以这样写：
138     var str=‘
div标签
‘;
139     $(‘body‘).append(str);
140     $(‘p‘).append(‘
div标签
‘);//向p标签的尾部插入div标签，div是p的所有子标签中排序在最后一个
141     $(‘
div标签
‘).appendTo(‘p‘);//结果和上一句一样
142 16：添加样式
143     
147     152     再比如：
153     
11111111
154     163 17：jquery中的事件和对象
164 18:jquery插件编写（类级别开发，几乎不用）：
165     $.zxit={  //zxit为命名空间
166     centerDiv:function(obj){  //centerDiv为我们自己自定义的插件方法
167         obj.css({
168             ‘top‘:($(window).height()-div.height())/2,
169             ‘left‘:($(window).width()-div.width())/2,
170             ‘position‘:‘absolute‘
171         });
172         
173         return obj;//返回和传入的都是jquery对象
174     }
175 }
176 19：jquery插件编写（对象级别开发，使用率99%）：
177     a：官方模板：
178         ;(function($){
179             $.fn.plugin=function(options){
180             var defaults = {
181             //各种参数，各种属性
182             }
183             var options = $.extend(defaults,options);
184 
185             this.each(function(){
186             //实现功能的代码
187             });
188             return this;
189             }
190         })(jQuery);