目录
第一组
1、val()
操作数组中 DOM 对象的value属性
$(选择器).val() :无参数调用形式, 读取数组中第一个 DOM 对象的 value 属性值
$(选择器).val(值):有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值
2、text()
操作数组中所有 DOM 对象的文字显示内容属性
$(选择器).text():无参数调用,读取数组中所有 DOM 对象的文字显示内容,将得到内容拼接 为一个字符串返回
$(选择器).text(值):有参数方式,对数组中所有 DOM 对象的文字显示内容进行统一赋值
3、attr()
对 val, text 之外的其他属性操作
$(选择器).attr(“属性名”): 获取 DOM 数组第一个对象的属性值
$(选择器).attr(“属性名”,“值”): 对数组中所有 DOM 对象的属性设为新值
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<p>文本框</p>
<input type="text" value="Java"><br/>
<input type="text" value="C++"><br/>
<p>文本数据text</p>
<div>第1个div</div>
<div>第2个div</div>
<img id="img1" src="images/p1.jpg"/><br/>
<img id="img2" src="images/p2.png"/><br/>
<p>功能按钮</p>
<input type="button" id="btn1" value="获取第一个文本框的值">
<input type="button" id="btn2" value="设置所有文本框的值">
<input type="button" id="btn3" value="获取所有文本数据的文字text">
<input type="button" id="btn4" value="设置所有文本数据的文字">
<input type="button" id="btn5" value="获取除text value之外的">
<input type="button" id="btn6" value="设置除text value之外的">
</body>
<script>
$(function(){
$("#btn1").click(function(){
alert( $(":text").val());
})
$("#btn2").click(function(){
$(":text").val("hello Java");
})
$("#btn3").click(function(){
alert($("div").text());
})
$("#btn4").click(function(){
$("div").text("Hello javase");
})
$("#btn5").click(function(){
//images/p1.jpg
alert($("#img1").attr("src"));
})
$("#btn6").click(function(){
$("#img1").attr("src","images/p4.jpg");
})
})
</script>
</html>
第二组
1、hide()
$(选择器).hide() :将数组中所有 DOM 对象隐藏起来
2、show()
$(选择器).show():将数组中所有 DOM 对象在浏览器中显示起来
3、remove()
$(选择器).remove() : 将数组中所有 DOM 对象及其子对象一并删除
4、empty()
$(选择器).empty():将数组中所有 DOM 对象的子对象删除
5、append ()
为数组中所有 DOM 对象添加子对象
$(选择器).append("<div>我动态添加的 div</div>")
6、html ()
设置或返回被选元素的内容(innerHTML)。
$(选择器).html():无参数调用方法,获取 DOM 数组第一个匹元素的内容。
$(选择器).html(值):有参数调用,用于设置 DOM 数组中所有元素的内容
7、each ()
each 是对数组,json 和 dom 数组等的遍历,对每个元素调用一次函数。
语法 1:$.each( 要遍历的对象, function(index,element) { 处理程序 } )
语法 2:jQuery 对象.each( function( index, element ) { 处理程序 } )
index: 数组的下标
element: 数组的对象
$:相当于是Java的一个类名
each():就是类中的一个静态方法