jQuery:样式篇

jQuery对象与DOM对象

1
2
3
4
5
6
7
8
9
var oDiv = document.getElementById('box'); // DOM对象
var $oDiv = $('#box'); // jQuery对象

// 将jQuery对象转化为DOM对象的两种方法
var oDiv = $oDiv[0]; // 利用数组下标的方式
var oDiv = $oDiv.get(0); // 利用jQuery自带的get方法

// 将DOM对象转化为jQuery对象的方法
var $oDiv = $(oDiv);

jQuery对象与DOM对象的区别

通过jQuery方法包装后的对象是一个类数组对象,这个对象里面包含了DOM对象的信息,封装了很多的操作方法,唯一相似的是他们都能操作DOM。

jQuery选择器

  • ID选择器 : $( "#id" )
  • 类选择器 : $( ".class" )
  • 元素选择器 : $( "element" )
  • 全选择器 : $( "*" )

层级选择器

  • 子选择器 : $("parent > child") 选择指定父元素的指定的所有直接子元素
  • 后代选择器 : $("ancenstor descendant") 选择所有给定祖先元素的所有指定后代元素
  • 相邻兄弟选择器 : $("prev + next") 选择所有紧接在prev元素后的next元素
  • 一般兄弟选择器 : $("prev ~ next") 选择prev元素后的所有next兄弟元素

基本筛选选择器

  • $(":first") : 匹配第一个元素
1
2

$(".div:first")

$(":last") : 匹配最后一个元素

1
2
3
4
5
6

$(".div:last")

```js

`$(":even")` : 选取索引值为偶数的元素(从0开始计数)
1
2

$(".div:even")
1
2

`$(":odd")` : 选取索引值为奇数的元素(从0开始计数)
1
2

$(".div:odd")
1
2

`$(":eq(index)")` : 在匹配的集合中选择索引值为index的元素
1
2

$(".aaron:eq(2)")
1
2

`$(":gt(index)")` : 选择匹配集合中所有大于给定index(索引值)
1
2

$(".aaron:gt(3)")
1
2

`$(":lt(index)")` : 选取匹配集合中所有索引值小于给定index参数的元素
1
2

$(".aaron:lt(2)")
1
2

`$(":not(selector)")` : 一个用来过滤的的选择器,选择所有元素去除不匹配给定的选择器元素
1
2

$("input:not(:checked) + p")

内容筛选选择器

1
2

- `$(":contains(text)")` : 选择含有指定文本的元素
1
2

$(".div:contains('beautiful')"); //查找所有class="div"元素中包含"beautiful"的元素节点
1
2

- `$(":has(selector)")` : 选择包含指定元素的元素
1
2

$(".div:has(span)"); //查找所有class="div"中DOM元素中包含"span"的元素节点
1
2

- `$(":parent")` : 选择含有子元素或者文本的父级元素
1
2

$("a:parent"); //选择所有包含子元素或者文本的a元素
1
2

- `$(":empty")` : 选择所有没有子元素的元素
1
2

$("a:empty"); //选择没有子元素和文本的a元素

可见性筛选选择器

1
2

- `$(":visible")` : 选择所有显示的元素
1
2
3
4
5

$('#div1:visible'); //查找id="div1"且显示的元素节点

```js
`$(":hidden")` : 选择所有隐藏的元素
1
$('#div1:hidden');  //查找id="div1"且隐藏的元素节点
  • display:none的元素是不可见的
  • width=0并且height=0的元素是不可见的
  • type=“hidden”的表单元素是不可见的
  • visibility:hidden或者opacity=0的元素是可见的

属性筛选选择器

  • $("[attribute\*='value']")选择指定属性包含一个指定的字符串的元素
  • $("[attribute~='value']") 选择指定属性用空格分隔的值中包含一个给定值的元素
  • $("[attribute='value']") 选择指定属性是给定值的元素
  • $("[attribute^='value']") 选择指定属性是以给定字符串开始的元素
  • $("[attribute$='value']") 选择指定属性是以给定字符串结尾的元素,这个是区分大小写的
  • $("[attribute]") 选择所有具有指定属性的元素
  • $("[attribute\|='value']") 选择指定属性值等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符“-”)的元素
  • $("[attributeFilter1\][attributeFilterN]") 选择匹配所有指定的属性筛选器的元素
  • $("[attribute!='value']") 选择不存在指定属性,或者指定的属性值不等于给定值的元素
