6. jQuery

ANONYMOUS%

已于 2023-10-18 08:54:47 修改

阅读量70

点赞数

分类专栏： Step2 文章标签： jquery 前端 javascript

于 2023-10-10 10:09:13 首次发布

本文链接：https://blog.csdn.net/weixin_55439500/article/details/133739694

版权

Step2 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. 概念

jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的javaScript库。
jquery包含如下功能
- HTML元素提取并操作
- CSS操作
- HTML事件函数
- JS特效和动画
- HTML DOM遍历和修改
- Ajax

2. 安装

可以从官网上下载 jQuery
使用
jQuery 库是一个 JavaScript 文件，我们可以直接在 HTML中通过script 标签引用它即可。

 <head>
  	<script src="js/jquery-1.12.4.js"></script>
  </head>

3. 语法结构

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

1. 说明：美元符号定义 jQuery($)  选择符（selector）"查询"和"查找" HTML 元素
2. 文档就绪事件，实际上就是文件加载事件。当文档加载完后再加载jQuery。
	$(document).ready(function(){
		...代码部分
	});
3. 文档就绪简写:$(function(){});
4. 区别: jQuery的ready方法与JavaScript中的onload相似，但是也有区别
	jquery.ready()可以执行多次，不会覆盖之前的执行。

4. 选择器

4.1 JS具备的

1. 标签选择器  $("div")
2. id选择器  	$("#p1")
3. class选择器	$(".mydiv")
4. *选择器		$("*")
5. 并集选择器		$("div,ul,table, .mydiv")
6. 后代选择器		$("form input")
7. 子类选择器		$("form > input")

4.2 相邻选择器

$("lable + input")//匹配所有 紧接 在label元素后的 input 元素

4.3 同辈选择器

$("prev ~ siblings") //匹配 prev 元素之后的所有 siblings 元素

4.4 属性选择器

1， $("input[id]")  //选中input中带有id的元素

2. $("input[name='accept']")  //选中 name="accept" 的input

3. $("input[name !='accept']")  //选中name不等于accept的input

4. $("input[name^='news']")  //选中开头为：news的元素

5. $("input[name$='letter']")		//选中结尾位letter的元素

6. $("input[name*='man']").attr('checked', true);		//选中包含man的元素

4.5 过滤选择器

1. $("li:first"); $("li:last")// 选取第一个li元素,  选取最后一个li元素

2. $("option:not(selected)")  //选取不是selected的元素
	$("input":not(checked)")  //选取不是checked的元素

3. $("li:odd"); $("li:even")  //选中下标为奇数(odd)和偶数(even)的元素

4. $("li:eq(1)");		//匹配一个等于1的索引的元素, 
	$("li:gt(1)");		//大于索引1的:gt(index)
	$("li:lt(1)");		//小于索引1的:lt(index)

5. $("td:parent");	//匹配含有 子元素或者文本的元素  解析:td作为父亲，看有没有孩子或内容

6.	$("tr:visible")  //匹配所有的可见元素(visible)和不可见的(hidden)

4.6 选择器 + 过滤函数

1. $("tr").eq(1);//先筛选tr标签，在匹配下标为1的元素
2. $("li").first()//同理：先筛选li标签，再选择li标签的第一个元素

3. filter(".class")滤波器
	$("p").filter(".selected")//保留class=”selected“的p元素

4. $("#div2").siblings("a"); //siblings：筛选与id=“div2”同级的a元素，不包括div2
	区别： 下面的是筛选li3后面的所有li
	$("#li3 ~ li"));

4.7 表单过滤器

1. //:input -->匹配所有input, textarea, select 和 button
2. //:text-->匹配所有的单行文本框  type="text"
	$(":text").css('color', 'red');

3. /*  - :password 匹配所有的密码框，以此类推
	- :radio
	- :checkbox
	- :submit
	- :image
	- :reset
	- :button
	- :file
*/

4. /*  选中情况
	- :selected  匹配所有 被选中 的下拉列表元素
	- :checked   匹配所有 被选中 的复选框元素

	- :disable 匹配所有不可用元素
	- :enable 匹配所有可用元素
	- :hidden 匹配所有不可见元素 or type=hidden的元素
*/

