JQuery基础总结二：样式篇
基础-样式篇
1.引入
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!-- 开发版 -->
<script type="text/javascript" src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>;
<title>环境搭建</title>
</head>
<body>
<script type="text/javascript"> alert($) </script>
</body>
</html>
2.获取特定dom节点
$('*') 所有元素引用
$('p') 所有p的引用
$('#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'); 重置样式
$('p').get(0); 获取第一个p（返回html对象）
$('p').eq(0); 获取第一个p（返回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 $p = $('p');
var p = $p.get(3);
p.style.color = 'red';
js转jq:
var p = document.getelementsbytagname('p');
var $p = $(p);
$p.first().css('color', 'red');
6.相关节点
$('p > p') 选择p元素里第一层p元素
$('p p') 选择p元素里所有的p 元素
$('p + p') 选择p元素后第一个兄弟节点
$('p ~ p') 选择p元素后的所有兄弟节点
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) 添加类
$("p").addclass(function(index,classname) {
//找到类名中包含了imooc的元素
if(-1 !== classname.indexof('imooc')){
//this指向匹配元素集合中的当前元素
$(this).addclass('imoocclass')
}
});
14.删除样式
$('p').removeclass(classname) 删除类
$('.right > p:first').removeclass(function(index,classname){
//classname = aa bb imoocclass
//把p的classname赋给下一个兄弟元素p上作为它的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='p'中dom元素中包含"contains"的元素节点并且设置颜色
$(".p:contains(':contains')").css("color", "#cd00cd");
//查找所有class='p'中dom元素中包含"span"的元素节点并且设置颜色
$('.p:has(span)').css("color", "blue");
上一篇： 生存状态
下一篇： 关于客户端用ASP参生报表