jquery 操作列表 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()　　将节点内容清空