《锋利的jQuery》学习笔记一

第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('

  你好啊

  ');
• $('

  你好啊

  ').replaceAll('p');

包裹节点

• $('strong').wrap(''); //用标签把元素包裹起来
• 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()获取元素的滚动条距离顶端的距离和距离左侧的距离，指定参数可以让滚动条滚动到指定的位置