锋利的jquery

第1章 认识jquery

1.jquery对象和DOM对象的相互转换

jquery对象是一个类似数组的对象

var $cr=$("#cr");
var cr=$cr[0];
//var cr=$cr.get(0);

 

第2章 jquery选择器

css选择器是找到元素后添加样式

jquery选择器是找到元素后添加行为。

$("#tt").css("color","red");

选择器中含有特殊字符的注意事项 （转义字符）

<div id="id#b">bb</div>
<div id="id[1]">cc</div>
$("#id\\#b");
$("#id\\[1\\]");

 

选择其中含有空格的注意事项（后代选择器和过滤选择器的不同）

选择其中的空格也是不容忽视的

 

第3章 jquery中的DOM操作

查找节点

   find()会在元素内寻找匹配元素，filter()则是筛选元素，一个是对它的子集操作，一个是对自身集合元素进行筛选。

创建节点，插入节点

删除节点 remove(),detach(),empty()

复制节点 clone(true)

替换节点 replaceWith(),replaceAll()

包裹节点 wrap(),wrapAll(),wrapInner()

属性操作 attr(),prop()【从1.6版本开始】

       ////对input的disabled属性有问题

       ////哪些属性应该用attr()访问，哪些应该用prop()访问呢？

            第一个原则：只添加属性名称该属性就会生效应该使用prop();

            第二个原则：只存在true/false的属性应该使用prop()

            按官方说明，如果是设置disabled和checked这些属性，应使用prop()方法

样式操作 css(),addClass(),removeClass(),hasClass(),toggleClass()

设置和获取HTML文本和值  text(),html(),val()

遍历节点 children(),next(),pre(),siblings(),closest(),parent(),parents()

CSS-DOM操作 

关于元素定位几个经常用到的方法

offset(),position(),scrollTop(),scrollLeft()

 

第4章  jquery中的事件和动画

事件绑定 bind(),trigger()

合成事件 hover(),toggle()

事件冒泡 阻止事件冒泡 event.stopPrapagation(),阻止默认行为event.preventDefault()，全部 return false;

$("a").click(function(event){
alert(event.type);//获取事件类型
return false;//阻止链接跳转
});

event.targe 的作用是获取到触发事件的元素

$("a[href='http://google.com']").click(function(event){
var tg=event.target;//获取事件对象
alert(tg.href);
return false;//阻止链接跳转
});

event.pageX和event.pageY

获取到光标相对于页面的x坐标和y坐标

移除事件 unbind()   one()方法 one(type, [data], fn)

常用模拟 trigger() ，会执行浏览器默认操作。如果只想触发绑定的focus事件，可以使用triggerHandler()

添加事件命名空间，便于管理——在所绑定的事件类型后面添加命名空间，这样在删除事件时只需要指定命名空间即可。

相同事件名称，不同命名空间执行方法

$("button").click(function(){
$("div").trigger("click!"); //注意感叹号
//匹配所有不包含在命名空间里的click方法
//$("div").trigger("click"); //去掉感叹号，两者都触发
});

动画

show(),hide()

fadeIn(),fadeOut()

slideUp(),slideDown()

animate()   执行具有先后顺序，动画队列

动画回调函数  对非动画方法实现排队

$("#panel").click(function(){
$(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000,function(){
$(this).css("border","5px solid blue");
});
});

callback回调函数适用于jquery所有的动画效果方法

停止动画和判断是否处于动画状态

stop([clearQueue],[gotoEnd])可选参数，都为boolean值

分别代表，清空未执行完的动画队列   直接跳到动画末尾状态

$("#panel").hover(function(){
    $(this).stop(true)
              .animate({height:"150"},200)
              .animate({width:"300"},300)
},function(){
    $(this).stop(true)
              .animate({height:"22"},200)
              .animate({width:"60"},300)
});         

jquery只能设置正在执行的动画的最终状态

在使用animate()方法时，要避免动画累积而导致的动画与用户的行为不一致。当用户快速在某个元素上执行animate()动画时，就会出现动画累积。

解决方法是判断元素是否处于动画状态。

if(!$(element).is(":animated")){//判断元素是否正处于动画状态
//如果当前没有进行动画，则添加新动画
}

延迟动画delay()

其他动画方法

toggle(speed,[callback])

slideToggle(speed,[easing],[callback]) //通过高度变化来切换匹配元素的可见性

fadeTo(speed,opacity,[callback]) // 把元素的不透明度以渐进的方式调整到指定值

fadeToggle(speed,[easing],[callback]) //通过不透明度变化来切换匹配元素的可见性

 

第5章  对表单表格的操作

input:focus,textarea:focus{
border:1px solid $f00;
background:#fcc
}
//低版本方案
$("element").focus(function(){
$(this).addClass();
})