Jquery 学习笔记《锋利的jquery》

一行代码解决导航栏的功能

$(".level1>a").click(function(){

$(this).addClass("current")  //给当前元素添加"current"样式
.next().show()              //下一个元素显示
.parent().sibing().children("a").removeClass("current") //父元素的同辈元素的子元素<a>移除"current"样式
.next().hide();
return false;                   //下一级隐藏

})

链式操作代码规范

1.对于同一个对象操作不超过3个操作的，可以直接写成一行

2.对于同一个对象操作比较多，建议一行一个操作

3.对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以适当考虑缩进

约定定义jquery和dom变量的风格

1.如果获取的是jquery对象，在变量前面加$

  var $variable=jquery对象

1.如果获取的是dom对象，

  var variable=dom对象

jquery对象和dom对象的转换

query对象转dom对象[index]和get(index)

1.var $cr=$("#cr");  //jquery对象

   var   cr=$cr[0];    //dom对象

2.var $cr=$("#cr");    //jquery对象

   var cr =$cr.get(0);   //dom对象

dom对象转jquery  $()

var cr=document.getElementById("cr"); //dom对象

var $(cr)=$(cr);  //jquery对象

检查某个元素在网页上是否存在

jquery 在使用的时候不用检查是否存在，即使不存在也不会报错，js如果不存在直接用，浏览器会报错

js 

<div>test</div>
<script>

if(document.getElementById("tt")){

.......
}

</script>

jquery

错误写法 if($("#tt")){.........}
正确写法 if($("#tt").length>0){.........}
        或 if($("#tt")[0]){.........}

选择器中的一些注意事项

1.选择器中含有"." ,"#" ,"(", "[" 等特殊字符

  解决方法是在前面只用转义符转义//

2.选择器中含有空格的注意事项

 var $t=%(".test :hidden");  //有空格的  表示选取class为test的元素里面的隐藏元素

 var $t=%(".test:hidden");  //没空格的  表示选取隐藏class为test的元素

toggle()

$toggleBn.toggle(function(){

//显示元素

}，function(){

//隐藏元素

})

节点操作补充

append()和after()区别

append()：向每个匹配元素内部追加内容

after()：向每个匹配元素之后追加内容（外部）

appendTo()方法也可以用来移动元素，移动元素收i按从文档中删除此元素，然后将该元素插入得到的文档的指定节点 

$(this).clone().appendTo()复制当前的节点，并将它追加到元素中，但被复制的新元素不具有任何行为，clone(true)则复制元素同时也复制绑定元素的行为

删除节点

1.remove():该节点的所有后代节点都同时删除，返回值是一个指向已经被删除的节点的引用，因此可以在以后再使用该元素

2.detach():与remove不同，所有的绑定事件，附加的数据都会保留下来

3.empty()：不是删除节点，它能清空节点的所有后代节点

toggleClass()控制样式上的重复切换，如果类名存在则删除，不存在则添加用法与toggle同

focus()相当于js的onfocus()     blur()js的onblur() 

$("#address").focus(function(){

  var text=$(this).val();
  if (text=="  请输入邮箱地址"){
   $(this).val("");

}

})

$("#address").blur(function(){

  var text=$(this).val();
  if (text=="  "){
   $(this).val("请输入邮箱地址");

}

})

defaultValue属性包含该表单元素的初始值

val()

val()不仅能设置元素的值，同时获取元素的值，还可以使select chexkbox radio 的相应的选项被选中 注attr()也可以

children()只考虑子元素不考虑后代元素

事件冒泡

事件冒泡解决方法
$("element").bind("click",function(event){

event.stopPropagation();    //停止事件冒泡
})

//网页中的元素有自己默认的行为，例如，单击超链接后会跳转，单击提交后表单会提交，有时候需要阻止元素的行为，将上面的停止事件冒泡改为阻止默认行为，即event.preventDefault() 

用attr()还是prop()

使用prop()方法来获取属性，返回值是标准的属性true/false 比如$("#checkbox").prop('disable'),不会返回“disable”或“ ”，只会返回true/false。当然赋值的时候也是如此，这样，便统一了所有的操作。无论是从语法上还是语义上

哪些属性用attr() 哪些用prop()

1.只添加属性名称该属性就会生效应该使用prop()

2.只存在true/false的属性应该用prop()

class=require

在表单中class属性为“required”的文本框是必须填写的，因此需要将它与其他非必需填写的表单元素加以区别，即在文本框后面追加一个红色的小星星标识，可以用append()方法来完成

$("form :input.required").each(function(){

var $require =$("<strong class='high'>*</strong>");//创建元素
$(this).parent().append($required);//添加到文档

})

$.each()

$.each()函数不同于jquery对象的each()方法，它是一个全局函数，不操作jquery对象，而是以一个数组或对象作为第一个参数，以一个回调函数作为第二个参数，回调函数拥有两个参数，第一个为对象的成员或数组的索引，第二个为对应变量或内容，在$.each()函数中，如果需要退出each循环，只需要返回false即可