jQuery总结

n年前写的，拉出来当个笔记吧。

jQuery对象转成DOM对象
var div = $(‘div’) //jQuery对象
var div = div[0] //转化成DOM对象
DOM对象转化成jQuery对象
1、var $div = $(div); //jQuery对象
2、var div = document.getElementsByTagName(‘div’); //dom对象

选择器：
一、jQuery选择器之id选择器
$( “#id” )
二、jQuery选择器之类选择器
$( “.class” )
三、jQuery选择器之元素选择器
$(“p”)
var divs = document.getElementsByTagName(‘div’);//js
四、jQuery选择器之全选择器（选择器）
$( "" )
document.getElementsByTagName(’’);//IE中调用getElementsByTagName里面会包含注释节
五、jQuery选择器之层级选择器
$(“div > p”) //div下的直接子元素p
$(“div p”) //div下的所有元素p
$(".div + p")//紧挨着的兄弟节点,.div后面的p
$(".div ~ p")//.div之后的所有p
六、jQuery选择器之基本筛选选择器
$(".div:first") //第一个元素
$(".div:last") //最后一个元素
$(".div:even") //索引为偶数元素
$(".div:odd") //索引为奇数元素
$(".aaron:eq(n)") //索引为n的元素
$(".aaron:gt(n)") //索引大于n的元素
$(".aaron:lt(n)") //索引小于n的元素
$(“input:not(:checked)+p”) //不匹配的input
七、jQuery选择器之内容筛选选择器
$(“div:contains(‘text’)”) //选择所有包含指定文本的元素
$(“div:has(‘selector’)”) //选择至少含有指定的选择器的元素
$(“a:parent”) //选择含有子元素或文本的元素
$(“a:empty”) //选择没有子元素（包含文本节点）的元素
八、jQuery选择器之可见性筛选选择器
$("#div:visible") //显示元素
$("#div:hidden") //隐藏元素 不仅仅包含样式是display=“none"的元素，还包括隐藏表单、visibility等等
九、jQuery选择器之属性筛选选择器
$(‘div[name=value]’) //与属性值相等的元素
$(‘div[p2]’) //包含属性的元素
$(‘div[name|=“value”]’) //属性值等于value 或以该value（后跟”-"）为前缀的元素
$(‘div[name~=“value”]’) //属性用空格分开的值至少有一个指定值的元素
$(‘div[name^=value]’) //属性值以value开头的元素
${(}^{\prime }div[name$=value]’) //属性值以value结束的元素（区分大小写）
$('div[name=value]’) //属性值包含的value的元素
$(‘div[name!=value]’) //属性值不等于value的元素
十、jQuery选择器之子元素筛选选择器
${(}^{\prime }:first-chil{d}^{\prime })//选择所有父级下的第一个元素：$(‘div p:first-child’)div的第一个p
$(’:last-child’) //选择所有父级下的第一个元素
$(’:only-child’) //选择所有元素唯一只有一个属性的元素
$(’:nth-child(n)’) //父级下第n个子元素
$(’:nth-last-child(n)’) //父级下倒数第n个子元素
十一、jQuery选择器之表单元素选择器
$(’:input’) //获取所有input 元素
$(‘input:text’) //获取所有文本框
$(‘input:password’) //获取所有密码框
$(‘input:radio’)//获取所有单选按钮
$(‘input:checkbox’)//获取所有复选按钮
$(‘input:submit’)//获取所有提交按钮
$(‘input:image’) //获取所有image
$(‘input:button’)//获取所有按钮
$(‘input:file’)//获取所有文件
十二、jQuery选择器之表单对象属性筛选选择器
$(‘input:enabled’) //选取可用的元素
$(‘input:disabled’) //选取不可用的元素
$(‘input:checked’) //被选中的单选或复选框
$(‘option:selected’) //选中的option元素

jQuery的属性与样式：
一、.attr()与.removeAttr()
attr()有4个表达式：
attr(传入属性名)：获取属性的值
attr(属性名, 属性值)：设置属性的值
attr(属性名,函数值)：设置属性的函数值
attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }
.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）
二、html()及.text()内容，
.html() 不传入值，就是获取集合中第一个匹配元素的HTML内容
.html( htmlString ) 设置每一个匹配元素的html内容
.html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数
.text()与.html()相同 .text()处理文本 .html()处理html
三、.val()获取值
四、增加样式.addClass()
$(“p”).addClass(“newClass”) //在p元素增加一个newClass的样式
五、删除样式.removeClass()
.removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名
六、切换样式.toggleClass()
.toggleClass(className)如果存在（不存在）就删除（添加）一个类多个用空格隔开的样式名
七、样式操作.css()。。。。。。
.css(propertyName, value )：设置CSS
八、

DOM操作
一、DOM内部插入append()与appendTo()
$obj…append（value）追加内容
$obj…appendTo（value）内容追加到指定的元素中
二、DOM外部插入after()与before()
$obj…after（value）//在obj的所有元素后面添加内容或标签
$obj…before（value）//在obj的所有元素前面添加内容或标签
三、DOM内部插入prepend()与prependTo()
$obj…prepend(value) //在每个匹配的元素内部最前面添加内容或标签
$obj…prependTo(newObj) //内部的首位置添加一个新的节点
四、DOM外部插入insertAfter()与insertBefore()
$obj…insertBefore(obj) //在目标元素前增加兄弟节点
$obj…insertAfter(obj) ///在目标元素后增加兄弟节点
五、DOM节点删除之empty()的基本用法
$obj.empty() //清空元素 不是删除节点
六、DOM节点删除之remove()的有参用法和无参用法
$obj.remove() //删除元素删除节点 可通过:contains(‘3’)过滤删除
七、DOM节点删除之保留数据的删除操作detach()
$obj.deach() //通过detach方法删除元素只是页面不可见，但是这个节点还是保存在内存中、数据与事件都不会丢失

DOM节点复制和替换
一、DOM拷贝clone()
$obj.clone() //克隆结构
$obj.clone(true) //克隆结构 事件 数据等
二、DOM替换replaceWith()和replaceAll()
$obj.replaceWith()//用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
$obj.replaceAll() //用集合的匹配元素替换每个目标元素
三、DOM包裹wrap()方法
$obj.rap() //在集合中匹配的每个元素周围包裹一个HTML结构
四、DOM包裹unwrap()方法
$obj.unwrap() //删除父容器与wrap()相反
五、DOM包裹wrapAll()方法
$obj.wrapAll()给集合中匹配的元素增加一个外面包裹HTML结构
六、DOM包裹wrapInner()方法
$obj.wrapInner()给集合中匹配的元素的内部，增加包裹的HTML结构

jQuery遍历
一、jQuery遍历之children()方法
$obj.children(’:last’) // 第一级子元素。最后一个子元素，
二、jQuery遍历之find()方法
$obj.find（） //查找范围包括子节点的所有后代节点
三、jQuery遍历之parent()方法
$obj.parent() //第一级父元素
四、jQuery遍历之parents()方法
$obj.parents() //所有父元素
五、jQuery遍历之closest()方法
与parents()相似
起始位置不同：.closest开始于当前元素 .parents开始于父元素遍历的目标不同：.closest要找到指定的目标.parents遍历到文档 根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集结果不同：
.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象鼠标事件
六、jQuery遍历之next()方法
$obj.next() //通过next匹配合集中每一个元素的下一个兄弟元素
七、jQuery遍历之prev()方法
$obj.prev() //快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合
八、jQuery遍历之siblings()
$obj.siblings() //快速查找指定元素集合中每一个元素的同辈元素
九、jQuery遍历之add()方法
$obj.add()//与$()一样
十、jQuery遍历之each()
$obj.each(function(index, element) {}); //一个循环体 可通过通过false跳出

一、添加事件：1、KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲test").click(fu…("#test").click(11111,function(e) {});//this指向 div元素 e.date => 11111 传递数据
二、KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲test").mousedow…("#test").mousedown(function(){});//松手触发
四、KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲test").mousemov…("#test").mouseover(function() {}); //移入事件
四、$("#test").mousemove(function() {}); //移出事件