《锋利的jQuery》笔记

发表于   |   分类于   |     |   阅读次数

第一章 认识jQuery

jQuery对象转DOM对象方法，[index]和get(index)

1
2
3
4
5
6
7
8
var cr = $cr[0];  
var cr = $cr.get[0]; 
``` 
### DOM对象转jQuery对象方法，只需用$()包装即可
```JavaScript
var $cr = $(cr);

解决jQuery和其他库的冲突

  • jQuery库其他库之后导入
    1. 调用jQuery.noConflict()函数
    2. 自定义快捷方式
1
var $j=jQuery.noConflict();
  • jQuery库在其他库之前导入
    直接使用jQuery即可

第二章 jQuery选择器

基本选择器

  • #id
  • .class
  • element
  • *
  • selector1,selector2,……,selectorN

层次选择器

  • $(“ancestor descendant”)
  • $(“parent>child”)
  • $(“prev+next”)=next();
  • $(“prev~siblings”)=nextAll();

过滤选择器

（一）基本过滤选择器

  • :first
  • :last
  • :not(selector)
  • :even
  • :odd
  • :eq(index)(index从0开始，下同）
  • :gt(index)
  • :lt(index)
  • :heater
  • :animated
  • :focus

（二）内容过滤选择器

  • :contains(text)
  • :empty(不包含子元素或文本的空元素）
  • :has(selector)
  • :parent(含有子元素或文本的元素）

（三）可见性过滤选择器

  • :hidden
  • :visible

（四）属性过滤选择器

  • :[attribute]
  • :[attribute=value]
  • :[attribute!=value]
  • :[attribute^=value]
  • :[attribute$=value]
  • :[attribute*=value]
  • :[attribute|=value]
  • :[attribute~=value]（空格）
  • :[attribute1][attribute2][attributeN]

（五）子元素过滤选择器

  • nth-child(index/even/odd/equation)（index从1开始）
  • :first-child
  • :last-child
  • :only-child

（六）表单对象过滤选择器

  • :enabled
  • :disabled
  • :checked
  • :selected

表单选择器

  • :input
  • :text（单行文本框）
  • :password
  • :radio
  • :checkbox
  • :submit
  • :image(图像按钮)
  • :reset
  • :button
  • :file
  • :hidden

注意：$(".text :hidden")选取的是class为text元素里面的隐藏元素，而$(".text:hidden")选取的是隐藏的class为text元素。

第三章 jQuery中的DOM操作

一、创建元素节点

使用工厂函数$( )即可

1
var $li_1 = $("<li>香蕉</li>");

二、插入节点

  • append()（元素内部）
  • appendTo()（与append相反）
  • prepend()
  • prependTo()
  • after()（元素之后）
  • insertAfter()
  • before()
  • insertBefore()

三、删除节点

  • remove() 使用该方法，该节点所包含的所有后代节点将同时被删除，返回值是一个指向已被删除的节点的引用。
  • detach() 这个方法不会把匹配的元素从jQuery对象中删除，可以在将来再使用。所有绑定的事件、附加的数据都会保留下来。
  • empty() 它能清空所有后代的节点。注意是后代节点。

四、复制节点

  • clone() 被复制的新元素不具有任何行为
  • clone(true) 复制元素同时绑定元素的事件

五、替换节点

  • replaceWith()
  • replaceAll()
    两方法作用相同，只是顺序颠倒

六、包裹节点

  • wrap()
  • wrapAll()
  • wrapInner()

七、属性操作

  • attr() 获取和设置属性
  • removeAttr() 删除属性

八、样式操作

  • addClass() 追加样式
  • removeClass() 移除样式
  • toggleClass() 切换样式
  • hasClass()

注意：hasClass("another") = is(".another"),一般用后者。

九、设置和获取HTML、文本和值

  • html() 类似于js的innerHTML
  • text() 读取或设置元素文本内容
  • val() 设置或获取元素的值; 能使select、checkbox、radio相应的选项被选中
1
$("#single").val("选择2号");

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

十、遍历节点

  • children() 该方法只考虑子元素，而不考虑其后代元素
  • next() 后面紧邻的同辈元素
  • prev() 前面紧邻的同辈元素
  • siblings() 前后所有的同辈元素
  • closest() 最近的匹配元素（当前元素-父元素-父父元素……)，只返回匹配的第一个元素节点
  • parent() 元素的父节点
  • parents() 元素的多个父节点

十一、CSS-DOM操作

  • css() 与attr()方法类似
  • height() 获取的是元素在页面中的实际高度
  • width() 同上，实际宽度
  • offset() 获取元素在当前视窗的相对偏移，返回top和left
  • position() 获取元素相对于最近的一个position样式属性设置为relative或absolute的祖父节点的相对偏移
  • scrollTop()和scrollLeft() 获取元素滚动条距顶端的距离和距左侧的距离

第四章 jQuery中的事件和动画

一、事件绑定

  • bind()
1
bind(type,[data],fn)

二、合成事件

  • hover() 模拟光标悬停事件
1
hover(enter,leave)
  • toggle() 模拟鼠标连续单击事件； 切换元素的可见状态
1
toggle(fn1,fn2,...fn)

三、防止事件冒泡

  • 为函数添加一个参数
1
$("element").bind("click",function(event){});
  • event.stopPropagation() 停止冒泡
  • event.preventDefault() 阻止默认行为

如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false，这是对上面两函数的简写方式。

四、事件对象的属性

  • event.type 事件类型
  • event.target 获取触发事件的元素
  • event.relatedTarget moseover与mouseout事件相关元素
  • event.pageX与event.pageY 光标相对于页面的x坐标和y坐标
  • event.which 鼠标点击事件中鼠标的左中右键（1，2，3）
  • event.metaKey 键盘事件中获取按键

五、移除事件

  • unbind() 移除事件
1
unbind([type],[data]);第一个参数是事件类型，第二个是将要移除的函数。
  • one() 只触发一次，随后立即解除绑定
1
one([type,[data],fn);

六、模拟操作及其他方法

  • trigger() 模拟用户操作 trigger(type,[data]) 第二个参数是要传递给事件处理函数的附加数据，以数组形式传递。
1
$('#btn').trigger("myClick",["我的自定义","事件"]);

该方法触发事件后，会执行浏览器默认操作，若不想执行浏览器的默认操作，可以使用triggerHandler();

  • bind() 可同时绑定多个事件
1
bind("mouseover mouseout",function(){});
  • 添加命名空间
1
bind("click.plugin",function(){});
  • trigger()
1
trigger("click!");匹配所有不包含在命名空间的click方法

八、动画

  • show()和hide() 为一个元素调用hide()方法，会将该元素的display样式改为”none”
  • fadeIn()和fadeOut() 只改变元素的不透明度
  • slideUp()和slideDown() 只改变元素的高度
  • 自定义动画 animate(params,speed.callback); params指的是一个包含样式属性及值的映射

注意：使用animate()方法之前，必须把元素的position样式设为relative或absolute

1
animate({left:"500px",height:"400px"},3000);

  • stop() 停止动画

stop([clearQueue],[gotoEnd]);clearQueue代表是否要清空未执行完的动画队列，gotoEnd代表是否直接将正在执行的动画跳转到末状态。

  • is(“:animated”) 判断元素是否正处于动画状态
  • delay() 延迟动画
  • toggle() 切换元素的可见状态
1
toggle(speed,[callback])
  • slideToggle() 只调整元素的高度
1
slideToggle(speed,[easing],[callback])
  • fadeTo() 把元素的不透明度以渐进方式调整到指定的值
1
fadeTo(speed,opacity,[callback])
  • fadeToggle() 通过不透明度变化切换元素的可见性
1
fadeToggle(speed,[easing],[callback])

第五章 jQuery对表单、表格的操作及更多应用

  • prop()

注意：1. 只添加属性名称该属性就会生效应该使用prop(); 2. 只存在true/false的属性应该使用prop()。因此disabled和checked之类属性应该使用prop()。

  • this表作用域
1
2
3
4
$("#select1").dbclick(function(){  
    var $options = $("option:selected",this);  
    $options.appendTo('"#select2");
});
  • each() 遍历
  • filter() 筛选
1
filter(":contains('李')").show();
坚持原创技术分享，您的支持将鼓励我继续创作！