JQuery小知识

2018-08-26  本文已影响0人  彭于晏的老婆呀

方法的实质就是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) ) 用来返回设置文本内容的一个函数

上一篇 下一篇

猜你喜欢

热点阅读