jQuery_样式

https://code.jquery.com/jquery-3.2.1.js

区别

jQuery是一个类数组对象,而DOM对象就是一个单独的DOM元素。


jQuery:

样式、事件、动画、DOM


一、选择器

1.id

var $id = $("#aaron");


2.类选择器:

var $class = $(“.arron”);


3.元素选择器:

$(“element”);


4.全选择器:

$(“*”);


5.层级选择器:



区别:

  1. 层级选择器都有一个参考节点
  2. 后代选择器包含子选择器的选择的内容
  3. 一般兄弟选择器包含相邻兄弟选择的内容
  4. 相邻兄弟选择器和一般兄弟选择器所选择到的元素,必须在同一个父元素下


> (大于号)紧跟父子关系 $("div > p")表示选择div下的直接层是p的节点。

+ (加号)  紧跟兄弟关系$("div + p")表示选择div同层的左右相邻的p节点。

~ (波浪线)任意距离兄弟关系 $("div + p")表示选择div同层的p节点。

(空格)    任意层父子关系$("div p")表示选择div下的p节点(不管中间隔多少层)。

,(逗号)   表示选择器组合,如$("div p, span p")表示divp节点和spanp节点。



6.基本筛选选择器:



7.内容筛选选择器:


  1. :contains:has都有查找的意思,但是contains查找包含指定文本的元素,has查找包含指定元素的元素
  2. 如果:contains匹配的文本包含在元素的子元素中,同样认为是符合条件的。
  3. :parent:empty是相反的,两者所涉及的子元素,包括文本节点

8.可见性选择器:




9.子元素筛选选择器:




10.表单元素选择器:



11.表单对象属性筛选选择器:




12.特殊选择器this:

var $this  = $(this); 将元素对象转换为jQuery对象;



二、属性与样式:

1.元素特性:

.attr()

.removeAttr()


表达式:

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

2..html().text()

  1. .html() 不传入值,就是获取集合中第一个匹配元素的HTML内容
  2. .html( htmlString )  设置每一个匹配元素的html内容
  3. .html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数


  1. .text() 得到匹配元素集合中每个元素的合并文本,包括他们的后代
  2. .text( textString ) 用于设置匹配元素内容的文本
  3. .text( function(index, text) ) 用来返回设置文本内容的一个函数



3. .val() 处理表单元素的值

  1. .val()无参数,获取匹配的元素集合中第一个元素的当前值
  2. .val( value ),设置匹配的元素集合中每个元素的值
  3. .val( function ) ,一个用来返回设置值的函数


区别:

  1. .html(),.text(),.val()三种方法都是用来读取选定元素的内容;只不过.html()是用来读取元素的html内容(包括html标签),.text()用来读取元素的纯文本内容,包括其后代元素,.val()是用来读取表单元素的"value"值。其中.html().text()方法不能使用在表单元素上,.val()只能使用在表单元素上;另外.html()方法使用在多个元素上时,只读取第一个元素;.val()方法和.html()相同,如果其应用在多个元素上时,只能读取第一个表单元素的"value"值,但是.text()和他们不一样,如果.text()应用在多个元素上时,将会读取所有选中元素的文本内容。
  2. .html(htmlString),.text(textString).val(value)三种方法都是用来替换选中元素的内容,如果三个方法同时运用在多个元素上时,那么将会替换所有选中元素的内容。
  3. .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

4.增加/移除样式

.addClass()

.removeClass


5.切换样式

.toggleClass()

有则删除,无则添加


6.样式操作

.css() 获取/设置


7.元素的数据存储

jQuery提供的存储接口

jQuery.data( element, key, value )   //静态接口,存数据

jQuery.data( element, key )  //静态接口,取数据   

.data( key, value ) //实例接口,存数据

.data( key ) //实例接口,存数据



猜你喜欢

转载自blog.csdn.net/taambernk520/article/details/70901221
今日推荐