//选择复选框且被选中状态$(":checkbox:checked")

4.8 重要知识

1. 复合选择器： $("input[value][name $='letter']");//选中具有value且name尾部=”letter“的input元素
2. JS -- >jQuery:	添加$() 如:$(this) 
3. jQuery --> JS: 使用索引$(this)[0];

5. 常用函数

5.1 操作内容

1. var str1 = $("div").html();//获取第一个div元素的内容
2. var str2 = $("div").text();//获取第一个div元素的纯文本，不包含标签的内容
3. var str3=$("div").val(); //只能用在表单项目中，
4. var str4=$("input").val();//获取input元素的value值
	$("#txt").val("hello world")//设置id="txt"的value=“hello world”;

5.2 操作属性

1. $("h1").html("<span style='color: red'>new1</span>");//添加并执行内容
2. $("h2").text("<span style='color: red'>new2</span>)");//添加纯文本

3. $("ul").addClass("a").addClass("b");//为每个匹配的元素添加指定的类名。
4. $("ul").toggleClass("c");//如果存在（不存在）就删除（添加）一个class=“c”类
	$("p").removeClass("selected");//从匹配的元素中删除 'selected' 类
	$("div").removeClass();//删除匹配元素的所有类

5. $("#txt").attr("name")//返回txt的name的值
	$("#txt").prop("name")//prop不会产生错误，推荐使用

5.3 操作样式

$("input").css("border-color","blue");//改变一个样式
$("input").css({"color":"red","border-color":"green"});//改变多个需要使用JSON格式

6. 事件

6.1 常用的事件

鼠标事件	键盘事件	表单事件	文档事件
click	keydown	submit	load
dblclick	keyup	change
mouseover		focus
mouseout		blur

6.2 事件方法

1. 给所有的button绑定单击事件
	$("button").click(function(){
		alert(this);//this是当前对象，哪个按钮触发的单击事件this就是那个按钮，this此时是JS对象
2. /*捆绑
	- on
	- live 高版本不再使用
	- bind
*/
	$("#btn1").on("click", function () {
		$("body").append('<div class="clickme">Another target</div>')
	});	//不会出现 JS中的覆盖下现象
	$("#btn1").bind("click", function(){
	   $("body").append('<div class="clickme">Another target</div>')
	});

3. 绑定一个 一次性事件 -->one
	$("#btn1").one('click', function () {
		alert('click one');
	})

4. 当键盘被按下时，发生 keypress 事件。
	$("#txt").keypress(function (event) {
		if (event.keyCode == 13) {
			alert('回车')
		} else {
			alert('other');
		}
	});

5. 当元素的值发生改变时，会发生 change 事件 --> $(selector).change();
   注意：该事件仅适用于text、password、checkbox、redio、textarea、select。
   1)用于 select 元素时，change 事件会在选择某个选项时发生。
   2)用于 text 或 textarea 时，该事件会在元素失去焦点时发生。

7. 操作文档DOM

7.1 元素增加

常用的元素增加的方法:
1. append() - 在 被选元素内 的结尾插入内容，prepend()在被选元素内的前面插入内容
2. appendTo() - 被选择的元素添加到后面的元素中	
3. after() - 在被 选元素外 的后面插入内容
4. before() - 在 被选元素外 的前面插入内容

举例
1. <p>I would like to say: </p>
	$("p").append("<b>添加粗体标签</b>")
	运行结果 <p>  I would like to say:<b>添加粗体标签</b> </p> 

2. <p>I would like to say: </p>  <div></div>  <div></div>
   $("p").appendTo("div")  <!--将p标签添加到div标签中-->
	运行结果：<div><p>I would like to say: </p></div>
      		<div><p>I would like to say: </p></div>
3. <p>I would like to say: </p>
	$("p").after("<b>添加粗体标签</b>") 
	运行结果：<p>I would like to say: </p> <b>Hello</b>

4. <p>I would like to say: </p>
	$("p").before("<b>添加粗体标签</b>")
	运行结果:<b>Hello</b> <p>I would like to say:</p>

7.2 元素删除

