1. 第一组 21
1.1 val 21
操作数组中 DOM 对象的 value 属性.
$(选择器).val() ：无参数调用形式， 读取数组中第一个 DOM 对象的 value 属性值
$(选择器).val(值)：有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值
1.2 text
操作数组中所有 DOM 对象的【文字显示内容属性】
$(选择器).text():无参数调用，读取数组中所有 DOM 对象的文字显示内容，将得到内容拼接
为一个字符串返回
$(选择器).text(值):有参数方式，对数组中所有 DOM 对象的文字显示内容进行统一赋值
1.3 attr
对 val, text 之外的其他属性操作
$(选择器).attr(“属性名”): 获取 DOM 数组第一个对象的属性值
$(选择器).attr(“属性名”,“值”): 对数组中所有 DOM 对象的属性设为新值
1.4 例 21-22
代码在E:\java学习\jQuery\course\course4
fun1.html
<!-- 函数的使用 21-22 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数的使用</title>
<style type="text/css">
div{
background:yellow;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
//在dom对象创建好后,绑定事件
$(function(){
$("#btn1").click(function(){
//val() 获取dom数组中第一个对象的value属性值
//:text表单选择器
var text = $(":text").val();
alert(text)
})
$("#btn2").click(function(){
//设置所有的text的value为新值
$(":text").val("三国演义");
})
$("#btn3").click(function(){
//获取div ,text()无参数,获取dom对象的文本值,连接成一个字符串
alert($("div").text());
})
$("#btn4").click(function(){
//设置div的文本值
$("div").text("新的div文本值");
})
$("#btn5").click(function(){
//读取指定属性的值
alert($("img").attr("src"))
})
$("#btn6").click(function(){
//设置指定属性的,指定值
$("img").attr("src","img/ex2.jpg")
})
})
</script>
</head>
<body>
<input type="text" value="刘备" /><br/>
<input type="text" value="关羽" /><br/>
<input type="text" value="张飞" /><br/>
<br/>
<div>1.我第一个div</div>
<div>2.我第二个div</div>
<div>3.我第三个div</div>
<br/>
<img src="img/ex1.jpg" id="image1" />
<br/>
<input type="button" value="获取第一文本框的值" id="btn1"/>
<br/>
<br/>
<input type="button" value="设置所有文本框的value值" id="btn2"/>
<br/>
<br/>
<input type="button" value="获取所有div的文本值" id="btn3"/>
<br/>
<br/>
<input type="button" value="设置div的文本值" id="btn4"/>
<br/>
<br/>
<input type="button" value="读取src属性的值" id="btn5"/>
<br/>
<br/>
<input type="button" value="设置指定的属性值" id="btn6"/>
</body>
</html>
2. 第二组 23
2.1 hide
$(选择器).hide() :将数组中所有 DOM 对象隐藏起来
2.2 show
$(选择器).show():将数组中所有 DOM 对象在浏览器中显示起来
2.3 remove
$(选择器).remove() : 将数组中所有 DOM 对象及其子对象一并删除
2.4 empty
$(选择器).empty()：将数组中所有 DOM 对象的子对象删除
2.5 append
为数组中所有 DOM 对象添加子对象
$(选择器).append("
我动态添加的 div
")
2.6 html 24
设置或返回被选元素的内容（innerHTML）。
$(选择器).html()：无参数调用方法，获取 DOM 数组第一个匹元素的内容。
$(选择器).html(值)：有参数调用，用于设置 DOM 数组中所有元素的内容。
2.7 each 25
each语法
1). 可以对 数组， json ，dom数组循环处理。 数组， json中的每个成员都会调用一次处理函数。
var arr = [1, 2, 3] //数组
var json = ["name":"lisi","age":20 ]
var obj = $(":text");
2.7.1 语法： 25
$.each( 循环的内容， 处理函数 ) ：表示使用jquery的each，循环数组，每个数组成员，
都会执行后面的 “处理函数” 一次。
$: 相当于是java的一个类名
. each:就是类中的静态方法。
静态方法调用，可以使用 类名 . 方法名称
处理函数:function(index, emelent) :
index, element都是自定义的形参， 名称自定义。
index：循环的索引
element：数组中的成员
2.7.2 举例说明 25
js循环数组：
for(var i=0;i
var item = arr[i]; //数组成员
//操作数组成员
shuchu( i , item);
}
function shuchu(index, emlemnt){
输出index ，element
}
2.7.3 循环jquery对象， jquery对象就是dom数组 26
jquery对象.each( function(index,element) {} )
each 是对数组，json 和 dom 数组等的遍历,对每个元素调用一次函数。
语法 1：$.each( 要遍历的对象, function(index,element) { 处理程序 } )
语法 2：jQuery 对象.each( function( index, element ) { 处理程序 } )
index: 数组的下标
element: 数组的对象
代码在E:\java学习\jQuery\course\course4
fun2.html
<!-- 函数的使用2 23-24 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数的使用2</title>
<style type="text/css">
div{
background: yellow;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//使用remove:删除父和子所有的dom对象
$("select").remove();
})
$("#btn2").click(function(){
//使用remove:删除子dom对象
$("select").empty();
})
$("#btn3").click(function(){
//使用append增加一个dom对象
//$("#fatcher").append("<input type = 'button' value='我是新增加的按钮'/>")
//增加一个表格
$("#fatcher").append("<table border=1><tr><td>第一列</td><td>第二列</td></tr></table>");
})
//html函数 24
$("#btn4").click(function(){
//使用html()函数,获取数组中第一个dom对象的文本值(innerHTML)
//alert($("span").text()); // 我是mysql数据库
alert( $("span").html() ); //我是mysql <b>数据库</b>
})
$("#btn5").click(function(){
//使用 html(有参数):设置dom对象的文本值
$("span").html("我是新的<b>数据</b>");
})
//each 25-26
$("#btn6").click(function(){
//循环普通数组,非dom数组 25
var arr = [11,12,13]
$.each(arr,function(index,element){//index,element随便写
alert("循环变量="+index+"数组成员："+element);
})
})
$("#btn7").click(function(){
//循环json 26
var json = {"name":"张三","age":20}
$.each(json,function(i,n){
alert("i是key="+i+",n是值="+n);
})
})
$("#btn8").click(function(){
//循环dom数组 26
var domArray = $(":text");//dom数组 26
$.each(domArray,function(i,n){
// n 是数组中的dom对象
alert("i="+i+" ,n="+n.value);
})
})
$("#btn9").click(function(){
//循环jquery对象, jquery对象就是dom数组 26
$(":text").each(function(i,n){
alert("i="+i+" ,n="+n.value);
})
})
})
</script>
</head>
<body>
<input type="text" value="刘备" /><br>
<input type="text" value="关羽" /><br>
<input type="text" value="张飞" /><br>
<br>
<select>
<option value="老虎">老虎</option>
<option value="狮子">狮子</option>
<option value="豹子">豹子</option>
</select>
<br/>
<br/>
<select>
<option value="亚洲">亚洲</option>
<option value="欧洲">欧洲</option>
<option value="美洲">美洲</option>
</select>
<br/>
<br/>
<div id="fatcher">我是第一个div</div>
<br/>
<br/>
<span>我是mysql <b>数据库</b></span> <!-- <b></b>加粗的意思 -->
<br/>
<span >我是jdbc</span>
<br/>
<br/>
<input type="button" value="使用remove删除父和子对象" id="btn1"/>
<br/>
<br/>
<input type="button" value="使用empty删子对象" id="btn2"/>
<br/>
<br/>
<input type="button" value="使用append,增加dom对象" id="btn3"/>
<br/>
<br/>
<input type="button" value="获取第一个dom的文本值" id="btn4"/>
<br/>
<br/>
<input type="button" value="设置span的所以dom的文本值" id="btn5"/>
<br/>
<br/>
<input type="button" value="循环普通数组" id="btn6"/>
<br/>
<br/>
<input type="button" value="循环json" id="btn7"/>
<br/>
<br/>
<input type="button" value="循环dom数组" id="btn8"/>
<br/>
<br/>
<input type="button" value="循环jquery对象" id="btn9"/>
</body>
</html>
3. 绑定事件 27
为页面元素绑定事件，即对于指定页面元素，当某个事件发生后，执行指定动作
3.1 定义元素监听事件
语法：$(选择器).监听事件名称(处理函数);
说明：监听事件名称是js事件中去掉on后的内容，js中的onclick的监听事件名称是click
例如：
为页面中所有的button绑定onclick,并关联处理函数fun1
$("button").click(fun1)
为页面中所有的tr标签绑定onmouseover，并关联处理函数fun2
$("tr").mouseover(fun2)
3.2 on()绑定事件 27
on 事件绑定
$(选择器).on( 事件名称 , 事件的处理函数)
事件名称： 就是js事件中去掉on的部分， 例如js中onclick ,这里就是click
事件的处理函数： function 定义。
例如，
$("#btn").on("click", function() { 处理按钮单击 } )
on()方法在被选元素上添加事件处理程序。该方法给API带来很多便利，推荐使用该方法
语法：$(选择器).on(event,,data,function)
event：事件一个或者多个，多个之间空格分开
data：可选。规定传递到函数的额外数据，json格式
function:可选。规定当事件发生时运行的函数。
代码在E:\java学习\jQuery\course\course4
event1.html
<!-- 事件绑定 on 27-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件绑定</title>
<style type="text/css">
div{
background: yellow;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//使用append,增加dom对象
$("#mydiv").append("<input id='newBtn' type='button' value='我是新增加的按钮'/>")
//使用on给新增的按钮绑定事件
$("#newBtn").on("click",function(){
alert("新增的按钮被单击了");
})
})
})
</script>
</head>
<body>
<div id="mydiv">
我是一个div ，需要增加一个button
</div>
<input type="button" value="创建一个button,绑定一个click" id="btn1"/>
<br/>
</body>
</html>
