jQuery常用方法总结

jQuery常用方法总结

1.入口函数写法

$(document).ready.(function(){});
jQuery.(document).ready.(function(){});
$(function(){});  //推荐第三种，更简便
jQuery(function(){});

2.jquery的冲突问题：在jQuery中使用$字符代表jQuery对象，但是其他js框架也可能使用该符号

其他框架也会使用$

• 使用方法一：

   $.noConflict();
   jQuery(document).ready(function(){
   jQuery("button").click(function(){
       jQuery("p").text("jQuery 仍然在工作!");
   });
   });
  

• 方法二：或者创建自己的缩写

  var jq = $.noConflict();
    jq(document).ready(function(){
    jq("button").click(function(){
        jq("p").text("jQuery 仍然在工作!");
    });
    });
  

 * 方法三：将$参数传递给ready

  ```js

 		$.noConflict();
 		   jQuery(document).ready(function(){
 		   jQuery("button").click(function(){
 		       jQuery("p").text("jQuery 仍然在工作!");
 		   });
 		   });

3.操纵属性或属性节点 attr(),prop()

任何元素都具有属性，但是只有HTML元素才具有属性节点

属性

对象身上保存的变量

如何操作属性

	function Persion(){
		var name;
	} 
	var p=new Persion();
	p.name="wxh";
        p["name"]="wxh";

属性节点

在新建HTML元素时为元素添加的属性
<span name="wxh"></span>

attr()

传递一个参数代表获取，传递两个参数代表更改
例如: $("div").attr("class"); 代表获取类名
$("div").attr("class","abc");代表设置类名

prop()

用法同attr相同

attr()与prop()两者间的区别

attr只能返回属性节点，prop既能返回属性又能返回属性节点
但是如果返回的属性节点值为布尔值用 attr 较合适因为

 var a=$("input").attr("checked");
 var b=$("input").prop("checked");
 console.log(a);//a为undefined/checked
 console.log(b);//b为true/false

常见的返回布尔值的属性节点 checked selected disabled

删除属性节点

removeAttr()
removeProp()

4.css操纵类

• addClass(class|fn) 增加类

• removeClass([class|fn]) 删除类

• toggleClass(class|fn[,sw]) 切换类

    var arr=document.getElementsByTagName("button");
	arr[0].onclick=function(){//增加类，同时增加两个
		$("div").addClass("class1 class2");
	};
	arr[1].onclick=function(){//删除类
		$("div").removeClass("class1");
	};
	arr[2].onclick=function(){//切换类
	    $("div").toggleClass("class1");//若无则加上若有则减去
		$("div").toggleClass("class1","class3");//两类切换
	};
   });

5.文本值相关操作

• html([val|fn])

• text([val|fn])

• val([val|fn|arr])

		$("div").html("<p>我是一个段落</p>");//写入一个元素，相当于js中innerHTML
		console.log($("div").html());//得到html元素
		$("div").text("helloWorld");//设置文本
		console.log($("div").text());//得到文本
		$("input").val("helloWorld");//设置输入框内容
		console.log($("input").val());//得到输入框内容

6.操作css样式

设置

   //单个设置
   $("div").css("width","100px");
   $("div").css("height","100px");
   $("div").css("background","red");
   //链式设置
   $("div").css("width","200px").css("height","200px");
   //批量设置
   $("div").css({
	   width:"100px",
	   height:"100px",
	   background:"black"
   });

获取

$("div").css("width");

获取设置宽度高度

height();width();innerHeight();innerWidth();outerHeight();outerWidth();//所得值设置值均不带单位

获取/设置元素距离窗口的偏移位

//获取
$("wxh").offset().left;
//设置
$("wxh").offset({
  left:100,
  top:0
});

获取元素距离父元素的位置

$("wxh").position().left;
注意：只能获取不能设置

设置获取滚动条的偏移位

设置相对顶部的偏移位
scrollTop();scrollTop(300);
设置相对于左侧的偏移位
scrollLeft();scrollLeft(300)

7.绑定事件

• eventname:事件名称

  编码效率略高，但是部分功能jQuery没有实现
  $("button").click(function(){ alert(1); });

• on

  编码效率略低，所有js事件都可以添加
  $("button").on("click",function({ alert(1); });
  注意：两个都可以添加多个相同或不同的事件不能覆盖

删除绑定事件

      function test1(){
         alert("test1");
      } 
      function test2(){
         alert("test2");
      }
      $("button").on("click",test1);
      $("button").on("click",test2);
      $("button").off("click",test1);
      $("button").off("click");

off()一个参数代表删除指定类型事件，两个参数代表删除指定类的指定类型事件

8.事件冒泡和默认行为

事件冒泡

<div class="father">
   <div class="son"></div>
</div>

为两个嵌套的div添加点击事件监听

$(".father").click(function(){
   alert("father");
});

$(".son").click(function(){
   alert("son");
});

若点击son会弹出两个对话框，若要避免这种情况

1. 在选择son的回调函数中返回false:return false;
2. 为son的回调函数增加参数，同时调用阻止事件冒泡ev.stopPropagation()

   $(".son").click(function(ev){
   alert("son");  ev.stopPropagation(); });
   

阻止默认行为

例如为a标签增加herf链接，默认点击跳转

1. 需要阻止的事件中添加:return false;
2. 为回调函数增加参数同时在函数内增加方法：ev.preventDefault();

9.节点

添加节点

内部
append(content|fn) 在元素内部最后添加新元素
appendTo(content) 把新元素添加到元素内部
prepend(content|fn) 在元素内部最前添加新元素
prependTo(content) 把新元素添加到元素内部最前
外部插入
after(content|fn) 在元素之后增加新元素
before(content|fn) 在元素之前增加新元素

删除节点

empty()删除指定元素的内容和子元素
remove(".abc")删除指定元素

替换节点

replaceWith(content|fn)
替换选中元素

复制节点

      $("button").eq(0).click(function(){
       var $li=$("li").eq(0).clone(false);
       $("ul").append($li);
      });
      $("button").eq(1).click(function(){
        var $li=$("li").eq(0).clone(true);
       $("ul").append($li);
      });
      $("li").click(function(){
          alert(1);
      });
    });

后面参数为false是浅复制，true是深复制
浅复制只会复制内容不会复制事件

10.事件委托

事件委托的意义：如果为页面中所有的div设置点击弹出 alert("我是div")
使用append()或html()方法动态添加新的 div 元素则这个不会有弹出框,则为把新增的div委托给它一直存在的父元素

$().delegate(selector,[type],[data],fn)

指定元素(属于被选元素的子元素)添加一个或多个事件处理程序，并规定这是事件发生时运行的函数

$("body").delegate("textarea","input",function(){
      alert("检测到文本框输入");
    });

代表含义 body内的子元素 textarea 输入时执行以下函数，弹出对话框

11.寻找父元素

parent/parents

• parent:取得一个包含所有匹配元素的唯一父元素的集合,直接父元素
• parents:匹配一个所有匹配元素的元素集合,父元素或父元素的父元素等更高级
  $("span").parents("p");

12.find

寻找后代元素

<div class="father">
  <div class="son">
    <div class="son_son"></div>
  </div>
</div>

$(".father").find("son_son");

查找子代元素 children()

13. siblings

找到某元素同级的所有元素集合

<ul>
  <li class="a"></li>
  <li></li>
  <li class="b"></li>
  <li class="b"></li>
  <li></li>
  <div></div>
</ul>

 $(".a").siblings();//得到ul内除该元素本身的所有元素,包括div
 $(".a").siblings(".b")//得到ul内除该元素自身的所有class为 b 的元素

14.each

<ul>
  <li class="a"></li>
  <li></li>
  <li class="b"></li>
  <li class="b"></li>
  <li></li>
  <div></div>
</ul>

var arry = $("ul").find("li");
arry.each(function(i){//i代表对应集合的下标
});