1
2
3
4
5
6
7
8
`$('div[name=p1]') `//查找所有div中,属性name=p1的div元素
`$('div[p2]')` //查找所有div中,有属性p2的div元素
`$('div[name|="-"]')`//查找所有div中,有属性name中的值只包含一个连字符“-”的div元素,或以连字符‘-’相连的前缀为字符“-”的div
`$('div[name~="a"]')` //查找所有div中,有属性name中的值包含一个连字符“空”和“a”的div元素,以空格风格的属性中有属性值a
`$('div[name^=imooc]')` //查找所有div中,属性name的值是用imooc开头的
`$('div[name$=imooc]')` //查找所有div中,属性name的值是用imooc结尾的
`$('div[name*="test"]')`//查找所有div中,有属性name中的值包含一个test字符串的div元素
`$('div[testattr!="true"]')`//查找所有div中,有属性testattr中的值没有包含"true"的div

子元素筛选选择器

  • $(‘:first-child’):选择所有父元素下的第一个子元素
  • $(‘:last-child’):选择所有父元素下的最后一个子元素
  • $(‘:only-child’):选择所有父元素下的只有一个子元素(只有唯一一个子元素)
  • $(‘:nth-child(n)’)选择所有父元素下的弟n个元素(这里的n是从1开始计数)
  • $(‘:nth-last-child(n)’)选择所有父元素下的倒数弟n个元素
  • :first只匹配一个单独的元素,但是:first-child选择器可以匹配多个:即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
  • :last 只匹配一个单独的元素, :last-child选择器可以匹配多个元素:即,为每个父级元素匹配最后一个子元素
  • 如果子元素只有一个的话,:first-child:last-child是同一个
    :only-child匹配某个元素是父元素中唯一的子元素,就是说当前子元素是父元素中唯一的元素,则匹配
  • jQuery实现:nth-child(n)是严格来自CSS规范,所以n值是“索引”,也就是说,从1开始计数,:nth-child(index)从1开始的,而eq(index)是从0开始的

表单元素选择器

  • $(“:input”)
  • $(“input:text”)匹配所有文本框
  • $(“input:password”)匹配所有密码档
  • $(“input:radio”)匹配所有单选按钮
  • $(“input:checkbox”)匹配所有复选框
  • $(“input:submit”)匹配所有提交按钮
  • $(“input:image”)匹配所有图像域
  • $(“input:reset”)匹配所有重置按钮
  • $(“input:button”)匹配所有按钮
  • $(“input:file”)匹配所有文件域

大部分表单类别筛选器可以使用属性筛选器替换。比如 $(':password')等价于$('[type=password]')

表单对象属性筛选选择器

  • $(":enabled") 选取可以使用的表单元素
  • $(":disabled")选取不可以使用的表单元素
  • $(":checked")选取被选择中的<input>
  • $(":selected")选取被选择中的<option>元素

在某些浏览器中,选择器:checked可能会错误选取到<option>元素,所以保险起见换用选择器input:checked,确保只会选取<input>元素

特殊选择器this

this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法。

$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jQuery的方法和属性值。

1
2
3
4
5
$('p').click(function(){
//把p元素转化成jQuery的对象
var $this= $(this)
$this.css('color','red')
})

jQuery的属性与样式

.attr()与.removeAttr()

attr()有4个表达式

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

removeAttr()删除方法

.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性(attribute)

Attribute就是dom节点自带的属性

而Property是这个DOM元素作为对象,其附加的内容

获取Attribute就需要用attr,获取Property就需要用prop

html()及.text()

.html()方法体有3种用法

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

这个操作是针对整个HTML内容(不仅仅只是文本内容)

.text()方法体有3种用法

  • .text() 得到匹配元素集合中每个元素的合并文本,包括他们的后代

    .text()结果返回一个字符串,包含所有匹配元素及其后代元素的合并文本

  • .text( textString ) 用于设置匹配元素内容的文本

  • .text( function(index, text) ) 用来返回设置文本内容的一个函数

    1
    2
    3
    $(".left a:first").text(function(idnex,text){
    return '增加新的文本内容' + text
    })

.val()

.val()方法主要是用于处理表单元素的值,比如 input, selecttextarea

