jquery基础知识-CSDN博客

  1 1:jquery($(document).ready())可以加载多个ready函数，而原始的js(window.onload)只能加载一次onload
  2 2:用dom对象得到的对象不能使用jquery中的方法，比如var p=document.getElementById("id"),此时p不能这样使用p.html(),而应该使用innerHTML。同样，jquery对象不能使用dom中的方法，如果jquery中改写了dom中的方法，则可以使用dom中的方法。
  3 3：jquery对象转换为dom对象的方法：  4 <input type="text" id="a" value="111111">  5 var input=$('#a')  6 a：使用索引，input[0].value  7 b：使用get,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 <script>  14 var sowhat = jQuery.noConflict()  15  或者直接jQuery.noConflict()，然后用jQuery调用方法即可，注意Q不能小写，默认是大写  18 </script>  19 6： >号表示子标签，项目中一般不用css表达式，因为它不停地计算会使浏览器特别卡  20 $(function(){  21 $('div>a').css('color','red');  22  });  23 <div>  24 <a href="###">abcdefg</a>  25 <p><a href="###">1234567890</a></p>  26 </div>  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：class ：$('.p1')  34 eg:$('.p1').css('color','red');//代替了.p1{color:red;}  35 3：标签选择器（不推荐*选择器）  36 eg:$('p').css('color','red');//代替了p{color:red;}  37 4：多重选择器  38 eg： <span>123</span>  39 <div>12312</div>  40 <script>  41 $(function(){  42 $('span,div').css('color','red');  43  });  44 </script>  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:<p title="js">safs</p>  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('#second').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<tr.length;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标签</div>');//给页面添加了一个div标签 137 或者也可以这样写： 138 var str='<div>div标签</div>'; 139 $('body').append(str); 140 $('p').append('<div>div标签</div>');//向p标签的尾部插入div标签，div是p的所有子标签中排序在最后一个 141 $('<div>div标签</div>').appendTo('p');//结果和上一句一样 142 16：添加样式 143 <style> 144 .bg{background:red;} 145 .white{color:#fff;} 146 </style> 147 <script> 148 $('p').addClass('bg white'); 149 $('p').removeClass('bg white'); 150 //toggleClass();//切换样式 151 </script> 152 再比如： 153 <p>11111111</p> 154 <script> 155 /*$('p').css('background','red').css('color','white').css('border','10px solid #abcdef');*/ 156 $('p').css({ 157 'backgroundColor':'red', 158 'color':'white', 159 'border':'10px solid #abcdef' 160 }); 161 //建议大家把css属性名用引号引起来 162 </script> 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);