一、概述
1、jQuery是js库，库：相当于java的工具类，库是存放东西的， jQuery是存放js代码的地方， 里面有很多function函数
2、作用：使用jQuery简化对dom的操作，执行事件处理，动画，ajax请求
二、dom对象和jQuery对象
1、dom对象，使用javascript的语法创建的对象叫做dom对象， 也就是js对象。
var obj = document.getElementById(“txt1”); obj是dom对象，也叫做js对象
obj.value;
2、jquery对象： 使用jquery语法表示对象叫做jquery对象， 注意：jquery表示的对象都是数组。
例如 var jobj = $(“#txt1”), jobj就是使用jquery语法表示的对象。 也就是jquery对象。 它是一个数组。
现在数组中就一个值。
3、dom对象可以和jquery对象相互的转换。
dom对象可以转为jquery ， 语法： $(dom对象)
jquery对象也可以转为dom对象， 语法： 从数组中获取第一个对象， 第一个对象就是dom对象， 使用[0]或者get{0).
4、为什么要进行dom和jquery的转换：目的是要使用对象的方法，或者方法。
当你使用dom对象时，可以使用dom对象的属性或者方法， 如果你要想使用jquery提供的函数，必须是jquery对象才可以。
示例代码1：
<body>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function btnClick(){
//获取dom对象
var obj = document.getElementById("btnClick");
//使用dom对象的value属性,获取值
alert(obj.value);
//把dom对象转成jquery对象,使用jquery库中的函数
var jobj = $(obj);
//调用jquery中的函数,获取value的值
alert(jobj.val());
}
</script>
<input type="button" value="==我是按钮==" id="btnClick" onclick="btnClick()"/>
</body>
示例代码2：
<body>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function btnClick(){
//使用jquery的语法,获取dom对象
// var obj = $("#txt")[0];//从数据中获取下标是0的dom对象
var obj = $("#txt").get(0);//从数组中获取下标是0的dom对象
var num = obj.value;
obj.value = num * num;
}
</script>
<input type="button" value="计算平方" onclick="btnClick()" />
<br>
<input type="text" id="txt" />
</body>
三、基本使用
1、获取jquery的js文件
2、在你的程序中加入js文件的地址
<script type="text/javascript" src="js/jquery-3.4.1.js
"></script>
3、获取jquery对象，调用它的函数
4、jquery3.4.1的压缩和非压缩版本的地址
链接：https://pan.baidu.com/s/1OoYRjPkM7DE_YAN8hDLMIA
提取码：acbk
四、选择器
就是一个字符串， 用来定位dom对象的。定位了dom对象，就可以通过jquery的函数操作dom
1、基本选择器
（1）id选择器
语法： $(“#dom对象的id值”)
通过dom对象的id定位dom对象的。 通过id找对象， id在当前页面中是唯一值。
（2）class选择器
语法： $(".class样式名)
class表示css中的样式， 使用样式的名称定位dom对象的。
（3）标签选择器
语法： $(“标签名称”)
使用标签名称定位dom对象的
（4）所有选择器
语法：$(“*”)
选择页面中所有的dom对象
（5）组合选择器
语法：$(“#id,class,标签名”)
使用id，class，标签的选择器，多个dom对象的定位
2、表单选择器
语法： $(“:type属性值”)
使用标签的type属性值，定位dom对象的方式。
例如，所有的单行文本，$(“:text”)
- 根据type属性值定位dom对象的，页面中的组件一定有type属性才可以使用
- 表单选择器和form标签无关
示例代码：
<body>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function fun1(){
//使用表单选择器$(:type的值"")
var obj = $(":text");
//获取value属性的值 val()是jquery中的函数,读取value属性值
alert(obj.val());
}
function fun2(){
//定位radio
var obj = $(":radio");//数组,目前是两个对象,man,woman
for(var i=0;i<obj.length;i++){
//循环数组,数组中的成员是dom对象,可以使用dom的属性或者函数
//从数组中获取成员,使用下标的方式
var dom = obj[i];
//使用dom对象的属性,获取value值
alert(dom.value);
/* var jobj = $(obj);
alert(jobj.val()); */
}
}
function fun3(){
//定位checkbox
var obj = $(":checkbox");//数组,有三个对象
for(var i=0;i<obj.length;i++){
var dom = obj[i];
// alert(dom.value);
//使用jquery的val函数,获取value的值
//1.需要jquery对象
var jobj = $(dom);
//2.调用jquery函数
alert(jobj.val());
}
}
</script>
<input type="text" value="我是type=text" /><br>
<input type="radio" value="man" />男<br>
<input type="radio" value="women" />女<br>
<input type="checkbox" value="bike" />骑行<br>
<input type="checkbox" value="football" />足球<br>
<input type="checkbox" value="music" />音乐<br>
<input type="button" value="我是type=text" onclick="fun1()" /><br>
<input type="button" value="获取radio属性值" onclick="fun2()" /><br>
<input type="button" value="获取checkbox属性值" onclick="fun3()" /><br>
</body>
五、过滤器
1、概念
在定位了dom对象后，根据一些条件筛选dom对象。
过滤器又是一个字符串，用来筛选dom对象的。
过滤器不能单独使用， 必须和选择器一起使用。
2、基本过滤器
（1）$(“选择器:first”)
语法：$(“选择器:first”)
定位数组中的第一个dom对象
（2）$(“选择器:last”)
语法：$(“选择器:last”)
定位数组中的最后一个dom对象
（3）$(“选择器:eq(下标)”)
语法：$(“选择器:eq(数组的下标)”)
定位到制定下标的dom对象
（4）$(“选择器:lt(下标)”)
语法：$(“选择器:lt(下标)”)
定位小于指定下标的dom对象
（5）$(“选择器:gt(下标)”)
语法：$(“选择器:gt(下标)”)
定位大于指定下标的dom对象
示例代码：
<style type="text/css">
div{
background: gray;
}
</style>
</head>
<body>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
//$(document).ready(函数):当页面中的dom对象加载成功后,会执行ready()
//相当于是onload()
$(function(){
//当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了,才能使用
$("#btn1").click(function(){
//过滤器
var obj = $("div:first");
obj.css("background","red");
})
})
//绑定btn2的事件
$(function(){
$("#btn2").click(function(){
var obj = $("div:last");
obj.css("background","green");
})
})
//绑定btn3的事件
$(function(){
$("#btn3").click(function(){
var obj = $("div:eq(3)");
obj.css("background","blue");
})
})
//绑定btn4的事件
$(function(){
$("#btn4").click(function(){
var obj = $("div:lt(3)");
obj.css("background","orange");
})
})
//绑定btn5的事件
$(function(){
$("#btn5").click(function(){
var obj = $("div:gt(3)");
obj.css("background","yellow");
})
})
</script>
<div id="one">我是div-0</div>
<div id="two">我是div-1</div>
<div>我是div-2
<div>我是div-3</div>
<div>我是div-4</div>
</div>
<div>我是div-5</div>
<br/>
<span>我是sapn</span>
<br/>
<input type="button" value="获取第一个div" id="btn1" /><br>
<input type="button" value="获取最后一个div" id="btn2" /><br>
<input type="button" value="获取下标为3的div" id="btn3" /><br>
<input type="button" value="获取下标3前面的div" id="btn4" /><br>
<input type="button" value="获取下标3后面的div" id="btn5" /><br>
</body>
3、表单属性过滤器
使用dom对象的状态作为筛选条件，定位dom对象
（1）$(“选择器:enabled”)
语法：$(“选择器:enabled”)
定位可用的dom对象
（2）$(“选择器:disabled”)
语法：$(“选择器:disabled”)
定位不可用的dom对象
（3）$(“选择器:checked”)
语法：$(“选择器:checked”)
定位选中的dom对象
（4）$(“选择器>option:selected“)
语法：$(“选择器:>option:selected”)
定位下拉列表框选中选中的值
示例代码：
<body>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//获取所有可以使用的text
var obj = $(":text:enabled");
//获取jquery数组值所有dom对象的value值
obj.val("Hello");
})
$("#btn2").click(function(){
//获取选中的checkbox
var obj = $(":checkbox:checked");
for(var i=0;i<obj.length;i++){
// alert(obj[i].value);//第一种方式
var jobj = $(obj[i]);//第二种方式
alert(jobj.val());
}
})
$("#btn3").click(function(){
//获取select选中的值
var obj = $("select>option:selected");
for(var i=0;i<obj.length;i++){
var dom = obj[i];
var jobj = $(dom);
alert(jobj.val());
}
})
})
</script>
<input type="text" value="text1" id="txt1" /><br>
<input type="text" value="text2" id="txt2" disabled="true"/><br>
<input type="text" value="text3" id="txt3" /><br>
<input type="text" value="text4" id="txt4" disabled="true"/><br>
<br>
<input type="checkbox" value="游泳" />游泳<br>
<input type="checkbox" value="健身" checked />健身<br>
<input type="checkbox" value="电子游戏" checked />电子游戏<br>
<br>
<select id="yuyan">
<option value="java">java语言</option>
<option value="go" select >go语言</option>
<option value="python">python语言</option>
</select>
<br>
<br>
<input type="button" value="设置可以的text的value是hello" id="btn1" /><br>
<button id="btn2">显示选中的复选框的值</button><br>
<button id="btn3">获取select选中的值</button>
</body>
六、函数
1、val()
操作对象的value属性值
2、text()
操作标签的文本内容
3、attr()
操作对象的value，文本以外的属性，例如：转换图片
4、remove()
删除dom对象和它的子对象，例如：删除多选框全部内容
5、empty()
删除dom的子对象
6、apppend()
添加dom对象
7、html()
操作文本标签，和JS中的innerHTML的作用一样
8、each()
循环函数，还可以循环数组，JSON对象，jquery对象
- 静态函数调用：$.each(要遍历的对象，function(index,element){处理程序})
- 使用jquery对象调用：jquery对象.each(function(index,element){处理程序})
示例代码1：
<body>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//读取第一个文本框的值
//val()获取dom数组中第一个对象的value属性值
var obj = $(":text").val();
alert(obj);
})
$("#btn2").click(function(){
//设置所有的text的value为新值
var obj = $(":text").val("三国演义");
})
$("#btn3").click(function(){
//获取div,text()参数,获取文本值,连接成字符串
alert($("div").text());
})
$("#btn4").click(function(){
//设置div的文本
var obj = $("div").text("给div文本赋值");
})
$("#btn5").click(function(){
//读取相片属性的值
alert($("img").attr("src"));
})
$("#btn6").click(function(){
//设置照片属性的值
$("img").attr("src","img/a.jpg.jpeg");
})
})
</script>
<input type="text" value="刘备" id="txt1" />
<input type="text" value="关羽" id="txt2" /><br>
<input type="text" value="张飞" id="txt3" /><br>
<br>
<div>我是第一个div</div>
<div>我是第二个div</div>
<div>我是第三个div</div>
<br>
<img src="img/aa972d47dec755eea813c22d2d42870d.jpeg" id="img" />
<br>
<input type="button" value="获取第一文本框的值" id="btn1" /><br>
<input type="button" value="设置所有的text的value为新值" id="btn2" /><br>
<input type="button" value="获取div,text()参数,获取文本值,连接成字符串" id="btn3" /><br>
<input type="button" value="设置div的文本" id="btn4" /><br>
<input type="button" value="读取相片属性的值" id="btn5" /><br>
<input type="button" value="设置相片属性的值" id="btn6" /><br>
</body>
示例代码2：
<body>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
//在dom对象创建好后,绑定事件
$(function(){
$("#btn1").click(function(){
//使用remove:删除父与子所有的dom对象
$("select").remove();
})
$("#btn2").click(function(){
//使用empty 删除子dom对象
$("select").empty();
})
$("#btn3").click(function(){
//使用append,增加dom对象
$("div").append("<input type='button' value='新增加的按钮'>");
})
$("#btn4").click(function(){
//使用html()函数,获取数组中第一个dom对象的文本值(innerHTML)
alert($("span:first").text());//我是mysql数据库
alert($("span:first").html());//我是mysql数据库
})
$("#btn5").click(function(){
$("span:first").text("我是张三！")
$("span:first").html("我是张三！")
})
$("#btn6").click(function(){
//循环普通数组,非dom数组
var arr = [12,58,35];
$.each(arr,function(index,element){
alert("循环变量" + index + "=========数组成员" + element);
})
})
$("#btn7").click(function(){
//循环json
var json = {"name":"张三","age":"20"};
$.each(json,function(i,n){
alert("i的key值=" + i + ",n的值value=" + n);
});
})
$("#btn8").click(function(){
//循环dom数组
var domArray = $(":text");
$.each(domArray,function(i,n){
alert("i= " + i + " ,n=" + n.value);
})
})
$("#btn9").click(function(){
//循环jquery数组
$(":text").each(function(i,n){
alert("i= " + i + " ,n=" + n.value);
})
})
})
</script>
<input type="text" value="刘备" id="txt1" /><br>
<input type="text" value="关羽" id="txt2" /><br>
<input type="text" value="张飞" id="txt3" /><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>
<span>我是mysql <b>数据库</b></span>
<br>
<span>我是jdbc</span>
<br>
<br>
<div id="father">我是第一个div</div>
<br>
<input type="button" value="使用remove删除父和子对象" id="btn1" /><br>
<input type="button" value="使用empty删除子对象" id="btn2" /><br>
<input type="button" value="使用appand,增加dom" id="btn3" /><br>
<input type="button" value="使用获取第一个dom的文本值" id="btn4" /><br>
<input type="button" value="设置span的dom文本值" id="btn5" /><br>
<input type="button" value="循环普通数组" id="btn6" /><br>
<input type="button" value="循环json" id="btn7" /><br>
<input type="button" value="循环dom数组" id="btn8" /><br>
<input type="button" value="循环jquery对象" id="btn9" /><br>
</body>
七、事件
1、绑定事件
$(选择器).事件名称(事件的处理函数)
$(选择器)：定位dom对象， dom对象可以有多个， 这些dom对象都绑定事件了
事件名称：就是js中事件去掉on的部分， 例如 js中的单击事件 onclick(),
jquery中的事件名称，就是click，都是小写的。
事件的处理函数：就是一个function ，当事件发生时，执行这个函数的内容。
例如给id是btn的按钮绑定单击事件
$("#btn").click(funtion(){
alert("btn按钮单击了")
})
2、on绑定事件
$(选择器).on( 事件名称 , 事件的处理函数)
事件名称： 就是js事件中去掉on的部分， 例如js中onclick ,这里就是click
事件的处理函数： function 定义。
例如，
<input type="button" id="btn">
$("#btn").on("click", function() { 处理按钮单击 } )
4655
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
