《JavaEE》第九周day1学习笔记-jQuery

一、jQuery

（一）jQuery概念

---

本质是快速且简洁的JavaScript框架（代码库），倡导编写更少的代码，完成更多的事情，封装了大量常用的代码，优化文档操作、事务处理、动画设计和AJAX交互。

（二）起步

---

目前，jQuery已完成三个大版本的迭代
1.x版本：兼容ie6、ie7、ie8，使用最广泛，最终版本为1.12.4 (2016年5月20日更新)；
2.x版本：不兼容ie6、ie7、ie8，最终版本为2.2.4 (2016年5月20日更新)；
3.x版本：不兼容ie6、ie7、ie8，只支持最新一代的浏览器，通常不会在生产环境中使用。
其中，jQuery需要通过<script>标签导入.js文件启用（开始使用前建议检查依赖路径是否正常），jquery-xxx.js/jquery-xxx.min.js均可使用。

（三）JavaScript对象与jQuery对象

---

两者不同质，对象属性及方法不通用，jQuery对象在操纵时更加便捷。
JavaScript对象→jQuery对象：$(JavaScript对象)
jQuery对象→JavaScript对象：jQuery对象[索引]、jQuery对象.get[索引]

二、使用jQuery

jQuery使用$(document).ready(function(){})入口函数，作为jQuery语句的起点；该函数可简化为$(function(){})，类似于window.onload，在DOM树完全加载后再执行相应的JavaScript方法；不同点是jQuery启动函数可多次定义，window.onload仅能定义一次。

（一）选择器

---

1.基本选择器

$("#id属性值")：id选择器；
$(".class属性值")：类选择器；
$("标签名称")：标签选择器；
$("*")：全选选择器；
$("selector1,selector2,selectorN")：并集选择器；

2.层级选择器

$("ancestor descendant")：后代选择器；
$("parent > child")：子选择器；

3.属性选择器

$("[attribute]")：属性名称选择器
$("[attribute=value]")：属性值选择器
$("[attribute!=value]")：属性值（非）选择器
$("[attribute^=value]")：属性值（开始）选择器
$("[attribute$=value]")：属性值（结束）选择器
$("[attribute*=value]")：属性值（存在）选择器
$("[[attrSel1][attrSel2][attrSelN]]")：复合属性值选择器

4.过滤选择器

$("X:first")：首元素选择器
$("X:last ")：尾元素选择器
$("X :not(selector)")：非选择器
$("X:even")：偶数选择器
$("X :odd")：奇数选择器
$("X:eq(index)")：等于（索引）选择器
$("X:gt(index)")：大于（索引）选择器
$("X:lt(index)")：小于（索引）选择器
$("X:header")：标题（获取h1~h6元素）选择器

5.表单选择器

$("X:input")：输入表单选择器
$("X:checkbox")：多选框表单选择器
$("X:button")：按钮表单选择器
$("X:enabled")：可用元素选择器
$("X:disabled")：不可用元素选择器
$("X:checked")：单选/复选框旋选中元素选择器
$("X:selected")：下拉列表选中元素选择器

（二）属性

---

$("X").attr(name|pro|key,val|fn)：获取/设置元素属性值
$("X").removeAttr(name)：删除元素属性值
$("X").prop(n|p|k,v|f)：获取/设置DOM内置元素属性值（推荐使用）
$("X").removeProp(name)：删除元素DOM内置元素属性值
$("X").addClass(class|fn)：增加class属性
$("X").removeClass([class|fn])：删除class属性
$("X").toggleClass(class|fn[,sw])：切换class属性
$("X").html([val|fn])：获取元素的内容（含html标签，不包含本级）
$("X").text([val|fn])：获取元素的内容（纯文本）
$("X").val([val|fn|arr])：获取元素的value属性值
$("X").css(name|pro|[,val|fn])：设置元素的CSS属性

（三）文档

---

$("X").append($("Y"))：添加至X内部末尾→X（OY）
$("X").appendTo($("Y"))：添加至Y内部末尾→Y（OX）
$("X").prepend($("Y"))：添加至X内部开头→X（YO）
$("X").prependTo($("Y"))：添加至Y内部开头→Y（XO）
$("X").after($("Y"))：添加至X平级末尾→X（O）Y
$("X").before($("Y"))：添加至Y平级末尾→Y（O）X
$("X").insertAfter($("Y"))：添加至X平级开头→YX（O）
$("X").insertBefore($("Y"))：添加至Y平级开头→XY（O）
$("X").remove()：移除元素
$("X").empty()：清空后代元素，保留本级