jQuery--常用函数
1、val
操作数组中的DOM对象的value属性
// 无参形式，读取数组中第一个dom对象的value值
$(选择器).val()
// 有参形式，对数组中所有dom对象的value属性值统一赋值
$(选择器).val(值)2、text
操作数组中所有 dom对象的文字内容属性
// 无参形式，读取数组中所有dom对象的文字显示内容，
// 将得到的内容拼接为一个字符串返回
$(选择器).text()
// 有参形式，对数组中所有dom对象的文字内容统一赋值
$(选择器).text(值)3、attr
对于val，text之外的其他属性的操作
// 获取dom数组中第一个对象的属性值
$(选择器).attr("属性名")
// 对数组中所有dom对象的属性设定值
$(选择器).attr("属性名","值")
val，text，attr例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数</title>
<script src="jquery-3.7.0.js"></script>
</head>
<body>
<script>
$(function(){
$("#btn1").click(function(){
// 获取数组中第一个的value值
console.log($(":text").val())
})
$("#btn2").click(function(){
// 给数组中所有的赋值
$(":text").val("hello")
})
$("#btn3").click(function(){
// 获取所有dom的text值，连在一起
console.log($("div").text())
})
$("#btn4").click(function(){
// 设置所有dom的text值，连在一起
$("div").text("新的div的值")
})
$("#btn5").click(function(){
// 读取指定属性的值
console.log($("img").attr("src"))
})
$("#btn6").click(function(){
// 读取指定属性的值
$("img").attr("src","img/img2.jpg")
console.log($("img").attr("src"))
})
})
</script>
<input type="text" name="" id="" value="貂蝉">
<input type="text" name="" id="" value="吕布">
<input type="text" name="" id="" value="刘备">
<br>
<div>第一个div</div>
<div>第二个div</div>
<img src="img/img1.jpg" alt="img1" srcset="">
<input type="button" id="btn1" value="获取第一个文本框的值">
<input type="button" id="btn2" value="赋值所有文本框的值">
<input type="button" id="btn3" value="获取所有div的文本内容">
<input type="button" id="btn4" value="设置所有div的文本内容">
<input type="button" id="btn5" value="读取src属性的值">
<input type="button" id="btn6" value="设置src属性的值">
</body>
</html>
4、remove
// 将数组中所有dom对象及其子对象一并删除
$(选择器).remove()5、empty
// 将数组中所有dom对象的子对象删除
$(选择器).empty()6、append
// 为数组中所有dom对象添加子对象
$(选择器).append("<div>动态添加一个div</div>")7、html
设置或者返回被选中元素的内容（相当于innerHTML）
// 无参形式，获取dom数组中第一个元素的内容
$(选择器).html()
// 有参形式，设置dom数组中所有元素的内容
$(选择器).html(值)
remove，empty，append，html例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数</title>
<script src="jquery-3.7.0.js"></script>
</head>
<body>
<script>
$(function(){
$("#btn1").click(function(){
$("#zoon").remove()
})
$("#btn2").click(function(){
$("#zhou").empty()
})
$("#btn3").click(function(){
$("#fatherDiv").append("<button>一个按钮</button>")
})
$("#btn4").click(function(){
console.log($("span").html())
// 使用text()的话只有文本
})
$("#btn5").click(function(){
$("span").html("我是新的<b>数据</b>")
})
})
</script>
<select name="" id="zoon">
<option value="老虎">老虎</option>
<option value="狮子">狮子</option>
<option value="包子">包子</option>
</select>
<select name="" id="zhou">
<option value="亚洲">亚洲</option>
<option value="欧洲">欧洲</option>
<option value="美洲">美洲</option>
</select>
<br>
<div id="fatherDiv">
父div
</div>
<span>我是span标签<b>span</b></span>
<br>
<span>我是span标签么</span>
<input type="button" id="btn1" value="删除父和子对象">
<input type="button" id="btn2" value="删除子对象">
<input type="button" id="btn3" value="给div增加子对象">
<input type="button" id="btn4" value="获取第一个dom的文本值">
<input type="button" id="btn5" value="设置span的所有dom的值">
</body>
</html>
8、each
对数组，json，dom数组等的遍历循环，对每个元素调用一次处理程序
$.each(要遍历的对象,function(index,element){
// 处理程序
})
jQuery对象.each(function(index,element){
// 处理程序
})
// index 数组的下标索引
// element 数组的对象
each例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>each函数</title>
<script src="jquery-3.7.0.js"></script>
</head>
<body>
<script>
$(function () {
// 遍历数组
$("#btn1").click(function () {
var arr = [1, 2, 3]
$.each(arr, function (index, element) {
console.log(index, element)
})
})
// 遍历json
$("#btn2").click(function () {
var json = { "name": "张三", "age": 20 }
$.each(json, function (key, value) {
console.log(key + "的值是 " + value)
})
})
// 遍历dom数组
$("#btn3").click(function () {
var domArr = $(":text")
$.each(domArr, function (index, e) {
console.log(index, e.value)
})
})
// 遍历jQuery对象
$("#btn4").click(function () {
$(":text").each(function (i, n) {
console.log(i, n.value)
})
})
})
</script>
<input type="text" name="" id="" value="text1">
<input type="text" name="" id="" value="text2">
<input type="text" name="" id="" value="text3">
<input type="button" id="btn1" value="遍历数组">
<input type="button" id="btn2" value="遍历json">
<input type="button" id="btn3" value="遍历dom数组">
<input type="button" id="btn4" value="遍历jquery对象">
</body>
</html>
