JQuery小知识点代码 1、链式操作 $(function(){ /*var oDiv = $(‘#div1’); oDiv.html(‘hello’); oDiv.css(‘background’,’red’); oDiv.click(function(){ alert(123); });*/ $(‘#div1’).html(‘hello’).css(‘background’,’red’).click(function(){ alert(123); }); }); 2、取值赋值合体 $(function(){ //oDiv.innerHTML = ‘hello’; //赋值 //alert( oDiv.innerHTML ); //取值 在JQuery中，用同一个函数html（）同一个方式就实现了。 //$(‘#div1’).html(‘hello’); //赋值 //alert( $(‘#div1’).html() ); //取值 css(‘width’,’200px’) css(‘width’) }); $(function(){ $(‘li’).html(“sssss”); ; //当一组素的时候，取值是一组中的第一个.赋值则可以全部改变！ //$(‘li’).get().innerHTML(‘hello’); //当一组素的时候,赋值是一组中的所有素 //$(‘li’).get(0).innerHTML = “ssss”; //上面一种经测试有问题，这种才能通过。 }); /*window.onload = function(){ var obj = document.getElementsByTagName(“li”)[0]; //alert(obj); obj.innerHTML = “html”; }*/ 3、attr //jquery中的css()是用来操纵style{}的，而attr()是加在标签内部的，attr()的权重比css()要大，它会覆盖css()的样式 $(function(){ //alert($(‘div’).attr(‘title’)); $(‘div’).attr(‘title’,’456′); $(‘div’).attr(‘class’,’box’); }); 4、filter，not，has //filter : 过滤 //not : filter的反义词 $(function(){ //$(‘div’).filter(‘.box’).css(‘background’,’red’); //find()方法是获得在当前结果集中每个素的后代。参数（选择器、jquery集合或DOM素）做为过滤条件，满足过滤条件的则保留，保留的是后代。 //$(‘div’).find(‘.box’).eq(1).css(‘background’,’red’); //$(‘div’).has(‘.box’).css(‘background’,’red’);//而has()方法中，参数只做为条件，符合条件的，它的前素加入新的结果集，而不是后代加入新的结果集。并且是所有符合的前辈素。 //$(‘div’).not(‘.box’).css(‘background’,’red’); //$(‘li’).filter(‘[title=hello]’).css(‘background’,’red’); $(‘div’).filter(‘[class != box]’).css(‘background’,’red’); //alert( $(‘#h’).index() ); //索引就是当前素在所有兄弟节点中的位置,从0开始； }); 5、addClass，removeClass $(function(){ $(‘div’).addClass(‘box2 box4’);//让它属于多个类，拥有多各类的样式； $(‘div’).removeClass(‘box1’); }); 6、append,appendTo,appendChild,removeChild,remove,empty; 1，追加与删除HTML素 创建HTML素 var newEle =document.createElement(p); 创建的素追加到别的素之后： A. appendChild(B)： 若B是新建的素，在A素的所有子素的末尾增加素B 。 若B页面中已存在的素，则这句语句产生的效果是将B素移动到了A的子素中。 appendChild（）这个函数和innerHTML这个属性的效果差不多，区别在：1 innerHTML运行效果会比appendChild慢（也许是需要解析的原因） 2 innerHTML比appendChild要方便些，像写字符串似的。 还有另外两个素： append() 和appendTo()这两个函数呢是jquery的函数。使用模式为： append()前面是要选择的对象，后面是要在对象内插入的素内容。 appendTo()把所有匹配的素追加到另一个指定的素素集合中。实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，返回值是所有被追加的内容，而不仅仅是先前所选中的素。所以，要选择先前选中的素，需要使用 end()方法，参见例二。 example1： //将p标签的所有追加到div标签集合中； $(function(){ /*$(‘div’).click(function(){ alert(123); });*/ /*$(‘div’).on(‘click’,function(){ alert(123); });*/ /*$(‘div’).on(‘click mouseover’,function(){ alert(123); });*/ /*$(‘div’).on({ ‘click’ : function(){ alert(123); }, ‘mouseover’ : function(){ alert(456); } });*/ $(‘div’).on(‘click mouseover’,function(){ alert(123); $(‘div’).off(‘mouseover’); }); }); 8.$(function(){ /*$(‘div’).click(function(ev){ //ev : event对象 //ev.pageX(相对于文档的) : clientX(相对于可视区) //ev.which针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮。 ev.preventDefault(); //阻止默认事件 ev.stopPropagation(); //阻止冒泡的操作 return false; //阻止默认事件 + 阻止冒泡的操作 });*/ $(‘div’).one(‘click’,function(){ //只执行事件一次 alert(123); }); }); 浏览器的默认行为： 你在空白的地方按 空格键 页面会向下滚动 安方向键 滚动条也会滚动 如果你用键盘的方向键和空格键 来做 在线音乐 控制音量切换歌曲暂停什么的，你就需要阻止浏览器默认行为 冒泡事件： 比如子盒子和父盒子都有onclick事件，那么当子盒子时，不仅会出发子盒子的事件，父盒子以及祖宗盒子的事件都会触发！ 9、offset和position()，offsetParent $(function(){ //var div22 = document.getElementById(‘div2’); console.log(“22” ); //js中内素外边框到父素内边框左侧距离 //alert( $(‘#div2’).offset().left ); //到屏幕的左距离;offset()方法返回或设置匹配素相对于文档的偏移（ 位置）。返 回第一个匹配素的偏移坐标。 //该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见素有效。 //alert( $(‘#div2’).position().left ); //到有定位的父级的left值,把当前素转化成类似定位的形式 position()函数用于返回当前匹配素相对于其被定位的祖辈素的偏移，也就是相对于被定位的祖辈素的坐标。该函数只对可见素有效。 所谓”被定位的素”，就是素的CSS position属性值为absolute、relative或fixed(只要不是默认的static即可)。 该函数返回一个坐标对象，该对象有一个left属性和top属性。属性值均为数字，它们都以像素(px)为单位。 与offset()不同的是：position()返回的是相对于被定位的祖辈素的坐标，offset()返回的是相对于当前文档的坐标。此外，position()函 数无法用于设置操作。如果当前素的祖辈素全部都是默认定位(static)，那么该函数返回的偏移位置与offset()函数相同。 }); 使用jQuery素位置时，我们会使用position()或offset()方法，两个方法都返回一个包含两个属性的对象－左边距和上边距，它们两个的不同点在于位置的相对点不同。 可以看看下边的图： 
从图中我们可以大体看出两者的区别。position()相对于它最近的具有相对位置(position:relative)的父级素的距离，如果找不到这样的素，则返回相对于浏览器的距离。 offset()始终返回相对于浏览器文档的距离，它会忽略外层素。 offsetParent： //parent() : 父级 //offsetParent() : 有定位的父级，即只要定位position：不是static； //$(‘#div2’).parent().css(‘background’,’blue’); $(‘#div2’).offsetParent().css(‘background’,’blue’); 10. hover //hover第一个参数就是鼠标放上执行的函数，第二个是鼠标离开执行的函数； //当鼠标移动到一个匹配的素上面时，会触发指定的第一个函数。当鼠标移出这个素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见 错误） 11、paresents(),closest();nextAll(),preAll(),Util()，clone(),animate() //parents() : 当前素的所有祖先节点，参数就是筛选功能 //closest() : 最近的指定的祖先节点(包括当前素自身),必须要写筛选的参数,只能找到一个； //siblings() : 找所有的兄弟节点，参数也是筛选功能 //nextAll() : 下面所有的兄弟节点，参数也是筛选功能 //prevAll() : 上面所有的兄弟节点 //Until() : 截止 jQueryObject.clone( withDataAndEvents [, deepWithDataAndEvents ] ) 参数描述 withDataAndEvents 可选/Boolean类型是否同时复制素的附加数据和绑定事件，默认为。 deepWithDataAndEvents 可选/Boolean类型是否同时复制素的所有子素的附加数据和绑定事件，默认值即为参数的值。 animate() : //第一个参数 : {} 运动的值和属性 //第二个参数 : 时间(运动快慢的) 默认 : 400 //第三个参数 : 运动形式 只有两种运动形式 ( 默认 : swing(慢快慢) linear(匀速) ) //第四个参数 : 回调函数 $(function(){ $(‘#div1’).click(function(){ $(this).animate({width : 300 , height : 300} , 4000 , ‘linear’,function(){ alert(123); }); $(‘#div2’).animate({width : 300 , height : 300} , 4000 , ‘swing’); }); }); $(‘#div2’).click(function(){ //$(‘#div1’).stop(); //默认 : 只会阻止当前运动；不是所有运动都阻止； //$(‘#div1’).stop(true); //阻止后续的运动； //$(‘#div1’).stop(true,true); //可以立即停止到指定的目标点 $(‘#div1’).finish(); //立即停止到所有指定的目标点 }); 12.事件委托，delegate，undelegate，on /*$(‘li’).on(‘click’,function(){ this.style.background = ‘red’; });*/ $(‘ul’).delegate(‘li’,’click’,function(){ this.style.background = ‘red’; $(‘ul’).undelegate(); }); 13.主动触发：trigger $(‘#div1’).on(‘click’,function(){ alert(123); }); $(‘#div1’).trigger(‘click’); //主动触发被选素的某一事件； 14工具方法 //$().css() $().html() $().val() : 只能给JQ对象用 //$.xxx() $.yyy() $.zzz() : 不仅可以给JQ用，也可以给原生JS用 : 叫做工具方法 //inArray() : 类似于 indexOf //alert( $.inArray(‘b’,arr) );//在数组arr中找b的位置； //$.type() : 也是判断类型 alert(‘(‘+$.trim(str)+’)’);//去除前后空格；原生的得写正则 //proxy() : 改变this指向的 function show(n1,n2){…} //$.proxy(show , document,3)(4); //$.proxy(show , document）（3，4);//可以这样传参数，但是这样相当于函数调用，直接执行。 $(document).click( $.proxy(show,window,3,4) );//可以这样传参数，这样是在事件操作时执行； //noConflict() : 防止冲突的 /*var miaov = $.noConflict(); var aDiv = document.getElementsByTagName(‘div’); //；类似数组，并不是真正数组； $.makeArray(aDiv).push();//将类似数组转换成数 15.插件 //即使插件写错，也不影响库的使用， //$.extend : 扩展工具方法下的插件形式 $.xxx() $.yyy() //$.fn.extend : 扩展到JQ对象下的插件形式（只能jq对象用） $().xxx() $().yyy() $.extend({ leftTrim : function(str){ return str.replace(/^s+/,”); }, rightTrim : function(){}, aaa : function(){ alert(1); }, bbb : function(){} }); 16.绑定事件 <script> $(document).ready(function(){ //bind绑定单击事件； $(‘p’).bind(‘click’,function(){ alert($(this).text())}); $(‘p’).mouseover(function(){ $(this).css(‘background’,’red’);}); //unbind移除绑定事件，可以同时移除好几个； $(‘p’).unbind(‘click mouseover’); }) </script> <body> <p>这是个标签</p> </body> </html> //bind和unbind事件； /*使用绑定事件可以防止事件冒泡。 对于表单submit事件，为了防止提交后跳转（默认事件？），需要.preventDefault（）； 为了阻止冒泡，click事件的冒泡，需要.stopPropagation(); 使用bind，只要在bind参数里加true或false就可以了。默认是true；(试验中，发现只有不写第三个参数时编译才通过。）*/ // //one事件，只执行一次事件，就销毁事件； //delegate事件,对新增加的标签添加事件；用click效果一样，但是没有为新增的标签加事件的功能；undelegate； /* $(‘p’).delegate(‘p’,function(){ $(‘body’).append(‘<p>我是新增的标签</p>’); }); */ 官方推荐用delegate时用on代替，undelegate用off代替，实际用的不多；//用bind还可以为事件绑定命名空间，这样在unbind时就可以删除指定命名空间的事件。.bind(‘click.mingmingkongjian’,function(){}); 四种方式的异同和优缺点（bind（），on（），delegate（），live（）；） 相同点： 1.都支持单素多事件的绑定；空格相隔方式或者大括号替代方式; 2.均是通过事件冒泡方式，将事件传递到document进行事件的响应； 比较和联系: 1.bind()函数只能针对已经存在的素进行事件的设置；但是live(),on(),delegate()均支持未来新添加素的事件设置； 2.bind()函数在jquery1.7版本以前比较受推崇，1.7版本出来之后，官方已经不推荐用bind()，替代函数为on(),这也是1.7版本新添加的函数，同样，可以用来代替live()函数，live()函数在1.9版本已经删除； 3.live()函数和delegate()函数两者类似，但是live()函数在执行速度，灵活性和CSS选择器支持方面较delegate()差。 4.bind()支持Jquery所有版本；live()支持jquery1.8-；delegate()支持jquery1.4.2+；on()支持jquery1.7+； 总结 如果项目中引用jquery版本为低版本，推荐用delegate(),高版本jquery可以使用on()来代替
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/36451.html
