day29 jQuery选择器 & jquery属性操作 & jquery DOM元素 操作与遍历
简介
jQuery，顾名思义，就是javascript和query（查询），即辅助javascript开发的库，本质就是一个js文件；
jQuery是一个js函数库，是目前全球范围内最流行、用的最多的js函数库；
jQuery库包含以下功能：
1)HTML元素选取
2)HTML元素操作
3)CSS操作
4)HTML事件函数操作
5)js特效和动画
6)HTML DOM遍历和修改
7)AJAX发送HTTP请求
2 jQuery版本
jQuery-1.* 兼容性好，兼容IE6 IE7 IE8，体积稍大；
jquery-2.0以上版本不再支持IE 6/7/8；
jQuery-3.* 放弃早期浏览器，支持现代浏览器，兼容至IE9，轻量；
jQuery库有两种类型：
jQuery.js(开发版) 完整无压缩，用于测试和学习
jQuery.min.js(发布版) 高度压缩，用于实际项目运行
3 文件引入
1)jQuery文件要放在所有引入的js文件第一位，因为浏览器是顺序加载文件，方便后面的js文件引用jQuery库的方法；
2)所有CSS文件的引入要先于所有JS文件；
示例：
<head>
<!-- 引入CSS外部样式表 -->
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<!-- 引入jquery文件：jquery文件要在所有引入的js文件第一位置 -->
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<!-- 引入外部自定义js文件 -->
<script type="text/javascript" src="../js/main.js"></script>
</head>
4 HTML元素选取-选择器
4.1 基础语法公式
$(selector).action
先选取HTML元素，后对选取的元素执行某些操作；
$符号代表jQuery的缩写；
selector是选择符，表示查找选择符代表的HTML元素；
action执行对元素的操作，包括修改样式属性、事件、动画等；
4.2 基础选择器
ID选择器 $("#idValue") 根据id值选择标签元素
class选择器 $(".className") 根据class值选择标签元素
标签选择器 $("elementName") 根据标签名选择标签元素
属性选择器 $("elementName[type=?]") 根据标签名及指定属性值，选择标签元素
层次选择器 后代选择器$("M N") 选择M元素内部的所有后代元素N
子代选择器$("M>N") 选择M元素内部第一级的子代元素
兄选择器$("M~N") 选择M元素后所有同级的N元素
相邻选择器$("M+N") 选择M元素相邻的下一个平级元素N
4.3 伪类选择器
简单伪类选择器
:first 选择某元素的第一个元素对象 $("input:first")
:last 选择某元素的最后一个元素对象
:odd 选择某元素的索引值为奇数的元素(返回多个元素) 索引从0开始
:even 选择某元素的索引值为偶数的元素
:eq(index) 选择给定索引值的元素，索引值index是一个整数，从0开始 $("input:eq(4)")
可见性伪类选择器
:hidden 选取所有不可见的元素,包括input标签的disabled属性和其他普通标签的display
:visible 选取所有可见元素 $(":visible");
表单伪类选择器
:input 选择所有input元素 $(":input")
:button 选择所有普通按钮， <input type="button">或<button>元素
:submit 选择所有提交按钮 <input type=”submit”>
:reset 选择所有重置按钮
:text 选择所有单行文本框， <input type="text">
:textarea 选择所有多行文本框 <textarea>
:password 选择所有密码框
:radio 选择所有单选按钮， <input type="radio">
:checkbox 选择所有复选框， <input type="checkbox">
:image 选择所有图像域，注意不是<img>标签
:file 选择所有文件域， <input type="file" />
:hidden 选择所有隐藏域
表单属性伪类选择器
:checked
选择所有被选中的表单元素，一般用于radio和checkbox $(":checkbox:checked");
option:selected 选择所有被选中的option元素
:enabled 选择所有可用元素，一般用于input/select/textarea
:disabled 选择所有不可用元素，一般用于input/select/textarea
:read-only 选择所有只读元素，一般用于input/textarea $("input[type=text]:read-only");
:focus 选择获得焦点的元素 $(":focus");
5 HTML元素操作
5.1 标签属性
一般jquery中的方法既能set也能get。
5.1.1 attr()常规标签属性操作方法
//获取指定属性值,如果没有该属性返回undefined
var a = $("#p1").attr("color");
//添加/更改属性值
$("#i1").attr("value","1");
//获取标签对象的value属性值
var v = $("#i1").val();
5.1.2 prop()表单属性操作方法
//获取表单元素属性值
var v = $("#i1").prop("value");
//表单元素属性赋值
$("#i1").prop("value", "你好");
5.2 样式属性
//添加class属性值，允许添加多个class属性值
$("#p1").addClass("p_class p_class2");
//删除class属性值
$("#p1").removeClass("p_class2");
//查CSS属性值
var b = $("div").css("border");
//设置CSS样式
$("div").css("width","50%");
//设置多个CSS属性值
$("div").css({
"width":"50%",
"height":"100px",
"background-color":"orange"
});
5.3 标签文本内容
//查询标签本文内容，只返回文本信息，不返回html标签
var tx = $("p").text();
//查询标签中的文本内容，返回文本信息和html标签，且html标签作为字符串返回
var ht = $("p").html();
//设置标签文本内容，文本中的html字符串会作为html标签被添加
$("p").html("123<br>abc");
//设置标签文本内容，文本中的html字符串仍然作为字符串被添加
$(“p”).text(“123
abc”);
DOM元素操作
//1 DOM操作：生成元素
var ele = $("<p>hello world</p>");
function f1(){
var ele = $("<p>hello</p>");
// $("#d1").append(ele);//内部尾部插入
// $("#d1").prepend(ele);//内部头部插入
// ele.insertBefore("#d1");//外部头部插入
// ele.insertAfter("#d1");//外部尾部插入
// $("#d1").empty();//删除除id=d1标签的所有子元素
$("#d1").remove();//删除所有元素，包括d1
}
遍历（注意$(item)）
//遍历1
var arr = $("input");
arr.each(function(index,item){
console.log(index+" "+$(item).val());
});
//遍历2
$.each(arr,function(index,item){
console.log(index+" "+$(item).val());
});
DOM事件
ready：是属于jQuery的方法，当DOM载入就绪时（不包括图片等非文字媒体文件）绑定一个要执行的函数,极大提高了web应用程序的响应速度；
示例：
$(document).ready(function(){
});
onload：是属于Javascript的方法，网页的所有标签元素、图片全部加载完毕之后才执行这个事件处理程序，速度相对较慢；
示例：
window.onload = function(){
}
事件绑定
$("").on("click",function(){});
事件解绑
$("").off("click");
8 DOM遍历节点元素
8.1 祖先
parent() 方法返回被选元素的直接父元素。
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
示例：$("span").parentsUntil("div");
8.2 后代
children() 方法返回被选元素的所有直接子元素。
$("div").children("p.p1"); //返回类名为 "p1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
$("div").find("span"); //返回div标签中的所有span标签
8.3 同胞
siblings() 方法返回被选元素的所有同胞元素。
$("h2").siblings();
$("h2").siblings("p"); //返回属于 <h2> 的同胞元素的所有 <p> 元素
next() 方法返回被选元素的下一个同胞元素。方法只返回一个元素。
nextAll() 方法返回被选元素的所有跟随的同胞元素。
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
$("h2").nextUntil("h6");//返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历)
8.4 过滤
first() 方法返回被选元素的首个元素。
$("div p").first(); //选取<div>元素内部的第一个<p>元素
last() 方法返回被选元素的最后一个元素。
$("div p").last(); //选择<div>元素中的最后一个<p>元素
eq() 方法返回被选元素中带有指定索引号的元素。索引号从 0开始。
$("p").eq(1); //选取第二个 <p> 元素(索引号 1)
not() 排除指定元素
版权声明：本文为小彤在努力原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。