jQuery的复习(一)：一些基本操作
笔记总结自：jQuery入门到精通全套完整版(jQuery2020最新版本)Web前端jQuery初学者零基础学习
举个例子
$(document).ready()和$()和jQuery()和window.jQuery()是等价的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个例子</title>
<!-- 指定jquery的库文件，使用相对路径 -->
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
/*
1. $(document),$是函数名，document是函数的参数
作用是将document对象变成jquery库可以使用的对象
2. ready是jquery中的函数，是准备的意思，当页面的dom对像加载成功后，会执行ready函数的内容
ready相当于js中的onload事件
3. function()自定义的表示onload函数执行的功能
*/
$(document).ready(function(){
//自定义功能代码
alert("hello mylove")
})
// 快捷模式
$(function(){
alert("这是快捷模式！")
})
</script>
</head>
<body>
</body>
</html>
实际应用
Dom对象和jQuery对象
-
使用javascript对象创建的对象，就是js对象
var obj = document.getElementById("txt1");obj是dom对象，也就是js对象 -
jquery对象
使用jquery语法表示的对象就是jquery对象，jquery对象都是数组。
var jobj = $("#txt1") -
两个对象可以相互转化
dom对象转换为jquery：$(dom)
jquery对象转为dom：从数组中获取第一个对象，第一个对象就是dom对象，使用[0]或者get(0)
-
为什么要转化？
dom对象可以使用自身的函数，但是如果想要使用jquery对象的函数，就要进行转换才可以。
Dom对象转换为jQuery对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom对象转换为jquery</title>
<script type="text/jscript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
function btnClick(){
//获取dom对象
var obj = document.getElementById("btn");
alert("获取dom对象的属性："+obj.value);
//把dom对象进行转换
var jobj = $(obj);
//调用jquery中的函数，获取value值
alert(jobj.val());
}
</script>
</head>
<body>
<input type="button" id="btn" value="我是按钮" onclick="btnClick()"/>
</body>
</html>
jQuery对象转换为Dom对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery对象转换为dom对象</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
function btnClick(){
//使用jquery对象获取页面的dom对象
//var obj = $("#txt")[0];
var obj = $("#txt").get(0);
//alert(obj.value);
var num = obj.value;
alert("结果是："+num*num);
}
</script>
</head>
<body>
<h5 align="center">计算整数的平方</h5>
<div align="center">
<input type="button" value="计算平方" onclick="btnClick()" />
<br>
<br>
<input type="text" id="txt" value="请输入整数" />
</div>
</body>
</html>
选择器
基本选择器
-
就是一个字符串，用来定位dom对象的，定位了dom对象就可以通过jquery函数来操作dom对象。
-
常用的选择器：
-
id选择器： $("#dom对象的id值")
通过dom对象的id定位到dom对象，通过id找对象，id在当前页面时唯一值！
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> div{ background: gray; width: 200px; height: 100px; } </style> <title>选择器的使用</title> <script type="text/javascript" src="js/jquery-3.6.0.js"></script> <script type="text/javascript"> function fun1(){ //id选择器、 var obj = $("#one"); //使用jquery对象改变样式 obj.css("background","red"); } </script> </head> <body> <div id="one">我是第一个div</div> <br> <div class="two">我是第二个</div> <br /> <div>我是没有id和calss的div</div> <br/> <span>我是span标签</span> <input type="button" value="获取id是one的dom对象"οnclick="fun1()" /> </body> </html>-
class选择器：$(".class 样式名称")
class表示css中的样式，使用样式的名称定位dom对象
function fun2(){ //class选择器 var obj = $(".two"); obj.css("background","yellow"); }-
标签选择器：$(“标签名称”)
使用标签名称定位dom对象！
function fun3(){ //标签选择器 var obj = $("div");//是一个数据，有三个对象 //jequry的操作对像都是操作数组的全部成员，所以是所有div都设置了背景色 obj.css("background","blue"); }-
所有选择器：$("*")
选取页面中的所有dom对象
-
混合选择器：$("#id",".class",“div”)
-
表单选择器
-
是指文本框，单选框，复选框，下拉列表等元素的选择方式，该方法和是否存在表单form无关，都能做出相应的选择。表单选择器是为了更加容易地操作表单，表单选择器根据元素类型来定义。
-
使用<input>标签的type属性值，定位dom对象的方式
语法：$(":type的属性值"）
$(":text")是指所有的单行文本框 $(":button")是指所有的按钮 -
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
background: gray;
width: 200px;
height: 100px;
}
.two{
background: pink;
}
</style>
<title>选择器的使用</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
function fun1(){
//表单选择器
var obj = $(":text");
//获取value属性的指，val()是jquery中的函数，读取value的属性值
alert(obj.val());
}
function fun2(){
//定位radio
var obj = $(":radio");//数组，目前是两个对象
//循环数组，数组中的成员是dom对象
for(var i = 0;i < obj.length;i++){
//从数组获取成员，使用下标的形式
var dom = obj[i];
//使用dom对象的属性，获取value值
alert(dom.value);
}
}
function fun3(){
var obj = $(":checkbox");//数组，有三个对象
for(var i = 0;i < obj.length;i++){
//从数组获取成员，使用下标的形式
var dom = obj[i];
//使用dom对象的属性，获取value值
alert(dom.value);
//使用jquery对象
alert("jquery函数调用="+$(dom).val());
}
}
</script>
</head>
<body>
<input type="text" value="我是type=text" /><br />
<br />
<input type="radio" value="man"/>男<br>
<input type="radio" value="woman"/>女<br>
<br>
<input type="checkbox" value="bike" />骑行<br>
<input type="checkbox" value="football" />足球<br>
<input type="checkbox" value="music" />音乐<br>
<br>
<input type="button" value="读取text的值" onclick="fun1()"/><br>
<input type="button" value="读取radio的值" onclick="fun2()"/><br>
<input type="button" value="读取checkbox的值" onclick="fun3()"/><br>
</body>
</html>
过滤器
在定位了dom对象后，根据一些条件筛选dom对象。
过滤器有一个字符串，用来筛选dom对象的，不能单独使用，要和选择器一起使用。
基本过滤器
-
选择第一个first，保留数组中的第一个dom对象
$("选择器：first") -
选择最后一个last，保留数组中最后的dom对象
$("选择器：last") -
选择数组中指定对象
$("选择器：eq(数组索引)") -
选择数组中大于指定索引的所有dom对象
$("选择器：gt(数组索引)") -
举例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
background: gray;
}
</style>
<title>过滤器的使用</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
//当页面dom对象加载之后，给对象绑定事件，因为此时button在内存中已经创建好了，才能引用
$("#btn").click(function(){
//alert("按钮单击！")
var obj = $("div:first");
obj.css("background","green");
})
$("#btn1").click(function(){
var obj = $("div:last");
obj.css("background","red");
})
$("#btn2").click(function(){
var obj = $("div:eq(3)");
obj.css("background","yellow");
})
$("#btn3").click(function(){
var obj = $("div:gt(3)");
obj.css("background","blue");
})
$("#btn4").click(function(){
var obj = $("div:lt(4)");
obj.css("background","blue");
})
})
</script>
</head>
<body>
<div id="cne">我是div-0 </div>
<div id="two">我是div-1 </div>
<div id="">我是div-2
<div id="">我是div-3</div>
<div id="">我是div-4</div>
</div>
<div id="">我是div-5</div>
<br>
<span>我是span</span>
<p>我是功能按钮</p>
<input type="button" id="btn" value="获得第一个div"/><br>
<input type="button" id="btn1" value="获得最后一个div"/><br>
<input type="button" id="btn2" value="获得下标为3的div"/><br>
<input type="button" id="btn3" value="获得大于3的div"/><br>
<input type="button" id="btn4" value="获得小于4的div"/><br>
</body>
</html>
表单属性过滤器
根据表单中的dom对象的状态情况，定位dom对象
启用状态：enableed
不可用状态：disabled
选择状态：checked，例如radio、checkbox
- 选择可用的文本框
$(":text":enabled)
- 选择不可用的文本框
$(":text":disabled)
- 复选框中的元素
$(":checkbox:checked")
- 选择指定下拉列表的被选中元素
选择器>option:selected
- 举例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
background: gray;
}
</style>
<title>过滤器的使用</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
//当页面dom对象加载之后，给对象绑定事件，因为此时button在内存中已经创建好了，才能引用
$("#btn1").click(function(){
//获取所有可用的text
var obj = $(":text:enabled");
//设置jquery中所有的dom对象值
obj.val("hello");
})
$("#btn2").click(function(){
//获取所有可用的checkbox
var obj = $(":checkbox:checked");
//设置jquery中所有的dom对象值
for(var i = 0;i <obj.length;i++){
alert(obj[i].value);
alert("jquery显示："+$(obj[i]).val());
}
})
$("#btn3").click(function(){
//var obj = $("select>option:selected");
var obj = $("#yuyan>option:selected");
alert(obj.val());
})
})
</script>
</head>
<body>
<input type="text" id="txt1" value="text1"/><br>
<input type="text" id="txt2" value="text2" disabled="true"/><br>
<input type="text" id="txt3" value="text3"/><br>
<input type="text" id="txt4" value="text4" disabled/><br>
<br>
<input type="checkbox" value="游泳" />游泳<br>
<input type="checkbox" value="健身" checked="true" />健身<br>
<input type="checkbox" value="游戏" checked />游戏<br>
<br>
<select id="yuyan">
<option value="java">java语言</option>
<option value="go" selected="true">go语言</option>
<option value="python">python语言</option>
</select>
<p>功能选择</p>
<input type="button" id="btn1" value="设置可用的text为hello"/><br>
<button id="btn2">显示复选框的值</button><br>
<button id="btn3">显示下拉框的值</button><br>
</body>
</html>
事件
定义元素监听事件
$(选择器).事件名称(事件的处理函数)
$(选择器)：定位dom对象，dom对象可以有多个，这些对象都绑定了事件了
事件名称：就是js中事件去掉on部分，例如js中的单击事件，onclick(),jquery对象中的事件名称就是click
事件的处理函数：就是一个function，当事件发生的时候，执行这个函数的内容。
例如给button绑定单击事件：
$("#btn").click(function(){
alert("单击了按钮！！！")
})
on()绑定事件
$(选择器).on(event,function)
event:事件一个或者多个，多个之间空格分开
function：可选，规定事件发生的时候运行该函数
$("#btn").on("click",function(){
处理按钮单击事件！
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
//使用append增加dom对象
$("#btn1").on("click",function(){
$("#mydiv").append("<br><input type='button' id='newbtn' value='我是新的按钮' />");
//给on按钮点击事件
$("#newbtn").on("click",function(){
alert("新的按钮被单击了！");
})
})
})
</script>
</head>
<body>
<div id="mydiv">
我是一个div，我要一个button
</div>
<br>
<input type="button" value="增加一个按钮" id="btn1"/><br>
</body>
</html>
104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
