JQuery基础汇总（二）

jQuery的DOM操作 DOM是Document Object Model的缩写，译为文档对象模型。根据W3C DOM规范，DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组件。 jQuery中另一个重要的组成部分就是封装了原生DOM的操作。 基本操作 html操作 html( )方法用于读取或设置指定元素的HTML代码，类似于原生DOM中的innerHTML属性。 //获取

元素的HTML代码 $(“input:eq(0)”).click(function(){ alert($(“p”).html() ); }); //设置

元素的HTML代码 $(“input:eq(1)”).click(function(){$(“p”).html(“你最讨厌的水果是?“); }); 文本操作 text( )方法用于读取或设置指定元素的文本内容，类似于原生DOM中的textContent属性。 //获取

元素的文本 $(“input:eq(0)”).click(function(){ alert($(“p”).text() ); }); //设置

元素的文本 $(“input:eq(1)”).click(function(){ $(“p”).text(“你最讨厌的水果是?”); }); 值操作 val( )方法用于读取或设置指定元素的value属性值，类似于原生DOM中的value属性。 //获取按钮的value值$(“input:eq(0)”).click(function(){ alert( $(this).val() ); }); //设置按钮的value值$(“input:eq(1)”).click(function(){ $(this).val(“我被点击了!”); }); 属性操作 attr( )方法用于获取或设置指定元素的属性，类似于原生DOM中的getAttribute()方法和setAttribute()方法。 removeAttr( )方法用于删除指定元素的属性，类似于原生DOM中的removeAttribute()方法。 //设置

元素的属性’title’ $(“input:eq(0)”).click(function(){$(“p”).attr(“title”,”选择你最喜欢的水果.”); }); //获取

元素的属性’title’ $(“input:eq(1)”).click(function(){ alert($(“p”).attr(“title”) ); }); //删除

元素的属性’title’ $(“input:eq(2)”).click(function(){ $(“p”).removeAttr(“title”); }); 样式操作 操作样式主要分成两种： 一种是使用style属性直接设置CSS中的属性 一种是使用class样式名称设置CSS。 attr( )方法操作 class本身就是元素中的一个属性，所以也可以使用设置属性方式来设置或删除class样式。 语法结构：element.attr(“class”,className) 值得注意的是：使用attr( )方法设置class样式时，无论之前是否包含class属性，之前设置的样式都会被覆盖。 //$(“#b1”).click(function(){ $(“#mover”).attr(“class”,”one”); }) addClass( )方法操作 addClass( )方法表示追加样式，也就是说，无论之前是否包含class样式，调用addClass( )方法只是在其基础上增加一个新的样式。而之前设置的样式依旧存在。 //$(“#b2”).click(function(){ $(“#mover”).addClass(“mini”); }) removeClass( )方法操作 removeClass( )方法表示删除样式，但该方法的使用有以下三种方式： removeClass()，默认不传递任何参数，表示删除所有样式。 removeClass(className)，传递一个样式名称，表示删除指定一个样式。 removeClass(className1 className2),传递多个样式名称，中间使用空格隔开，表示删除指定多个样式。 //$(“#b3”).click(function(){ $(“#mover”).removeClass(); }) toggleClass( )方法操作 toggleClass( )方法表示在没有样式与指定样式之间进行切换，效果相当于使用addClass()方法和removeClass()方法。 //$(“#b4”).click(function(){ // 在没有样式与指定样式之间切换 $(“#mover”).toggleClass(“one”); }) hasClass( )方法操作 hasClass( )方法表示指定元素是否包含指定样式。 值得注意的是：hasClass( )方法并不能判断是否包含样式，而是判断是否包含指定样式。 //$(“#b5”).click(function(){ // 判断是否含有某个指定样式 alert($(“#mover”).hasClass(“one”)); }) css( )方法操作 css( )方法也可以获取或设置CSS样式，但并不是通过class属性，而是通过style属性直接设置CSS中的属性。 获取样式： css(attrName)方法，用于获取当前style属性的值。 设置样式： css(attrName,attrValue)方法，用于设置当前style属性的值。但每次只能设置一个CSS中的属性。 css({attrName:attrValue,attrName:attrValue,…})方法，用于设置当前style属性的值。每次可以设置多个CSS中的属性。 遍历节点 获取父元素 parent( )方法可以获取指定元素的父元素。 parent()方法，不传递任何参数，是获取指定元素的父元素。 parent(selector)方法，是获取指定元素的符合selector选择器的父元素。 var$parent = $(“li:first”).parent(); //第一个

