《锋利的jQuery》汇总

1，选择器：

基本选择器：

$("p"),  $("#btn"),  $(".class"),  $(this),  $("p.class")

层次选择器：

$("div>span")div中的所有span,     $("div~span")div后的所有 span元素           $("div+span")div后的第一个span元素

*基本过滤选择器：""

$("div:first"), $("div:last"),   $("div:not()"),   $("div:gt(2)"),  $("div:eq(2)"), $("div:lt(2)"),  $("div:even"), $("div:odd"), $("div:animate"),    $(":header"),       $(":focus") 

**内容过滤选择器：

$("div:contains(‘我’)")，$("div:has(p)"),  $("div:empty")不包含子元素的div,  $("div:parent")拥有子元素的div

**可见性过滤选择器：

$("div:hidden"), $("div:visible");

**属性过滤选择器：

$("div[id]"),  $("div[id=test]")

**子元素过滤选择器：

$("ul li:first-child"),  $("ul li:last-child"), $("ul li:only-child");

**表单对象选择器：

$("input:checked"), $("select options:selected"),  $("#form:disabled"), $("#form:enabled");

**表单选择器：

$(":input"), $(":text"), $(":submit"), $(":button"), $(":checkbox"), $(":radio"), $(":image"), $(":file"), $(":reset"), $(":password");

**可以混合选择器：

$("ul>li:gt(7):not(:last)")  表示ul的子元素li下，大于7，且不包含最后一个li的所有集合

 

 

2，事件：

$("#btn").click()   dblclick()    mouseenter()   mouseleave()    mousedown()   mouseup()  hover()   focus()  blur()失焦

3，函数：

**显示/隐藏   

$("ul li:first-child").hover(function(){  $("p").hide()   show()  toggle()  })

**淡入淡出

$(":button").mousedown(funciton(){ $("[href]").fadeIn()  fadeOut()  fadeTaggle()  fadeTo()颜色变淡 }) 

fadeIn(slow, opacity, function);

**滑进滑出

$("a[target="_blank"]").mouseenter(function(){

$("tr:even").slideDown()  slideUp() slideToggle();});

**动画：

$("button").dblclick(function(){

$("div").animate({left:100px;});} ) 需要给div设置position

让动画停止：

$("#btn").click(function(){
$("div").stop();})

4，jquery的链式操作：

$("button").css("color","red").slideUp(1000).slideDown(3000);

其原理是每次执行完毕一个操作，函数返回this指针：

function S(){ }

S.prototype={

fn:function(){
console.log(1);

return this;},

fn1:function(){
console.log(2);

return  this;}}

var  n=new S();

n.fn().fn1();  // 1 2

5,获取内容：

$(".div1").html()  获取带标签的内容  

$(".div1").text()  获取不带标签的内容 button

$(".input").val()  获取input表单中的输入值；

6，获取，设置元素的属性：

$(".div1").attr("class");        $(".div1").attr("class","div2")    

7，回调函数：允许添加的函数

hide(300, function(){ })  ，    attr("href", function(){} )

8，添加文本内容：