.val()方法

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

通过.val()处理select元素, 当没有选择项被选中,它返回null

.val()方法多用来设置表单的字段的值

如果select元素有multiple(多选)属性,并且至少一个选择项被选中, .val()方法返回一个数组,这个数组包含每个选中选择项的值

.html(),.text()和.val()的差异总结:

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

增加样式.addClass()

  • .addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名
  • .addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名
1
2
3
4
5
6
7
$("div").addClass(function(index,className) {
//找到类名中包含了imooc的元素
if(-1 !== className.indexOf('imooc')){
//this指向匹配元素集合中的当前元素
$(this).addClass('imoocClass')
}
});

删除样式.removeClass()

  • .removeClass( [className ] ):每个匹配元素移除的一个或多个用空格隔开的样式名
  • .removeClass( function(index, class) ) : 一个函数,返回一个或多个将要被移除的样式名
1
2
3
4
5
6
7
8
$('.right > div:first').removeClass(function(index,className){
//className = aa bb imoocClass
//把div的className赋给下一个兄弟元素div上作为它的class
$(this).next().addClass(className);

//删除自己本身的imoocClass
return 'imoocClass';
})

切换样式.toggleClass()

.toggleClass( )方法:在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类。

  • .toggleClass( className ):在匹配的元素集合中的每个元素上用来切换的一个或多个(用空格隔开)样式类名
  • .toggleClass( className, switch ):一个布尔值,用于判断样式是否应该被添加或移除

    第二个参数判断样式类是否应该被添加或删除

    true,那么这个样式类将被添加;

    false,那么这个样式类将被移除

toggleClass会保留原有的Class名后新增,通过空格隔开

1
2
//所有的奇数tr元素,应该都保留class="c"样式
$("#table tr:even").toggleClass("c", true);

样式操作.css()

.css() 方法:获取元素样式属性的计算值或者设置元素的CSS属性

获取:

  • .css( propertyName ) :获取匹配元素集合中的第一个元素的样式属性的计算值
  • .css( propertyNames ):传递一组数组,返回一个对象结果

设置:

  • .css(propertyName, value ):设置CSS

    1
    css("background-color","red")
  • .css( propertyName, function ):可以传入一个回调函数,返回取到对应的值进行处理

    1
    2
    3
    4
    5
    6
    css("width",function(index,value){
    //value带单位,先分解
    value = value.split('px');
    //返回一个新的值,在原有的值上,增加50px
    return (Number(value[0]) + 50) + value[1];
    })
  • .css( properties ):可以传一个对象,同时设置多个样式

    1
    2
    3
    4
    5
    css({
    'font-size' :"15px",
    "background-color" :"#40E0D0",
    "border" :"1px solid red"
    })

通过.css方法设置的样式属性优先级要高于.addClass方法

元素的数据存储

jQuery提供的存储接口

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

    1
    $.data(ele, "a", "data test")
  • jQuery.data( element, key ) //静态接口,取数据

    1
    $.data(ele, "a")
  • .data( key, value ) //实例接口,存数据

    1
    ele.data("a", "data test")
  • .data( key ) //实例接口,取数据

    1
    ele.data("a")

jQuery提供的删除接口

  • jQuery.removeData( element [, name ] )
  • .removeData( [name ] )
文章目录
  1. 1. jQuery对象与DOM对象
    1. 1.1. jQuery对象与DOM对象的区别
  2. 2. jQuery选择器
    1. 2.1. 层级选择器
    2. 2.2. 基本筛选选择器
    3. 2.3. 内容筛选选择器
    4. 2.4. 可见性筛选选择器
    5. 2.5. 属性筛选选择器
    6. 2.6. 子元素筛选选择器
    7. 2.7. 表单元素选择器
    8. 2.8. 表单对象属性筛选选择器
    9. 2.9. 特殊选择器this
  3. 3. jQuery的属性与样式
    1. 3.1. .attr()与.removeAttr()
    2. 3.2. html()及.text()
    3. 3.3. .val()
    4. 3.4. .html(),.text()和.val()的差异总结:
    5. 3.5. 增加样式.addClass()
    6. 3.6. 删除样式.removeClass()
    7. 3.7. 切换样式.toggleClass()
    8. 3.8. 样式操作.css()
    9. 3.9. 元素的数据存储
|