方法的实质就是Function的实例(对象)方法,即是类也是对象。
Dom对象与jQuery对象的区别:
DOM对象:通过原生js获取的DOM元素,就是DOM对象;
jQuery对象:通过$(“”)的方式获取的$元素,就是一个jQuery对象,里面封装了很多操作方法。
1.通过jQuery方法包装后的对象,是一个类数组对象。它与DOM对象完全不同,唯一相似的是它们都能操作DOM。
2.通过jQuery处理DOM的操作,可以让开发者更专注业务逻辑的开发,而不需要我们具体知道哪个DOM节点有那些方法,也不需要关心不同浏览器的兼容性问题,我们通过jQuery提供的API进行开发,代码也会更加精短。
jQuery是封装后的js类数组对象,而DOM对象是一个简单的dom元素
将jQuery对象转换成DOM对象的两种方法:
方法一:
var $div=$("div");
var div=$div[0];
div.style.color("red");
方法二:通过get方法进行转换(get是jQuery中封装后的方法)
var $div=$("div");
var div=$div.get(0);
div.style.color("red");
将DOM对象转换成jQuery对象:
var div=getElementById("#div1");
var $first=$div.first;
$first.css('color','red');
选择器之间的关系:
parent>children 子代选择器,parent下面的子代;
parent child 后代选择器,可以跟着儿子 孙子 真孙,只要是在parent下面的就可以
sister+brother 相邻选择器 是兄弟姐妹关系
"prev ~ siblings"
一般兄弟选择器:匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素,并匹配过滤“siblings”选择器
基本的筛选选择器
$(".div1:first"); 匹配第一个元素
$(".div1:last"); 匹配最后一个元素
$(".div1:not(div)"); 过滤,匹配所有不包含某个元素的元素
$(".div1:eq(index)"); 下标索引等于几的元素
$(".div1:gt(index)"); 下标索引大于几的元素
$(".div1:even"); 下标索引为偶数的元素,从0开始计
$(".div1:odd"); 下标索引为奇数的元素,从0开始计
$(".div1:lt(index)"); 下标索引小于几的元素
$(".div1:header"); 匹配标题标签的元素
$(".div1:lang(language)"); 匹配指定语言的元素
$(".div1:animated"); 匹配正在执行动画的元素
内容筛选选择器
$(":contains(text)") 匹配包含指定文本的元素
$(":parent") 匹配所有含有子元素或者文本的元素
$(":empty") 匹配所有不含有子元素或者文本 的元素
$(":has(selector)") 匹配含有指定选择器的元素
可见性筛选选择器
$(":visible") 匹配显示元素
$(":hidden") 匹配隐藏元素
CSS中隐藏元素的方式有以下6种:
1.CSS display的值是none。
2.type="hidden"的表单元素。
3.宽度和高度都显式设置为0。
4.一个祖先元素是隐藏的,该元素是不会在页面上显示
5.CSS visibility的值是hidden
6.CSS opacity的指是0
属性筛选选择器
子元素筛选选择器
jQuery中的属性与样式之.attr()与.removeAttr()
attr()有4个表达式
attr(传入属性名):获取属性的值
attr(属性名, 属性值):设置属性的值
attr(属性名,函数值):设置属性的函数值
attr(attributes):给指定元素设置多个属性值,即:{属性名一: “属性值一” , 属性名二: “属性值二” , … … }
removeAttr()删除方法
.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性(attribute)
.html()与.text()方法
.html()
获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容,具体有3种用法:
.html() 不传入值,就是获取集合中第一个匹配元素的HTML内容
.html( htmlString ) 设置每一个匹配元素的html内容
.html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数
.text()
得到匹配元素集合中每个元素的文本内容结合,包括他们的后代,或设置匹配元素集合中每个元素的文本内容为指定的文本内容。,具体有3种用法:
.text() 得到匹配元素集合中每个元素的合并文本,包括他们的后代
.text( textString ) 用于设置匹配元素内容的文本
.text( function(index, text) ) 用来返回设置文本内容的一个函数