• 元素的父元素 获取子元素 children( )方法可以获取指定元素的子元素。 children()方法，不传递任何参数，可以获取指定元素的所有子元素。 children(selector)方法，是获取指定元素的符合selector选择器的子元素。 var $ul =$(“ul”).children(); alert( $ul.length );//

  元素下有3个子元素 获取兄弟元素 next( )方法是获取指定元素的下一个兄弟元素。 next()方法，不传递任何参数，是获取指定元素的下一个兄弟元素。 next(selector)方法，是获取指定元素符合selector选择器的下一个兄弟元素。 var $p1 =$(“p”).next(); alert( $p1.html() ); // 紧邻

  元素后的同辈元素 prev( )方法是获取指定元素的上一个兄弟元素。 prev( )方法，不传递任何参数，是获取指定元素的上一个兄弟元素。 prev(selector)方法，是获取指定元素符合selector选择器的上一个兄弟元素。 var $ul =$(“ul”).prev(); alert( $ul.html() ); // 紧邻

  • 元素前的同辈元素 siblings( )方法是获取指定元素的所有兄弟元素。 siblings( )方法，不传递任何参数，是获取指定元素的所有兄弟元素。 siblings(selector)方法，是获取指定元素符合selector选择器的所有兄弟元素。 var $p2 =$(“p”).siblings(); alert( $p2.html() ); // 紧邻

    元素的唯一同辈元素 查找指定后代元素 find(selector)方法，可以查找指定元素的符合selector选择器的后代元素。 var eles = $(“ul”).find(“li”); //查找ul元素下的所有li元素 其他操作 创建操作 按照原生DOM的思路，创建节点需要分别创建元素节点、文本节点和属性节点。 元素节点，使用jQuery的工厂函数$(HTML代码)来创建。 文本节点，使用jQuery的text( )方法进行设置文本，而不需要创建文本节点。 属性节点，使用jQuery的attr( )方法进行设置属性，而不需要创建属性节点。 其实，使用jQuery创建元素，并不需要按照原生DOM的思路进行创建。可以一步代码创建完整的元素。 //创建一个

  • 元素 包括元素节点,文本节点和属性节点 var $li =$(“
  • 香蕉
  • “); // 获取
    • 节点
    • 的父节点 var $parent =$(“ul”); // 添加到
      • 节点中，使之能在网页中显示 $parent.append($li); 插入操作 jQuery中的插入操作分为内部插入和外部插入。 内部插入 append( )方法，将append( )后面的元素插入在append( )前面指定元素的后面。 prepend( )方法，将prepend( )后面的元素插入在prepend( )前面指定元素的前面。 appendTo( )方法，将appendTo( )前面的元素插入在appendTo( )后面的元素的后面。 prependTo( )方法，将prependTo( )前面的元素插入在prependTo( )后面的元素的前面。 // append - append后面的节点被添加到append前面的节点的后面 $("#tj").append($(“#ms”)); // prepend - prepend后面的节点被添加到prepend前面的节点的前面 $("#tj").prepend($(“#ms”)); // appendTo - appendTo前面的节点被添加到appendTo后面的节点的后面 $("#tj").appendTo($(“#ms”)); // prependTo - prependTo前面的节点被添加到prependTo后面的节点的前面 $("#tj").prependTo($(“#ms”)); 外部插入 before( )方法，将before( )后面的元素插入在before( )前面的指定元素的前面。 after( )方法，将after( )后面的元素插入在after( )前面的指定元素的后面。 insertBefore( )方法，将insertBefore( )前面的元素插入在insertBefore( )后面的指定元素的前面。 insertAfter( )方法，将insertAfter( )前面的元素插入在insertAfter( )后面的指定元素的后面。 // before - before后面的节点被添加到before前面的节点的前面 $("#tj").before($(“#ms”)); // after - after后面的节点被添加到after前面的节点的后面 $("#tj").after($(“#ms”)); // insertBefore $("#tj").insertBefore($(“#ms”)); // insertAfter $("#tj").insertAfter($(“#ms”)); 删除操作 jQuery中的删除操作分别为remove( )方法和empty( )方法。 remove( )方法，删除自身元素及所有后代元素。 empty( )方法，删除所有后代元素，但保留自身元素。该方法适合完成清空操作。 $(“ul li:eq(1)”).remove(); // 获取第二个
      • 元素节点后，将它从网页中删除 $(“ul li”).remove(“li[title!=菠萝]”); //把
      • 元素中属性title不等于”菠萝”的
      • 元素删除 $(“ul li:eq(1)”).empty(); // 获取第二个
      • 元素节点后，清空此元素里的内容 替换操作 jQuery中的替换操作分别为replaceWith( )方法和replaceAll( )方法。 replaceWith( )方法，该方法前面的元素是被替换元素。 replaceAll( )方法，就是颠倒了的repalceWith( )方法。 $(“p”).replaceWith(“你最不喜欢的水果是?“); // 同样的实现： $(“你最不喜欢的水果是?“).replaceAll(“p”); 复制操作 jQuery中的复制操作使用的方法为clone( )方法，该方法与原生DOM中的复制节点的方法cloneNode( )在使用时极为相似。 原生DOM中的cloneNode(Boolean)方法，参数Boolean表示是否复制后代节点。 jQuery中的clone(Boolean)方法，参数Boolean表示是否复制事件。 $(“ul li”).click(function(){$(this).clone().appendTo(“ul”); // 复制当前点击的节点，并将它追加到
        • 元素 $(this).clone(true).appendTo(“ul”); // 注意参数true //可以复制自己，并且他的副本也有同样功能 }) jQuery中的事件 页面加载 原生DOM中的事件具有页面加载的内容onload事件，在jQuery中同样提供了对应的内容ready()函数。 ready与onload之间的区别： onload ready 没有简写方式 具有简写方式 当HTML页面所有内容加载完毕后才执行onload 当DOM节点加载完毕后就执行ready 一个HTML页面只能编写一个onload 一个HTML页面允许同时编写多个ready ready()的编写方式：$(document).ready(function(){}); $().ready(function(){});$(function(){}); 事件绑定 jQuery中提供了事件绑定与解绑机制，类似于原生DOM中的addEventListener()方法。 jQuery的事件绑定： 单事件绑定 单事件绑定就是指为指定元素绑定一个指定的事件，例如click、change等。

          什么是jQuery?

          jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
          $("#panel h5.head").bind("click",function(){ var$content = $(this).next("div.content"); if($content.is(":visible")){ $content.hide(); }else{$content.show(); } })

          多事件绑定
          多事件绑定就是为指定元素同时绑定多个指定的事件，例如同时绑定mouseover和mouseout事件等。

          什么是jQuery?

          jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
          $("#panel h5.head").bind("mouseover mouseout",function(){ var$content = $(this).next("div.content"); if($content.is(":visible")){ $content.hide(); }else{$content.show(); } });

          模拟操作

          模拟操作就是指通过程序模拟用户在页面中的操作，比如用户点击某个按钮的事件完成一个效果，jQuery中可以通过该方法模拟用户点击按钮事件。也就是说，不需要用户的操作行为，而是我们通过程序来模拟用户操作。

          点击我

          $('#btn').bind("click", function(){$('#test').append("

          我的绑定函数1

          "); }).bind("click", function(){ $('#test').append("

          我的绑定函数2

          "); }).bind("click", function(){ $('#test').append("

          我的绑定函数3

          "); }); $('#btn').trigger("click");

          事件冒泡

          什么是事件冒泡

          在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

          阻止事件冒泡

          DOM标准：event.stopPropagation()
          IE: event.cancelBubble=true
          事件对象

          什么是事件对象

          事件是一种JavaScript结构，它会在元素获得处理事件的机会时被传递给被调用的事件处理程序。这个对象中包含与事件相关的信息，也提供了可以影响事件在DOM中传递进程的一些方法。

          事件对象的常用属性

          srcElement/target : 事件源对象
          eventPhase : 事件所处的传播阶段
          clientX/offsetX/pageX/screenX/x：事件发生的X坐标
          clientY/offsetY/pageY/screenY/y：事件发生的Y坐标
          which/keyCode/charCode : 键盘事件中按下的按键
          button：鼠标哪个按键被按下了
          cancelBubble ：是否取消事件冒泡
          returnValue : 是否阻止事件默认行为
          阻止默认行为

          所谓默认行为，就是指页面中默认具有的一些行为，例如表单提交、连接跳转等效果。

          event.preventDefault();
          return false;
          与其他JS库共存
          第一种方式
          /*
          * 先引入其他JS库,后引入jQuery
          * * “$”符号属于其他JS库 * 解决冲突 * * jQuery中 - “$”符号指代jQuery
          * * jQuery中不再使用”$”符号 */ jQuery(document).ready(function(){ console.log(“this is ready.”); }); 第二种方式 jQuery(document).ready(function($){
          // 在当前函数中使用”$”符号 - jQuery }); // “$”符号 - 其他JS库
          第三种方式
          (function($){ // “$”符号 - jQuery })(jQuery); // “$”符号 - 其他JS库
          第四种方式
          jQuery.noConflict();
          jQuery(function($){ console.log($(“p”).text()); }); 第五种方式 jQuery.noConflict(); (function($){
          console.log($(“p”).text());
          })(jQuery);