jQuery
jQuery中的页面加载事件
$(function(){
//js代码…
});
事件函数执行:当页面中所有DOM元素加载完毕后,就会立即执行,不会等外部元素加载完毕。
例如:可能受网速影响,图片还没加载进来,就执行了。
在Javascript中,通过document.方式获取的对象都属于DOM对象。
在jQuery中,通过$(选择器)形式获取的对象,都属于jQuery对象。
为什么jQuery对象和DOM对象要互转
DOM对象转Jquery对象操作方便 互转 ,毕竟Jquery中方法都是封装
好了的,而且兼容问题解决的很好,代码少,方便.
Jquery对象转DOM对象,因为Jquery中文件一直在更新,很多东西都是随着使用而进行封装和升级,不太可能把所有dom中用到的进行封装,还有很多未知的兼容问题没有封装进去,所以,有的时候jquery中不能解决的问题,还需要原生的js代码来解决,
所以,jquery对象有的时候需要转成dom对象来进行操作
DOM对象与jQuery对象是两个完全不同的对象,各自有自己独有的属性和方法。
jQuery对象转DOM对象
方式1:
DOM对象 = jQuery对象[索引];
方式2:
DOM对象 = jQuery对象.get(索引);
DOM对象转jQuery对象
jQuery对象 = $(DOM对象);
jQuery基本选择器
jQuery选择器是jQuery提供的一组方法,让我们更加方便的获取页面中的元素。
* 1.根据id来获取元素--->id选择器 ---->$("#id的值"); 获取到一个元素。
* 2.根据标签的名字来获取元素---标签选择器--->$("标签的名字"); 获取到多个元素。
* 3.根据类样式的名字获取元素--->类选择器--->$(".类样式的名字"); 获取到多个元素。
标签加类选择器$('li.cls')。cls是类名。
多条件选择器(并集选择器)$("selector1,selector2。。。。") :同时获取多个元素。
text()和html()方法
text()方法
用于获取或设置标签中间的文本内容,类似于innerText。
text() :获取元素的文本内容(不包含标签)
text(val) :设置元素的文本内容(如果内容包含标签,当做普通文本处理)
html()方法
获取或设置标签中间显示其他标签及内容,类似于innerHTML。
html() :获取元素的html内容
html(val) :设置元素的html内容
val()和css()方法
val()方法
获取或设置标签的value属性的值。
val() :获取表单元素的value值
val(val) :设置表单元素的value值
css()方法
获取或设置元素的css样式。
css(样式名) :获取元素的样式(很少用)
css(样式名,value) :设置元素的样式
css({样式名1:value,样式名2:value}) :一次为元素设置多个样式
jQuery层级选择器
标签和标签之间有层级关系,例如:父子关系、祖先后代、兄弟关系。
ancetor descendant :选取祖先元素下的所有后代元素(包括儿子、孙子、重孙)
parent > child :选择父元素下的所有子元素(一级,只包括儿子)
prev + next :选取当前元素紧邻的下一个同级元素(弟弟)
prev ~ siblings :选取当前元素后面的所有同级元素(弟弟和妹妹)
奇数和偶数选择器
对选中的元素,根据其索引进行快速的筛选。(索引从0开始)
? :even 偶数,获取索引为偶数的元素
? :odd 奇数,获取索引为奇数的元素
? :first :获取第一个元素
? :last :获取最后一个元素
索引选择器
对选中的元素,根据其索引进行快速的筛选。(索引从0开始)
? :eq(index) :获取索引等于index的元素,index默认从0开始
? :gt(index) 大于,获取索引大于index的元素
? :lt(index) 小于,获取索引小于index的元素
children()方法
.children()方法,获取所有的子代元素
show()和hide()方法
.show()显示已经隐藏的元素。
.hide()隐藏已经显示的元素。
.index()方法和.siblings()方法
.index()返回元素的索引值。
.siblings()获取所有的同辈元素(包括哥哥、弟弟妹妹)
find()方法
.find() 在后代搜索符合条件的元素。
|
|