常用的元素删除的方法：
1. remove() - 删除被选元素（及其子元素）
2. empty() - 删除匹配的元素集合中所有的子节点。//包括内容 + 子节点，被选中元素不做删除

案例展示：
1. <p class="hello">Hello</p> how are <p>you?</p>
	$("p").remove() --> how are
	$("p").remove(".hello") --> how are <p>you?</p>
2. <p>Hello, <span>Person</span> <a href="#">and person</a></p>
	$("p").empty() --> <p></p>

8.效果

语法：1 2 3;
<head>
    <meta charset="UTF-8">
    <title>效果</title>
    <style>
        p {
            width: 400px;
            height: 300px;
            border: 1px solid red;
        }
        img {
            display: block;
        }
        .block {
            position: absolute;
            left: 500px;
            width: 100px;
            height: 30px;
            background-color: aqua;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>//引入jquery
    <script>
        $(function () {
            $("#hideBtn").click(function () {
1.-->           $("img").hide(5000);//在5s内隐藏, 默认方式隐藏 对应： show()显示
2.-->           $("img").fadeOut(5000);//淡出隐藏,通过改变透明度来实现淡出，对应：fadeIn()淡入

3.-->                $("img").animate({ //用于创建自定义动画的函数。
                    height: 'toggle', opacity: 'toggle'
                }, "slow");
            });
            $("#go").click(function () {
                $("#block").animate({
                    width: "90%",
                    height: "100%",
                    fontSize: "10em",
                    borderWidth: 10
                }, 1000);
            });
            $("#showBtn").click(function () {
                // $("img").show(5000);
                $("img").fadeIn(5000);//在5s内完成显示
            });

            $("#right").click(function(){
                $(".block").animate({left: '+50px'}, "slow");
            });
            $("#left").click(function(){
                $(".block").animate({left: '-50px'}, "slow");
            });
        });
    </script>
</head>
<body>
<button id="hideBtn">hide</button>
<button id="showBtn">show</button>
<img src="../../img/游乐园.jpg" height="300" width="440"/>
<p>speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
    easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
    fn:在动画完成时执行的函数，每个元素执行一次。显示隐藏的匹配元素。
    这个就是 'show( speed, [callback] )'
    无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是
    在CSS里设置了display:none;，这个方法都将有效。
</p>
<button id="go"> Run</button>
<div id="block">Hello!</div>
<button id="left">«</button>
<button id="right">»</button>
<span class="block">block</span>
</body>
</html>

9. 工具

1. 将字符串转为JSON格式
	var s = '{"username": "rose", "password": "123"}';//这是一个字符串。
	var o = $.parseJSON(s);//将字符串转为JSON格式，前提：符合JSON的语法
	alert(o.username);

2. 执行脚本表达式 eval
	var o = eval('({"username": "abc"})');
	alert(o.username);
	
	alert("1 + 1");	//1 + 1
	alert(eval("1 + 1"));// 2


3. param: 将表单元素数组 或者对象 ‘序列化’。是.serialize()的核心方法。
	var attr = { width:1680, height:1050 };
	var str = $.param(attr);//序列化：可以提交
	alert(str);  //width=1680&height=1050
	//上面代码的实现
	alert($("#form").serialize());

10. 案例刨析

10.1 表格换色 + 全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格换色</title>
    <script src="../../js/jquery-1.12.4.js"></script>
</head>
<body>
<!--注意：这里不再写body的HTML部分，详细请看上一篇md：JavaScript-->
<script>
    $(function () {
       //表格换色
        $("tr:even").css("backgroundColor", "grey");//选中下标为偶数的tr并修改样式
        $("tr:odd").css("backgroundColor", "antiquewhite");//选中奇数的tr元素

       //全选 全部选
        $("#checkAll").change(function () {//选中表头的复选框，当发生变化时，执行
            $(":checkbox[name='checkOne']").prop("checked", $(this).prop("checked"));
        });
    });
</script>
</body>
</html>

10.2 省市联动

<head>
    <meta charset="UTF-8">
    <title>省市联动</title>
    <script src="../../js/jquery-1.12.4.js"></script>
</head>
<body>
<!--选择省份-->
<select id="province">
    <option value="-1">--请选择--</option>
    <option value="0">广东省</option>
    <option value="1">湖南省</option>
    <option value="2">福建省</option>
</select>
<!--选择城市-->
<select id="city"></select>

<script>
    var provinces = [//使用二维数组
        ["深圳市", "东莞市", "惠州市", "广州市"],
        ["长沙市", "岳阳市", "株洲市", "湘潭市"],
        ["厦门市", "福州市", "漳州市", "泉州市"]
    ];
   
    $("#province").change(function () {//当下拉列表有被选中时发生
        var v = $("#province option:selected ").attr("value");//获取被选中的元素的value
        var citys = provinces[v];
        $("#city").html(" ");	//清空二级目录的内容
        for (var i = 0; i < citys.length; i++) {//给二级目录循环赋值.
            $("#city").append("<option>" + citys[i] + "</option>")}
    });
</script>
</body>
</html>

10.3 商品移动

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品右移</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<!--注意：这里不再写body的HTML部分，详细请看上一篇md：JavaScript-->
<script>
   //商品右移
    $("#a1").click(function () {
        $("#leftSelect option:selected").appendTo($("#rightSelect"));
    });
    $("#a2").click(function () {
        $("#leftSelect option").appendTo($("#rightSelect"));
    });
   
   //商品左移
    $("#a3").click(function () {
        $("#rightSelect option:selected").appendTo($("#leftSelect"));
    });
    e
    $("#a4").click(function () {
        $("#rightSelect option").appendTo($("#leftSelect"));
    });
</script>
</body>
</html>

10.4 表单验证

<script>
   
   function isUserName() {
      var val = $("input[name='userName']").val();
      if (val == "") {
         $("span[id='userNameMsg']").html("用户名不能为空！").css("color", "red");
         return false;
      } else if (/^[a-zA-z]\w{5,}/.test(val) == false) {
         $("span[id='userNameMsg']").html("用户名不合法！").css("color", "red");
         return false;
      }
      $("span[id='userNameMsg']").html("用户名可用！").css("color", "green");
      return true;
   }

   function isPwd() {
      var val = $("input[name='pwd1']").val();
      if (val == "") {
         $("span[id='pwd1Msg']").html("密码不能为空！").css("color", "red");
         return false;
      } else if (val.length < 8) {
         $("span[id='pwd1Msg']").html("密码长度不合法！").css("color", "red");
         return false;
      }
      $("span[id='pwd1Msg']").html("密码格式正确！").css("color", "green");
      return true;
   }

   function isPwd2() {
      if ($("input[name='pwd1']").val() != $("input[name='pwd2']").val()) {
         $("span[id='pwd2Msg']").html("两次密码不一致！").css("color", "red");
         return false;
      }
      $("span[id='pwd2Msg']").html("OK！").css("color", "green");
      return true;
   }

   /*校验电话码格式-座机或者手机 */
   function isTelCode(str) {
      var reg = /^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/;
      if (reg.test(str)) {
         $("span[id='phoneMsg']").html("OK！").css("color", "green");
         return true;
      }
      $("span[id='phoneMsg']").html("电话格式不合法！").css("color", "red");
      return false;
   }

   /*校验邮件地址是否合法 */
   function IsEmail(str) {
      var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
      if (reg.test(str)) {
         $("span[id='emailMsg']").html("OK！").css("color", "green");
         return true;
      }
      $("span[id='emailMsg']").html("邮箱地址不合法！").css("color", "red");
      return false;
   }

   /*校验是否选择了性别*/
   function isGender() {
      var val = $("select[name='gender']").val();
      if (val == -1) {
         alert("请选择性别！");
         return false;
      }
      return true;
   }

   //页面加载事件
   $(function () {
      $("input[name='userName']").blur(function () {
         isUserName();
      });
      $("input[name='pwd1']").blur(function () {
         isPwd();
      });
      $("input[name='pwd2']").blur(function () {
         isPwd2();
      });
      $("input[name='phone']").blur(function () {
         isTelCode();
      });
      $("input[name='email']").blur(function () {
         IsEmail();
      });
      $("#myForm").submit(function () {
         return
         isUserName() && isPwd() && isPwd2() && isGender() && isTelCode() && IsEmail();
      });
   });
</script>