前增(还在这个文本内部）：$(".btn").click(funciton(){  $(".div1").prepend("<p>这是一段文字</p>")})

后增(还在这个文本内部）：append()

前增(不在文本中）：before() 

后增(不在文本中）：after(）

9，删除元素：

删除这个元素：$("div").remove();

删除这个元素中的容： $("div").empty();

过滤掉某个元素： $("div").remove(".div1");      //class name 为div1的div不被删除

10，操作class name:

添加class name: $("div").addClass("div1 div2");

删除class name: $("div ").removeClass("div1");

切换class name: $("div").toggleClass("div3");

11，操作css:

$(".btn").css({"color":"red","width":"100px"});

12，获取元素宽度，长度：

$(".div").width()     innerWidth() 包括内边距    outerWidth()包括内边距和外边框

13，遍历：

**向上遍历：

一个祖先：$("span").parent();

所有的祖先：$("span").parents();

一定范围内的祖先：$("span").parentsUntil("div");

**向下遍历：

直系儿子：$("div").child();

直系中的某个儿子：$("div").child("p.1");

寻找后代中某些：$("div").find("span");

返回所有后代：$("div").find("*");

-------------emmmm,遍历同胞。。。。。--------------

同级别所有同胞：$("div").siblings().css("color":"red");

同级别下一个同胞：next();        

同级别自己以下所有同胞：nextAll();    

  prev()    prevAll()  prevUntil()

***closest():   选择离自己最近的祖先，如果是自己，就选定自己；

14，过滤：

选中的第一个：$("div p").first() 

选中的最后一个：$("div p").first();

选中特定序号：$("div").eq(2)  选中第三个div

选中有这个特征的元素：$("div").filter(".classname")  

选中没有这个特征的元素：$("div").not(".classname");

15，jquery的ajax异步请求：

必须部署在http服务器中，可以使用xampp,放在hotdocs中运行；

load(url):

$("div").load("tt.txt");

get(url, callback):

$.get("test.php", function(data, status){alert(data+status);})

post(url, data, callback):

$.post("tt.php",{name:"bob",age:12},function(data,status){alert(data+status);});

----------------------------------------------------------------------------------------------------------

歇一会儿。。。。。

 

 

 

 

---------------------------------------------------------------------------------------------------------

1，dom和jquery对象之间的转换：

   **jquery转换成dom:

var  $div=$("div");

var  div=$div[0];获取到第一个div

或者：var  div=$div.get(0);

**dom转换成jquery:

var div1=document.getElementById("div");

var $div=$(div1);

2，jQuer在其他库之后导入：

可以使用jQuery.noConflict()把$控制权交给其他库，用jquery代替$

或者自定义：var  $j=jQuery.noConflict();

又或者：jQuery.noConflict()

jQuery(  function($){   又可以随意使用$了 }   )

3, 注意：

不能使用这种方式判断是否有这个对象：

if($("#btn"){  };

4，使用转义字符处理特殊字符：.  #  (  [

某id=bt#n

$("#bt#n")是错误的，应该这样$("#bt\\#n")写；

选择器中不要出现空格；

5  ,可以用来判断是否存在：

if($("li:eq(3)").is(":visible")) {  }如果第三个li可见则。

6，获取节点属性：

var m=$("a").attr("href");

7,利用工厂函数  $( )添加节点：

var  m=$(  "<li >hello</li>"  );

$("ul").prevpend(m);  在ul前添加一个li

8,插入节点：

$("A").append(B)  将B插入到A内部

$("A").appendTo(B); 将A插入到B内部

$("A").prepend(B);

$("A").prependTo(B);

9，设置属性：

$("#btn").attr("class","high");

10,：

addClass()：增加

removeClass()：移除属性，可以以空格的方式同时移除两个class;

toggleClass()：使得类名存在就删除，不存在就添加；

hasClass()：判断是否有这个class：;有就返回true,没有就返回false;等价于is();  is(":visible")是否可见；

11，html()带标签，text()不带标签，val()是input;

12，用css设置多个样式的方法：

css("width","100px")；仅仅设置一个属性；

css(  {    width:'100px',  height:"200px",  "background-color":"red"  })

注意：1，要在（）中加{ }   2，如果属性中有 连字符‘  -  ’一定要把属性加引号，如果不想加引号可以把属性用驼峰法写；没有连字符不加“ ‘也可以；3，设置多个属性的时候要用冒号：隔开。设置单个属性的时候用，隔开

13，获取元素的高度，宽度：

height()获取的是元素的实际高度，和css设置无关；

css("height");获取的是css设置的高度，可能是auto;

设置高度：height("10em"),  height(100);

$("#btn").offet(）返回相对窗口的偏移量对象，$("#btn").offet().left/ top获取偏移量；

scrollTop(),  scrollLeft()

14，加载事件：

$(document).ready(function(){   } );在DOM完成之后就开始执行，但是与dom树相关联的关联文件可能还没有加载完毕。后面的$(document).ready会追加，不会覆盖前一个；简写方式：$(function(){  })  或者：$().ready(function(){  } ).

$(window).onload(function(){   });在DOM和关联文件都加载完毕才执行。关联文件可能是图片等。后面的window.onload会覆盖前一个。

15，事件绑定：  

bind("click",function(){ });  和   click(function() {  }) 一样；

可以链式绑定bind:    $(".btn").bind("mouseover",  fn1). bind("mouseout", fn2);

16，合成事件：

hover(fn1，fn2)鼠标入，触发fn1事件，鼠标移出，触发fn2事件；替代mouseenter和mouseleave;

17，防止事件冒泡：

.click(function(event){   alert();  event.stopProPagation();  } )

不能阻止事件捕获，必须用js;

阻止默认事件：

$("submit").click(function(event){    验证表单：if(name==" "){  event.preventDefault; 阻止表单默认提交事件； } })

18，事件对象的属性

事件类型event.type ：

$("submit").click(function(event)  {   return   event.type    ;    }) 返回click;

被触发对象名event.target：

$("submit").click(function(event){  return  event.target      })返回input;

光标距离页面：event.pageX/Y

获取鼠标1左2中3右，键盘键值:  event.which;

获取alt键：event.metaKey;

19，移除绑定事件：

$(".btn").click(function(){

$(".div1").unbind("mouseover"); 移除.div1上所有的mouseover;

})

如果.div1的mouseover有多个函数，则必须为这些匿名函数取名字，作为参数传进unbind("mouseover",  name1);

20，仅执行一次的事件绑定函数one()：

$(".btn").one("click",  function(){ })  仅第一次点击有效；

21，tigger();

22，使用bind绑定多个事件：

.bind("mouseover mouseout", function(){
$(".btn").toggleClass("color");     }) 

使用toggleClass（）时候，需要把对应的class中的属性值后加!important;

.color{

background-color: red!important;

}才会有效；

23，利用命名空间快速删除多个绑定事件：

.bind("click",fn0);

.bind("click.plugin",fn1);

.bind("mouseover.plugin",fn2);

.bind("dblclick"  ,fn3);保留

.unbind(".plugin");删除所有命名空间为plugin的事件；

理论上：.click(function() {  $("/.div1").tigger("click !")  })代表只触发不包括命名空间的事件函数，但是不起作用。