文章目录

- @[toc]
四、函数
- 2.第二组函数
- - 1.remove():将数组中所有DOM对象及其子对象一并删除。
  - 2.empty():将数组中所有DOM对象的子对象删除。
  - 4.html():返回的结果相当于innerHTML。
  - 前四个函数的例子
  - 5.each()
  - each实例
五、事件
- 1.定义事件监听元素
- - 1.1第一种事件绑定语法
  - 1.2第二种事件绑定方式，on
  - 实例

传送门：《jQuery详解（第一篇：对象转换、选择器、过滤器、函数）》https://blog.csdn.net/gao1213977085/article/details/119256862

四、函数

2.第二组函数

1.remove():将数组中所有DOM对象及其子对象一并删除。

$("选择器").remove();

2.empty():将数组中所有DOM对象的子对象删除。

$("选择器").empty();

###3.append():给dom对象在他的后面增加新的dom对象。

$("选择器").append(子对象);

4.html():返回的结果相当于innerHTML。

html();//获取dom数组中第一个dom对象的文本值。
html(参数);//给dom数组中所有成员设置新的文本内容。

前四个函数的例子

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>函数2</title><style type="text/css">div{background: gray;}</style><script type="text/javascript" src="js/jquery-3.4.1.js"></script><script type="text/javascript">//绑定事件$(function(){$("#btn1").click(function(){//删除dom和子dom数组$("select").remove();})    $("#btn2").click(function(){//删除子dom数组$("select").empty();})    $("#btn3").click(function(){//添加dom对象$("#mydiv").append("<button id = 'newbtn'>我是新加的按钮</button>");$("#mydiv").append("<table border='1'><tr><td>hello<td><tr></table>");})$("#btn4").click(function(){alert($("span").html());})$("#btn5").click(function(){//设置值,包含html标签的内容//把所有span设置成新的内容.$("span").html("我是<b>新的内容</b>")})});</script></head><body><select><option value="老虎">老虎</option><option value="狮子">狮子</option><option value="豹">豹</option></select><br /><br /><br /><select><option value="亚洲">亚洲</option><option value="欧洲">欧洲</option><option value="大洋洲">大洋洲</option></select><br /><br /><div id="mydiv" style="background: red;">我是div</div><br /><br /><span>我是<b>mysql</b>数据库</span><br /><span>学习sql语言</span><br /><br /><button id="btn1">使用remove删除dom和子dom数组</button><br /><button id="btn2">使用empty删除子dom对象</button><br /><button id="btn3">使用append追加dom对象</button><br /><button id="btn4">获取dom数组中第一个dom对象的文本（innerHTML）</button><br /><button id="btn5">设置dom对象的文本（innerHTML）</button><br /></body>
</html>

5.each()

         $(function(){$("#btn6").click(function(){var num=[10,20,30];for(var i=0;i<num.length;i++){doArrayContent(i,num[i]);}})});//定义一个函数,处理数组中的每个内容function doArrayContent(index,element){console.log("index就是数组的循环变量="+index+",element是数组成员="+element);}

each是循环数组，可以循环数组，json，dom对象数组。

1、第一种用法

$.each(要循环的内容，function(index,element){处理函数})

要循环的内容：可以是数组，json对象，dom对象数组。

function:循环的处理函数，每个成员都会执行函数一次。

index:是循环变量的值，名称自定义。

element:和index对应的成员，element名称是自定义的。

doArrayContent:function(index,element){处理函数}

2、第二种用法

$("选择器").each(function(index,element){处理函数});

可以对jquery对象进行循环处理。jQuery对象就是dom数组。

each实例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>函数2</title><style type="text/css"></style>     <script type="text/javascript" src="js/jquery-3.4.1.js"></script><script type="text/javascript">//绑定事件$(function(){              $("#btn7").click(function(){var arr=["abc","hello","jquery"];$.each(arr,function(index,element){console.log("循环变量i="+index+",数组成员="+element);})               });$("#btn8").click(function(){var json={"name":"李四","age":"20","sex":"男"};//key循环json数组.$.each(json,function(i,n){//i 是 key , n:valueconsole.log("i是json的key="+i+",n是json的value"+n);})})$("#btn9").click(function(){var domArray = $(":text");$.each(domArray,function(i,n){//i是循环变量,n是dom对象console.log("i是循环变量="+i+",n是dom对象="+n.value);})})$("#btn10").click(function(){$(":text").each(function(i,n){console.log("i是循环变量="+i+",n是dom对象="+$(n).val());})})});</script></head><body>  <br /><br /><input type="text" value="刘备"/><br /><input type="text" value="关羽"/><br /><input type="text" value="张飞"/><br /><br /><br /><button id="btn7">each循环普通数组</button><br />   <button id="btn8">each循环json对象</button><br /><button id="btn9">each循环dom数组</button><br /><button id="btn10">each第二种语法格式</button><br /></body>
</html>

五、事件

1.定义事件监听元素

1.1第一种事件绑定语法

语法：

$(选择器).监听事件名称(处理函数);

$(选择器)：选择0或多个dom对象。给他们绑定事件。

事件名称：就是JS中去掉on的部分。例如单击事件onclick，这里的事件名称就是click。

事件的处理函数：函数定义，当事件发生时，执行这个函数。

说明：监听事件名称是js事件中去掉on后的内容，js中的onclick的监听事件名称是click。

例如：

//语法：
<input type="button" id="btn" value="绑定事件" />
//绑定事件;
$("#btn").click(function(){单击的处理代码});
//另外一种
$(":button").click(function(){单击的处理代码})//示例：
<input id="btn" type="button" value="读取checkbox的value值" />
<script type="text/javascript">//绑定事件$("#btn").click(function(){alert("button单击了，执行处理函数");})
<script>

PS:

1.js代码是从上往下执行，如果把js代码放到上面无法找到input，所以不能执行。所以js代码放到最后才可以执行上面的代码！

所以注意js的代码位置或者语法。

2.还有另一种写法放在HTML页面head中也可以执行

//页面对象加载后执行，相当于onload事件。
$(function(){$("#btn").click(function(){alert("button单击了，执行处理函数");})
});

1.2第二种事件绑定方式，on

on()方法在被选元素上添加事件处理程序。该方法给API带来很多便利，推荐使用该方法。

$("选择器").on(event,function);

event:事件一个或者多个，多个之间空格分开。

function:规定当事件发生时运行的函数。

<input id="btn" type="button" value="读取checkbox的value值" />
<script type="text/javascript">//绑定事件$("#btn").on("click",function(){alert("按钮单击了")});
<script>

用on的方式效率更高，绑定功能更强。

I带来很多便利，推荐使用该方法。

$("选择器").on(event,function);