第1章 认识jQuery
window.onload与$(document).ready()的对比
jQuery对象转成DOM对象
var $cr = $("#cr"); //jQuery对象
var cr = $cr[0]; //DOM对象
DOM对象转成jQuery对象
var cr = document.getElementById("cr"); //DOM对象
var $cr = $(cr); //jQuery对象
- is(":checked")是jQuery中的方法，判断jQuery对象是否被选中，返回boolean值
如果jQuery在其他库之后导入
- 调用jQuery.noConflict()函数来讲变量$的控制权移交给其他JavaScript库
- var $J = jQuery.noConflict(); 自定义一个快捷方式
如果jQuery在其他库之后导入
- 可以直接使用jQuery来工作，无需noConflict();
- jQuery可以避免因为某个元素不存在而报错
- 如果要判断某个元素是否存在应该用
if ($("#tt").length > 0)
第2章 jQuery选择器
jQuery选择器氛围基本选择器、层次选择器、过滤选择器和表单选择器。
基本选择器
层次选择器
- $('prev + div')选择器与next('div')方法等价，用于选取prev元素后的第一个div元素
- $('prev ~ siblings')选择器与nextAll('siblings')方法等价，用于选取prev元素后的所有siblings元素
- siblings()方法选取同辈元素
基本过滤选择器
内容过滤选择器
可见性过滤选择器
属性过滤选择器
子元素过滤选择器
表单对象属性过滤选择器
表单对象属性过滤示例
- show():现实隐藏的匹配元素
- text(string):设置所有匹配元素的文本内容
- filter(expr):筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合
第3章 jQuery中的DOM操作
- $(html)根据传入的html，创建DOM对象，返回包装后的jQuery对象
插入节点
- append()向元素内追加内容
- prepend()向元素内前置内容
- after()向元素后插入内容
- before()向元素前插入内容
删除节点
- remove()的返回值是被删除节点的引用，还可以再添加回去
- empty()清空元素里的内容
复制节点
- clone()如果增加一个参数true，表示复制元素所绑定的事件
替换节点
- $('p').replaceWith('<p>你好啊</p>');
- $('<p>你好啊</p>').replaceAll('p');
包裹节点
- $('strong').wrap('<b></b>'); //用<b>标签把<strong>元素包裹起来
- wrap() //将所有元素单独包裹
- wrapAll() //将所有元素包裹到一起
- wrapInner() //将匹配的元素的子内容包裹起来
属性操作
- attr()获取和设置属性
- removeAttr()删除元素属性
- 设置多个属性
$('p').attr({'title' : 'haha','name' : 'test'}); - addClass(class):为匹配的元素追加指定的类名
- removeClass(class):为匹配的元素移除指定类名，如果不带参数，移除所有类名
- toggleClass()切换样式，如果存在则移除，不存在则添加
- hasClass('class')判断是否含有某个class，等同于
is('.class')
设置和获取HTML、文本和值
- html()获取和设置某个元素中的HTML内容，类似JS中的innerHTML
- text()获取和设置文本内容，类似JS中的innerText
- val()设置和获取元素的值
- focus()处理获取焦点事件，等同JS的onfocus()
- blur()处理失去焦点事件，等同JS的onblur()
- this.defaultValue当前文本框的默认值
- 用val()给select、checkbox、radio设置值时，如果有value，按照value来设置，如果没有按照text来设置，checkbox与radio要传数组，也可以用attr来设置
遍历节点
- children()匹配所有子元素，不包含子元素的后代元素
- prev()匹配前面紧邻的同辈元素
- next()匹配后面紧邻的同辈元素
- siblings()匹配所有同辈元素
- closest()取得最近的匹配元素，如果自身匹配返回自己，不匹配则向上查找父元素，没找到返回空jQuery对象
CSS-DOM操作
- css()获取和设置css属性
- width()获取和设置宽度
- height()获取和设置高度
- offset()获取元素在当前视窗的相对偏移，包含top,left两个属性
- position()获取元素相对于最近的一个position样式属性设置为relative或者absolute的租父节点的相对偏移，包含top,left两个属性
- scrollTop()与scrollLeft()获取元素的滚动条距离顶端的距离和距离左侧的距离，指定参数可以让滚动条滚动到指定的位置
