jQuery基础总结-创新互联
样式篇
$(document).ready 的意思是等页面的文档(document)中的节点都加载完毕后,在执行后续的代码;
创新互联专注网站设计,以设计驱动企业价值的持续增长,网站,看似简单却每一个企业都需要——设计,看似简洁却是每一位设计师的心血 十载来,我们只专注做网站。认真对待每一个客户,我们不用口头的语言来吹擂我们的优秀,近1000家的成功案例见证着我们的成长。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事件:可以监听
select事件:只用于元素与
submit事件:(例如:验证表单输入的正确性,如果错误就阻止提交,从新输入)
return false; //阻止提交
keydown()与keyup()事件:键盘按下与松手
on()的多事件绑定:
多个事件绑定同一个函数:("#elem").on("mouseover mouseout",function(){ }); 多个事件绑定不同函数("#elem").on("mouseover mouseout",function(){ }); 多个事件绑定不同函数("#elem").on({
mouseover:function(){},
mouseout:function(){},
});
on()的高级用法:委托机制 $("div").on("click","p",fn)
卸载事件off()方法
jQuery事件对象:event.target
jQuery事件对象的属性:
event.type:获取事件的类型 event.pageX 和 event.pageY event.stopPropagation() 方法:阻止事件冒泡
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站栏目:jQuery基础总结-创新互联
网页链接:http://ybzwz.com/article/dgpsic.html