Jquery的一些常见用法
谨以此文怀念我们大学的时光，Jquery3.4.0下载 https://code.jquery.com/jquery-3.4.0.min.js
⒈常用方法
| $("#div1").html() | 等价于document.getElementById("div1").innerHTML() |
| $(dom对象) | 将Dom对象转换为Jquery对象 |
| var jq = $(div1)[0] = $(div1).get(0) | 将Jquery对象转换为Dom对象 |
| $("#div").css("background") | 取得Id为div元素的背景色 |
| $("#un").val("abc") | 设置Id为un的元素的value值为abc |
⒉常用选择器
| $("#div") | 根据Id选择 |
| $(".css") | 根据Class选择 |
| $("p") | 根据标签选择 |
| $("p,div,span.css1") | 选中p标签、div标签以及拥有css1样式的span标签 |
| next() | 下一个元素，可添加选择器 |
| nextAll() | 下一个之后所有元素，可添加选择器 |
| siblings() | 所有的同等元素获取，可添加选择器（不包括当前） |
⒊层级选择
| $("div li") | 获取div下所有li元素（后代、子、子的子、子的子的子....） |
| $("div > li") | 仅获取当前div层下的li元素 |
| $(".css1 + div") | 获取css1样式之后的第一个div元素 |
| $(".css1 ~ div") | 获取css1样式之后的所有div元素 |
⒋过滤器
| 用法 | 示例 | 说明 |
| :first | $("div:first") | 选取第一个<div> |
| :last | $("div:last") | 选取最后一个<div> |
| :not(条件) | $("input:not(.myclass)") | 选取样式名不为myclass的input |
| :even | :odd | $("input:even") |
选取索引是奇数还是偶数的元素 当前示例为选取索引是奇数的<input> |
| :eq(索引) | :gt(索引) | :lt(索引) | $("input :eq(1)") |
选取索引等于、大于或小于索引的元素 当前示例为选取索引等于1的<input> |
| :header | $(:header) |
选取所有h1...h6的元素 |
| :animated | $("div :animated") | 选取正在执行动画的<div>元素 |
| $(this) | $("td",$(this)) | 选取当前td |
⒌属性过滤选择器
| $("div[id]") | 选取有id属性的<div> |
| $("div[title=test]") | 选取title属性为test的<div> |
| $("input[name=abc]") | getElementsByName |
| $("div[title != test]") | 选取title属性不为test的<div> |
⒍表单对象过滤选择器
| $("#form1 :enabled") | 选择id为form1的表单内所有启动的元素 |
| $("#form1 :disabled") | 选取id为form1的表单内所有禁用的元素 |
| $("input :checked") | 选取所有选中的元素（radio、checkbox） |
| $("select :selected") | 选取所有选中的选项元素(下拉列表) |
⒎表单选择器
| $(":input") | 选取所有<input>、<textarea>、<select>和<button>元素，和$("input")不一样，$("input")只获得<input>元素 |
| $(":text") | 选取所有单行文本框，等价于$("input :[type=text]") |
| $(":password") | 选取所有密码框，同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden等 |
⒏DOM操作相关
1.使用html()方法读取或设置元素的innerHTML
$("a:first").html("hello");
2.使用text()方法读取或设置元素的innerText
$("a:first").text("hello");
3.使用attr()方法读取或设置元素的属性，对于Jquery没有封装的属性用attr进行操作
$("a:first").attr("href","www.baidu.com");
4.使用removeAttr删除属性，删除的属性在源代码中看不到，这是和清空属性的区别。
略
5.动态创建dom节点，使用$(html字符串)创建Dom节点，该方法返回一个Jquery对象，然后调用append等方法将创建的节点添加到Dom中。
var link = $("<a href='https://www.baidu.com'>百度</a>");
$("div:first").append(link);
| append | 在元素的末尾添加dom节点 |
| prepend | 在元素的开始添加dom节点 |
| after | 在元素之后添加dom节点（添加兄弟节点） |
| before | 在元素之前添加dom节点 |
6.删除节点
①remove() 删除选择节点
$("ul li.testitem").remove();
删除ul下li中有testitem样式的元素
remove方法的返回值是被删除的节点对象，还可以继续使用被删除的节点重新添加到其它节点下。
②empty() 将节点内容清空
