jQuery基础总结

样式篇

$(document).ready 的意思是等页面的文档（document）中的节点都加载完毕后，在执行后续的代码;

企业建站必须是能够以充分展现企业形象为主要目的，是企业文化与产品对外扩展宣传的重要窗口，一个合格的网站不仅仅能为公司带来巨大的互联网上的收集和信息发布平台，创新互联建站面向各种领域：成都餐厅设计等成都网站设计公司、全网整合营销推广解决方案、网站设计等建站排名服务。


jQuery对象转化成DOM对象：
jQuery是一个类数组对象，DOM对象就是一个单独的DOM元素。
jQuery自带的get()方法：转换为DOM对象

DOM对象转化成jQuery对象：$

基本选择器：id选择器 类选择器 元素选择器

层级选择器： 
子选择器：$('div > p') 选择所有div元素里面的第一个子元素P
后代选择器：$('div p').css("border", "1px groove red");
相邻兄弟选择器：(".prev+div")选取prev后面的第一个的div兄弟节点一般相邻选择器：(".prev+div")选取prev后面的第一个的div兄弟节点一般相邻选择器：(".prev ~ div")选取prev后面的所有的div兄弟节点

基本筛选器
:first/:last/:even/:odd 注意jQuery合集都是从0开始索引 :even偶数 :odd奇数
:eq/:gt/:lt   :gt大于 :lt小于

内容筛选器
:contains/:has       （contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素）
:parent/:empty

可见性筛选选择器
:visible/:hidden

隐藏
1.CSS display的值是none。
2.type="hidden"的表单元素。
3.宽度和高度都显式设置为0。
4.一个祖先元素是隐藏的，该元素是不会在页面上显示
5.CSS visibility的值是hidden
6.CSS opacity的指是0                 5.6两种被认为是可见的，因为他们仍然占用空间布局

属性筛选选择器
[att=val]、[att]、[att|=val]、[att~=val] [att^=val]、[att*=val]、[att$=val]、[att!=val]

在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的
[attr="value"]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type="text"],input[type="checkbox"]等
[attr*="value"]能在网站中帮助我们匹配不同类型的文件

子元素筛选选择器
:first-child、:last-child、:only-child、:nth-child、:nth-last-child

表单元素选择器
input、text、password、radio、checkbox、submit、p_w_picpath、reset、button、file

表单对象属性筛选选择器
enabled、disabled checked、selected(option)

特殊选择器this

.attr() .removeAttr()
1.attr(传入属性名)：获取属性的值
2.attr(属性名, 属性值)：设置属性的值
3.attr(属性名,函数值)：设置属性的函数值
4.attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }

.html() .text() .val()
.html处理的是元素内容，.text处理的是文本内容,.val()是用来处理表单

.addClss():添加一个样式类名到元素上
.removeClass():删除样式
.toggleClass():结合上面两点

样式操作.css()
获取：
.css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值
.css( propertyNames )：传递一组数组，返回一个对象结果
设置：
.css(propertyName, value )：设置CSS
.css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理
.css( properties )：可以传一个对象，同时设置多个样式

 

回到顶部(go to top)

DOM篇

jQuery节点创建
:$("

我是文本节点
")

DOM节点插入
内部插入append()与appendTo()
:目标的位置不同

通过before与after添加元素（内容在后，元素在前）
:before,在匹配元素之前增加多参数、after,在匹配元素之前增加多参数

通过prepend与prependTo添加元素（目标位置不同）
：prepend()向每个匹配的元素内部前置内容；append()向每个匹配的元素内部追加内容

通过insertBefore与insertAfter添加元素（内容在前，元素在后）

DOM节点删除
通过empty移除元素
：移除内容，但是id，class属性没有删除

通过remove移除元素
: 移除内容和属性

保留数据的删除操作detach()

DOM拷贝clone()
//clone处理一：("div").clone()//只克隆了结构，事件丢失//clone处理二：("div").clone()//只克隆了结构，事件丢失//clone处理二：("div").clone(true) //结构、事件与数据都克隆

DOM替换replaceWith()和replaceAll()：
replaceWith:内容在后面 replaceAll相反

DOM包裹wrap()方法:增加一个父元素
unwrap()：与wrap()相反
wrapAll()方法：给集合中的元素分别包裹
wrapInner()方法：可以理解成增加一个内元素


jquery遍历
children方法()：寻找第一级子元素
find方法()：寻找后代元素

parent方法()：向上查找一级
parents方法():向上查找多级找到符合条件的多个
closest()方法:向上查找多级找到最近的那个

next()方法：紧邻的后面同辈元素的元素集合
prev()方法：紧邻的前面同辈元素的元素集合
siblings()：每一个元素紧邻的前面后面同辈元素

add()方法：往jQuery合集中添加一新的元素

each():
$("li").each(function(index, element) {
}):index是索引 △：从0开始；element:是对应的节点

 

回到顶部(go to top)

事件篇

①鼠标事件

点击触发

$("#text").click(11111,function(e) {
//this指向 div元素
//e.date => 11111 传递数据
});

click与dbclick事件

mousedown与mouseup事件：两个合成click事件

mousemove事件

mouseover与mouseout事件
mouseenter与mouseleave事件:和上一种的区别冒泡的方式处理问题（不支持冒泡）
hover事件：mouseenter事件和mouseleave事件合起来


②表单事件
focusin事件：当一个元素或内部任何一个元素获得焦点的时候
focusout事件：当一个元素，或者其内部任何一个元素失去焦点的时候

focus与blur事件：不支持冒泡，focusin与focusout支持冒泡

change事件：可以监听