JQuery总结二：样式篇

基础-样式篇

1.引入

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

</body>

</html>

2.获取特定Dom节点

$('*') 所有元素引用

$('div') 所有div的引用

$('#idname') 获取id为idname的引用

$('.className') 获取class为className的引用

$(this) 把js里的this指针包装成jq对象

3.操作节点（可以连续操作节点）

$('#idname').html(); 获取html文档结构

$('#idname').html('this is the new content!'); 重写html文档结构

$('#idname').text(); 获取文本内容

$('#idname').text('this is the new content!'); 重写文本内容

$('#idname').val(); 获取value值（表单元素的）

$('#idname').val('new value'); 重置value值（表单元素的）

$('#idname').css('color','red'); 重置样式

$('div').get(0); 获取第一个div（返回HTML对象）

$('div').eq(0); 获取第一个div（返回JQ对象）

$('input:checkbox').attr('checked','true'); 设置属性

$('input:checkbox').attr('checked'); 获取属性

$('input:checkbox'). removeAttr ('checked'); 删除属性

4.事件

//页面加载完成

$(document).ready(function(){

//code

);

5.js-jq对象转换（有$符号的是jq对象，没有的为原生js对象）

jq转js:

var $div = $('div');

var div = $div.get(3);

div.style.color = 'red';

js转jq:

var div = document.getElementsByTagName('div');

var $div = $(div);

$div.first() .css('color', 'red');

6.相关节点

$('div > p') 选择div元素里第一层p元素

$('div p') 选择div元素里所有的p 元素

$('div + p') 选择div元素后第一个兄弟节点

$('div ~ p') 选择div元素后的所有兄弟节点

7.jq延伸-基本选择器

$(':first') 匹配到的第一个元素

$(':last') 匹配到的最后一个元素

$(':not(selector)') 一个用来过滤的选择器，选择所有元素出去不匹配给定的选择器元素

$(':eq(index)') 在匹配的集合钟选择索引值为index的元素

$(':gt(index)') 选择匹配集合钟所有大于给定index的元素

$(' :lt(index)') 选择匹配集合中索引值小于给定index的元素

$(':even') 选择索引值为偶数的元素，从0开始计数

$(':odd') 选择索引值为奇数的元素，从0开始计数

$(':header') 选择所有标题元素，像h1,h2,h3等

$(':lang(language)') 选择指定语言的所有元素

$(':root') 选择该文档的根元素

$(':animated') 选择所有正在执行动画的元素

8.jq延伸-内容选择器

$(':contains(text)') 选择所有包含指定文本的元素

$(':parent') 选择所有含有子元素或者文本的元素

$(':empty') 选择所有没有子元素的元素（包含文本节点）

$(':has(selector)') 选择元素中至少包含指定选择器的元素

9.jq延伸-可见性选择器

$(':visible') 选择所有显示元素

$(':hidden') 选择所有隐藏元素

9.jq延伸-属性选择器

$("[attribute|='value']") 选择只当属性值等于给定字符串或者以该字符串为前缀的元素（以 - 为连接符）

$("[attribute*='value']") 选择我指定属性具有包含给定子字符串的元素

$("[attribute~='value']") 选择指定属性用空格分隔的值中包含一个给定值的元素

$("[attribute='value']") 选择指定属性是给定值的元素

$("[attribute!=value']") 选择不存在指定属性，或者指定的属性值不等于给定值的元素

$("[attribute^='value']") 选择指定属性是以给定字符串开始的元素

$("[attribute$='value']") 选择指定属性是以给定字符串结尾的元素，区分大小写

$("[attribute]") 选择所有具有指定属性的元素，给属性可以是任何值

$("[attribute1] [attribute2]" ) 选择匹配所有指定的属性筛选器的元素

10.子元素筛选选择器

$(':first-child') 选择所有父级元素下的第一个子元素

$(':last-child') 选择所有父级元素下的最后一个子元素

$(':only-child') 如果某个元素是其父元素的唯一子元素，那么他就会被选中

$(':nth-child(n)') 选择的他们所有父元素的第N个子元素

$(':nth-last-child(n)') 从末尾开始，选择第n个子元素

11.表单元素选择器

$(':input') 选择所有input,textarea,select和button元素

$(':text') 匹配所有的文本框

$(':password') 匹配所有的密码框

$(':radio') 匹配所有的单选

$(':checkbox') 匹配所有的复选框

$(':submit') 匹配所有提交按钮

$(':image') 匹配所有的图像域

$(':reset') 匹配所有的重置按钮

$(':button') 匹配所有按钮

$(':file') 匹配所有文本域

12.表单对象属性筛选选择器

$(':enabled') 选取可用表单元素

$(':disabled') 选取不可用表单元素

$(':checked') 选取被选中的<input>元素（建议使用 input:checked选择器）

$(':selected') 选取被选中的<option>元素

13.添加样式

$('p').addClass(className) 添加类

$("div").addClass(function(index,className) {

//找到类名中包含了imooc的元素

if(-1 !== className.indexOf('imooc')){

//this指向匹配元素集合中的当前元素

$(this).addClass('imoocClass')

}

});

14.删除样式

$('p').removeClass(className) 删除类

$('.right > div:first').removeClass(function(index,className){

//className = aa bb imoocClass

//把div的className赋给下一个兄弟元素div上作为它的class

$(this).next().addClass(className)

//删除自己本身的imoocClass

return 'imoocClass'

});

15.样式切换

$('p').toggleClass(className); 有则删除类，无则加上类

$('p').toggleClass(className,true); true则p应该保存类，false则删除类

16.操作CSS

$('p').css('color') 获得计算后的color值

$('p').css(['color','position']); 获取多个css值

$('p').css('color','red'); 设置color值

$('p').css({'color':'red','position':'absolute'}); 传入一个对象，同时设置多个样式

17.数据存储

$('.right').click(function() {

var ele = $(this);

//通过.data方式设置数据

ele.data("a", "data test") //设置key | value

ele.data("b", {

name: "慕课网"

});

//通过.data方式取出数据

var reset = ele.data("a") + "</br>" + ele.data("b").name

ele.find('span').append(reset);//添加元素

})

其他

//选中所有紧接着没有checked属性的input元素后的p元素，赋予颜色

$('input:not(:checked) + p ').css("background-color", "#CD00CD");

//查找所有class='div'中DOM元素中包含"contains"的元素节点并且设置颜色

$(".div:contains(':contains')").css("color", "#CD00CD");

//查找所有class='div'中DOM元素中包含"span"的元素节点并且设置颜色

$('.div:has(span)').css("color", "blue");

JQuery总结二：样式篇

猜你喜欢