开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JQuery -> 正文阅读

[JavaScript知识库]JQuery

jQuery概述

什么是jQuery

jQuery是一款优秀的javascript的轻量级框架之一，封装了dom操作、事件绑定、Ajax等功能。

特别值得一提的是基于jQuery平台的插件非常丰富，大多数前端业务场景都有其封装好的工具可直接使用。

jQuery下载和版本介绍

官网地址：http://jquery.com

==注意事项==

如果公司使用的老版本插件，我们jq升级后，可能会让插件失效....

jQuery版本

jquery-x.js 开发版本：有良好的缩进格式和注释，方便开发者阅读
jquery-x.min.js 生产版本：代码进行压缩，体积小方便网络传输

==注意事项==

在讲解过程中我们使用 3.2.1版本

框架（Framework）是完成某种功能的半成品，抽取重复繁琐的代码，提供简洁强大的方法实现。

jquery入门

        <!-- 当前页面如果想使用jq，需要引入jq的库，通script标签中的src属性进行即可 -->
        <script src="js/jquery-3.4.1.js"></script>
        <script>
            //我们的jq代码还是在script标签中书写，前提得有jq的库
            
            //js原生版
            window.onload = function(){
                alert(666);
            }
            
            //jq版
            jQuery(function(){
                alert(888);
            })
            
            //jq简化写法1
            $(document).ready(function(){
                alert(999);
            })
            
            //jq简化写法2 推荐
            $(function(){
                //今后的jq代码都在这里书写
            });
            
        </script>

jq与js的页面加载的区别

语法

js
```
window.onload = function(){
 ? ?
}
```
jq
```
$(function(){
 ? ?
});
```

两者之间的区别

* js: 只能定义一次，如果定义多次，后面会将前面的进行给覆盖掉
* jq: 可以定义多次

代码演示

<!DOCTYPE html>
<html lang="zh-CN">
 ? ?<head>
 ? ? ? ?<meta charset="UTF-8">
 ? ? ? ?<title></title>
 ? ? ? ?<script src="../js/jquery-3.2.1.min.js"></script>
 ? ?</head>
 ? ?<body>
?
 ? ? ? ?<script>
 ? ? ? ? ? ?// js页面加载
 ? ? ? ? ? /* window.onload = function () {
 ? ? ? ? ? ? ?  alert("js页面加载事件1");
?
 ? ? ? ? ?  };
?
 ? ? ? ? ?  window.onload = function () {
 ? ? ? ? ? ? ?  alert("js页面加载事件2");
?
 ? ? ? ? ?  };*/
?
 ? ? ? ? ? ?// jq页面加载
 ? ? ? ? ? ?$(function(){
 ? ? ? ? ? ? ? ?alert("jq页面加载事件1");
 ? ? ? ? ?  });
?
 ? ? ? ? ? ?$(function(){
 ? ? ? ? ? ? ? ?alert("jq页面加载事件2");
 ? ? ? ? ?  });
?
 ? ? ? ?</script>
?
 ? ?</body>
</html>

操作内容

?
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
 ? ?<script src="../js/jquery-3.2.1.js"></script>
 ? ?<script>
        
 ? ? ? $(function(){
         ? 
 ? ? ? ? ? ?//js原生写法
 ? ? ? ? ? ?//var id = document.getElementById("mydiv").innerHTML;获取内容
 ? ? ? ? ? ?var id = document.getElementById("mydiv").innerHTML='你是我的小饼干';
 ? ? ? ? ? ?alert(id);
?
 ? ? ? ? ? ?//jq通过#来拿到id
 ? ? ? ? ? alert($("#mydiv").html());//获取内容
 ? ? ? ? ? $("#mydiv").html("小甜心");//改变内容
?
 ? ? ? });
 ? ?</script>
</head>
<body>
 ? ?<div id="mydiv">我爱你中国</div>
</body>
?
</html>

jq与js的转换

jQuery虽然本质上也是js，但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象而不是js对象。

通过js方式获取的是js对象，通过jQuery方式获取的是jQuery对象。

js 转 jq

$(js对象)
jq 转 js

jq对象[索引]

jq对象.get(索引)

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery-3.4.1.js"></script>
        <script>
            
            $(function(){
                //js写法
                document.getElementById("mydiv").innerHTML="我是dom对象的修改";
                //jq写法
                $("#mydiv").html("我是jq对象的修改");
                
                //js ---> jq
                $(document.getElementById("mydiv")).html("js 转  jq");
                
                //jq ---> js
                //方式一
                $("div")[0].innerHTML = "jq转成js方式一";
                
                //方式二
                $("div").get(1).innerHTML = "jq转成js方式二"
            });
        </script>
    </head>
    <body>
        <div id="mydiv">1111</div>
        <div id="mydiv">2222</div>
    </body>
</html>

事件绑定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
 ? ?<script src="../js/jquery-3.2.1.js"></script>
 ? ?<script>
 ? ? ? $(function(){
        //获取button标签
 ? ? ? ? ? $("button").click(function(){
 ? ? ? ? ? ? ? $("p").hide();//p会被隐藏标签
 ? ? ? ? ? ? ? $("p").hide("slow");//用600毫秒的时间将段落缓慢的隐藏
 ? ? ? ? ? });
 ? ? ? });
 ? ?</script>
</head>
<body>
 ? ?<P>我爱你,我爱你江一燕</P>
 ? ?<button type="button">点我啊</button>
</body>
</html>

解绑事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
</head>
<body>
    <button id="btn" type="button">使用on绑定事件</button>
 ? ?<button id="btn2" type="button">使用off解绑事件</button>
 ? ?
 ? ?<script src="../js/jquery-3.2.1.js"></script>
 ? ?<script>
 ? ? ? ?$(function () {
 ? ? ? ? ? ?//使用on绑定事件
 ? ? ? ? ? ?$("#btn").on("click",function () {
 ? ? ? ? ? ? ? ?alert("我被点击了。。")
 ? ? ? ? ?  })
 ? ? ? ? ? ?//使用off解绑事件
 ? ? ? ? ? ?$("#btn2").click(function () {
 ? ? ? ? ? ? ? ?$("#btn").off("click");//解绑指定单击事件
 ? ? ? ? ? ? ? ?$("#btn").off();//解绑所有事件
 ? ? ? ? ?  });
 ? ? ?  });
 ? ?</script>
?
</body>
</html>

Jq循环

 ? ?<script src="../js/jquery-3.2.1.js"></script>
 ? ?<script>
 ? ? ? ?$(function () {
         ? var arr =['a','b','c','d'];
         ? $(arr).each(function(){
             ? alert(this);//代表是当前引用对象，  用的是谁，this代表谁
         ? });
 ? ? ?  });
 ? ?</script>

Jq操作css样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
</head>
<body>
 ? ?
     ? ?<ul>
     ? ? ? ?<li>aaaaaaa</li>
     ? ? ? ?<li>bbbbbbb</li>
     ? ? ? ?<li>ccccccc</li>
     ? ?</ul>
?
    
 ? ?<script src="../js/jquery-3.2.1.js"></script>
 ? ?<script>
 ? ? ? ?$(function () {
 ? ? ? ? ? $("li").mouseover(function () {
 ? ? ? ? ? ? ? $(this).css("background","orange");
 ? ? ? ? ? }).mouseout(function () {
 ? ? ? ? ? ? ? $(this).css("background","white");
 ? ? ? ? ? });
?
 ? ? ?  });
?
 ? ?</script>
?
</body>
</html>

jQuery选择器

基本选择器

标签选择器（元素选择器）

语法： $("html标签名") 获得所有匹配标签名称的元素
id选择器

语法： $("#id的属性值") 获得与指定id属性值匹配的元素
类选择器

语法： $(".class的属性值") 获得与指定的class属性值匹配的元素

并集选择器

语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素

        <span class="female">古力娜扎</span>
        <span class="female" id="dlrb">迪丽热巴</span>
        <span class="female hero">黑人</span>
?
        <span class="male hero">钢铁侠</span>
        <span class="male hero">超人</span>
        
        <script src="js/jquery-3.4.1.js"></script>
        <script>
            //标签名选择器
            var b = $("span");
            $(b).each(function(){
                console.info(this)
            })
            
            //类选择器
            var a = $(".female");
            $(a).each(function(){
                console.info(this)
            })
            console.info( $(".female").text() );
            
            //id选择器
            console.info( $("#dlrb").text() )
            
            //组合选择器
            console.info( $("#dlrb , .male ").text() )
            
        </script>

层级选择器

后代选择器

语法： $("A B ") 选择A元素内部的所有B元素

子选择器

语法： $("A > B") 选择A元素内部的所有B子元素

         <div id="kangxi">
            <span>儿子：雍正</span>
            <p>
                <span>孙子：乾隆</span>
            </p>
        </div>
        <div>牛顿</div>
        
        <script src="js/jquery-3.4.1.js"></script>
        <script>
             // 1.父子
             console.info($("#kangxi > span").text() );
             
             // 2.祖 后代
             console.info($("div span").text());
             
             //3.兄弟
             console.info( $("div ~ div").text());
             
             //4.跟班
             console.info( $("span + p").text());
             
        </script>

过滤器

属性过滤选择器

首元素选择器

语法： :first 获得选择的元素中的第一个元素
尾元素选择器

语法： :last 获得选择的元素中的最后一个元素
偶数选择器

语法： :even 偶数，从 0 开始计数
奇数选择器

语法： :odd 奇数，从 0 开始计数

等于索引选择器

语法： :eq(index) 指定索引元素

<h1>表格信息</h1>
        <h2>这是一张商品表</h2>
        <table border="1" width="600">
         ? ?<tr>
         ? ? ? ?<th>商品编号</th>
         ? ? ? ?<th>商品名称</th>
         ? ? ? ?<th>售价</th>
         ? ? ? ?<th>数量</th>
         ? ?</tr>
         ? ?<tr>
         ? ? ? ?<td>001</td>
         ? ? ? ?<td>冰箱</td>
         ? ? ? ?<td>3000</td>
         ? ? ? ?<td>100</td>
         ? ?</tr>
         ? ?<tr>
         ? ? ? ?<td>002</td>
         ? ? ? ?<td>洗衣机</td>
         ? ? ? ?<td>2000</td>
         ? ? ? ?<td>50</td>
         ? ?</tr>
         ? ?<tr>
         ? ? ? ?<td>003</td>
         ? ? ? ?<td>热水器</td>
         ? ? ? ?<td>1500</td>
         ? ? ? ?<td>20</td>
         ? ?</tr>
         ? ?<tr>
         ? ? ? ?<td>004</td>
         ? ? ? ?<td>手机</td>
         ? ? ? ?<td>2188</td>
         ? ? ? ?<td>200</td>
         ? ?</tr>
        </table>
        
        <div>slideDown(speed, [callback]) 概述
         ?  通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
         ?  这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery
         ?  1.3中，上下的padding和margin也会有动画，效果更流畅。 参数
         ?  speedString,Number三种预定速度之一的字符串("slow", "normal", or
         ?  "fast")或表示动画时长的毫秒数值(如：1000) callback (可选)FunctionFunction在动画完成时执行的函数</div>
        <div>fadeOut(speed, [callback]) 概述
         ?  通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
         ?  这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。 参数
         ?  speedString,Number三种预定速度之一的字符串("slow", "normal", or
         ?  "fast")或表示动画时长的毫秒数值(如：1000) callback (可选)Function在动画完成时执行的函数</div>

        <script src="js/jquery-3.4.1.js"></script>
        <script>
            $(function(){
                // 1．设置表格第一行，显示为红色
                $("tr:first").css("background","red");
        
                // 2．设置表格除第一行以外 显示为蓝色
                $("tr:gt(0)").css("background","blue");
        
                // 3．设置表格偶数行背景色 金色
                $("tr:even").css("background","yellow");
        
                // 4．设置表格奇数行背景色 绿色
                $("tr:odd").css("background","green");
        
                // 5．设置页面中所有标题 显示为灰色
                $(":header").css("background","gray");
        
                // 6．设置页面中正在执行动画效果div背景黄色
                $("div").click(function () {
                    $(this).slideUp("slow");
                    $("div:animated").css("background","green");
                });
                
 ? ? ? ? ? ? ? ?// 7. 设置<html>背景颜色为金色
 ? ? ? ? ?      $(":root").css("background-color","yellow");
            });
        </script>

内容过滤选择器

    <div>今天是个晴天</div>
    <div>明天要去人民公园a</div>
    <div>
     ? ?<span>JavaScript</span> 是网页开发中脚本技术
    </div>
    <div>Ajax 是异步的 JavaScript和 XML</div>
    <div>
     ? ?<p>jQuery</p>
     ? ?是 JavaScript一个 轻量级框架
    </div>
    <div></div>
    
    <script src="js/jquery-3.4.1.js"></script>
     <script>
     ? ? $(function(){
     ? ? ? ? // 1．设置含有文本内容 ”公园” 的 div 的字体颜色为红色
     ? ? ? ? $("div:contains('公园')").css("color","red");
     ? ? ? ? 
     ? ? ? ? // 2．设置没有子元素的div元素 文本内容 ”这是一个空DIV“
     ? ? ? ? $("div:empty").html("这是一个空的div").css("color","red");//空div找出来,写入
     ? ? ? ? 
     ? ? ? ? // 3．设置包含p元素 的 div 背景色为黄色
     ? ? ? ? $("div:has(p)").css("background","yellow");//div中包含p
     ? ? ? ? 
     ? ? ? ? // 4．设置所有含有子元素的span字体为蓝色
     ? ? ? ? $("span:parent").css("color","blue");//span是子元素
     ? ? });
     </script>

可见性过滤选择器

	<form>
	    <input type="hidden" />
	    <input type="text" name="xxx" style="display: none;" />
	</form>
	
	<table>
	    <tr>
	        <td>洗衣机</td>
	    </tr>
	    <tr>
	        <td>热水器</td>
	    </tr>
	    <tr style="display: none">
	        <td>电冰箱</td>
	    </tr>
	</table>
	
	<script src="js/jquery-3.4.1.js"></script>
	<script>
		$(function(){
			//1、选中from中不可见元素，添加class属性
			//匹配所有display:none 或者 input中的 type:hidden 元素
			$("form :hidden").attr("class","yanqi");
			$("tr :hidden").attr("class","yanqi");
             $("input:hidden").addClass("yanqi");//只能添加class属性

			//2．设置table所有 可见 tr 背景色 金色
			$("table tr:visible").css("background","yellow");

			//3．设置table所有 隐藏tr 字体颜色为红色，显示出来 
			$("table tr:hidden").css("color","red").show();
		});
	</script>

属性选择器

属性名称选择器

语法： $("A[属性名]") 包含指定属性的选择器
属性选择器

语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器

复合属性选择器

语法： $("A[属性名='值'] []...") 包含多个属性条件的选择器

<!DOCTYPE html>
<html lang="zh-CN">
 ? ?<head>
 ? ? ? ?<meta charset="UTF-8">
 ? ? ? ?<title>06-属性选择器</title>
 ? ? ? ?<script src="../js/jquery-3.2.1.min.js"></script>
 ? ?</head>
 ? ?<body>
?
 ? ? ? ?<input type="text" name="username" value="用户名"/><br/>
?
 ? ? ? ?<input type="text" name="nickname" value="昵称"/><br/>
?
 ? ? ? ?<input type="password" name="password" value="密码"/><br/>
 ? ? ? ?
 ? ? ? ?<p class="p-yanqi">我是class="p-yanqi"</p>
?
 ? ? ? ?<script>
 ? ? ? ? ?   // 1.获取type 的input标签
            $("input[type]").attr("id","118");
            
            // 2.获取type=“password”的input标签
            $("input[type='password']").attr("autocomplete","off");
            
            // 3.获取属性名以xx开始
            $("p[class^='p']").css("color","green");
            
            // 4.获取属性名以xx结尾
            $("p[class$='2']").css("color","red");
            
            // 5.属性值中包含的属性
            $("input[type*='wo']").attr("abc","99");
            
            // 6.获取 type ='text' 并且 name='nickname' 的标签
            $("input[type='text'][name='nickname']").attr("value","一燕");
            
?
 ? ? ? ?</script>
 ? ?</body>
</html>

子元素过滤选择器

        <table border="1" width="400" id="mytable">
         ? ?<tr><td>1</td><td>冰箱</td></tr>
         ? ?<tr><td>2</td><td>洗衣机</td></tr>
         ? ?<tr><td>3</td><td>热水器</td></tr>
         ? ?<tr><td>4</td><td>电饭锅</td></tr>
         ? ?<tr><td>5</td><td>电磁炉</td></tr>
         ? ?<tr><td>6</td><td>豆浆机</td></tr>
         ? ?<tr><td>7</td><td>微波炉</td></tr>
         ? ?<tr><td>8</td><td>电视</td></tr>
         ? ?<tr><td>9</td><td>空调</td></tr>
         ? ?<tr><td>10</td><td>收音机</td></tr>
         ? ?<tr><td>11</td><td>排油烟机</td></tr>
         ? ?<tr><td>12</td><td>加湿器</td></tr>
         ? ?<tr><td>13 电暖气</td></tr>
        </table>
?
        
        <script src="js/jquery-3.4.1.js"></script>
     ? <script>
         ? $(function () {
             ? // 1.在每个表格 下3的倍数行，字体颜色为红色 3 6 9 12
             ? $("tr:nth-child(3n)").css("color","red");
             ? 
                // 2.每个表格 奇数行 背景色 黄色
             ? $("tr:nth-child(odd)").css("background","yellow");
             ? 
                // 3.每个表格 偶数行 背景色 灰色
             ? $("tr:nth-child(even)").css("background","gray");
             ? 
                // 4.每个tr 只有一个td的  字体为 蓝色
             ? $("td:only-child").css("color","blue");
         ? });
        </script>

表单过滤选择器

        <form action="#">
         ? ?用户名 <input type="text" name="username" /><span id="span"></span> <br/>
         ? ?密 ?码 <input type="password" name="password" /> <br/>
         ?       ?<input type="button" value="提交" />
        </form>
        
        <script src="js/jquery-3.4.1.js"></script>
        <script>
             ? // 1．对所有text框和password框，添加离焦事件，校验输入内容不能为空
                $(":text, :password").blur(function () {
                    var value = $(this).val();//获取输入框的值
                    if(value == ""){
                        $("#span").html("不能为空！");
                    }else{
                     ?$("#span").html("");
                 ? }
                });
    
             ? // 2．对button 添加 点击事件，提交form表单
                $(":button").click(function () {
                    $("form").submit();
                });
?
        </script>

表单对象属性过滤选择器

可用元素选择器

语法： :enabled 获得可用元素
不可用元素选择器

语法： :disabled 获得不可用元素
选中选择器

语法： :checked 获得单选/复选框选中的元素

选中选择器

语法： :selected 获得下拉框选中的元素

<form>
 ? ?<input type="text" value="不可用值1" disabled="disabled">
 ? ?<input type="text" value="可用值1">
 ?  性别
 ? ?<input type="radio" value="男" name="gender" checked="checked"/>男
 ? ?<input type="radio" value="女" name="gender"/>女 <br/>
 ?  爱好
 ? ?<input type="checkbox" value="体育" name="hobby"/> 体育
 ? ?<input type="checkbox" value="读书" name="hobby" checked="checked"/> 读书
 ? ?<input type="checkbox" value="音乐" name="hobby"/> 音乐
 ? ?<input type="checkbox" value="绘画" name="hobby"/> 绘画 <br/>
 ?  城市
 ? ?<select name="city" id="edu">
 ? ? ? ?<option value="">请选择</option>
 ? ? ? ?<option value="北京">北京</option>
 ? ? ? ?<option value="上海" selected="selected">上海</option>
 ? ? ? ?<option value="天津">天津</option>
 ? ?</select> <br/>
 ? ?<input type="button" value="打印"/>
</form>
<script src="js/jquery-3.4.1.js"></script>
<script>
?
 ? ?// 1. 获取可用的输入框
 ? ?$("input[type='text']:enabled").attr("id","77");
?
 ? ?// 2. 获取不可用的输入框
 ? ?$("input[type='text']:disabled").attr("id","88");
?
 ? ?// 3. 获取选中的复选框
 ? ?$("input[type='checkbox']:checked").val();
?
 ? ?// 4. 获取选中的下列选择框
 ? ?$("#edu option:selected").val();
?
?
 ? ?// 点击button 打印radio checkbox select 中选中项的值
 ? ?$(":button").click(function () {
 ? ? ? ?//单选
 ? ? ? ?alert( $("input[name='gender']:checked").val() );
 ? ? ? ?//多选
 ? ? ? ?$("input[name='hobby']:checked").each(function () {
 ? ? ? ? ? ?alert($(this).val());
 ? ? ?  });
 ? ? ? ?//下拉
 ? ? ? ?alert($("select option:selected").val());
 ?  })
</script>

对象遍历

语法

jq对象.each(function(index,element){
?
})

代码实现

<!DOCTYPE html>
<html lang="zh-CN">
 ? ?<head>
 ? ? ? ?<meta charset="UTF-8">
 ? ? ? ?<title>08-对象遍历</title>
 ? ? ? ?<script src="../js/jquery-3.2.1.min.js"></script>
 ? ?</head>
 ? ?<body>
 ? ? ? ?<!--
 ? ? ? ?jquery对象的遍历
 ? ? ? ? ? ?$.each() 用法示例
 ? ? ? ?-->
 ? ? ? ?<ul id="city">
 ? ? ? ? ? ?<li>北京</li>
 ? ? ? ? ? ?<li>上海</li>
 ? ? ? ? ? ?<li>天津</li>
 ? ? ? ?</ul>
?
 ? ? ? ?<script>
?
 ? ? ? ? ? ?/*
 ? ? ? ? ? ? ? 内置的两个参数：
 ? ? ? ? ? ? ?  index: 索引
 ? ? ? ? ? ? ?  element：遍历到的元素
 ? ? ? ? ? ? */
            $("li").each(function(index,element){
                
                //遍历索引
                console.info(index);
                
                //遍历元素
                console.info(element);
                
                //遍历元素中的数据
                console.info( $(element).html() );
                
                console.info( $(this).html() );
            })
 ? ? ? ?</script>
 ? ?</body>
</html>

jQuery操作DOM

操作内容

代码演示

<!DOCTYPE html>
<html lang="zh-CN">
 ? ?<head>
 ? ? ? ?<meta charset="UTF-8">
 ? ? ? ?<title>09-dom操作内容</title>
 ? ? ? ?<script src="../js/jquery-3.2.1.min.js"></script>
 ? ?</head>
 ? ?<body>
 ? ? ? ?<div id="myDiv"><p>天王盖地虎</p></div>
?
 ? ? ? ?<script>
             //1、获取标签中内容,innerHTML 从开始标签 -- 结束中间所有内容
             console.info( $("#myDiv").html() );
             
             //2、设置标签中内容,直接把之前的所有内容替换掉
             $("#myDiv").html("<h1>宝塔镇河妖</h1>");
             ?
             //3、做拼接
             $("#myDiv").html( $("#myDiv").html() + "<h1>宝塔镇河妖</h1>" );
             
             //4、获取标签中的纯文本
             console.info($("#myDiv").text());
             
             //设置标签中的纯文本
             $("#myDiv").text("小鸡炖蘑菇")
?
 ? ? ? ?</script>
 ? ?</body>
</html>

操作属性

attr和prop区别

attr: 主要用于设置属性的值这一类的操作
prop: 主要用于判断属性是否存在或者操作布尔类型的操作
 ? ? ?例如: checked selected

代码

<!DOCTYPE html>
<html lang="zh-CN">
 ? ?<head>
 ? ? ? ?<meta charset="UTF-8">
 ? ? ? ?<title>10-dom操作属性</title>
 ? ? ? ?<script src="../js/jquery-3.2.1.min.js"></script>
 ? ?</head>
 ? ?<body>
 ? ? ? ?<form action="#" method="get">
 ? ? ? ? ?  姓名 <input type="text" name="username" id="username" value="德玛西亚"/> <br/>
?
 ? ? ? ? ?  爱好
 ? ? ? ? ? ?<input id="hobby" type="checkbox" name="hobby" value="perm" checked="checked">烫头<br/>
?
 ? ? ? ? ? ?<input type="reset" value="清空按钮"/>
 ? ? ? ? ? ?<input type="submit" value="提交按钮"/><br/>
 ? ? ? ?</form>
?
 ? ? ? ?<script>
 ? ? ? ? ? ?// 1.获取文本框value属性
 ? ? ? ? ? ?// 方式一:attr()
 ? ? ? ? ? ?// 2.1 获取value属性
 ? ? ? ? ? ?console.log($("#username").attr('type'));
 ? ? ? ? ? ?
 ? ? ? ? ? ?// 2.2 新增or修改value属性值
 ? ? ? ? ? ?$("#username").attr("class","username");
?
 ? ? ? ? ? ?// 2.3 删除value属性
 ? ? ? ? ? ?$("#username").removeAttr("value");
?
 ? ? ? ? ? ?// 方式二: val()
 ? ? ? ? ? ?// 获取属性值
 ? ? ? ? ? ?console.log($("#username").val());
?
 ? ? ? ? ? ?// 设置属性值
 ? ? ? ? ? ?$("#username").val('哈哈哈~~');
?
 ? ? ? ? ? ?// 2.获取爱好的checked属性
 ? ? ? ? ? ?/*
 ? ? ? ? ? ? ?  方式一： attr
 ? ? ? ? ? ? ?  选中返回： checked
 ? ? ? ? ? ? ?  末选中返回: undefined
 ? ? ? ? ?  */
 ? ? ? ? ? ?console.log($("#hobby").attr('checked'));
?
 ? ? ? ? ? ?/*
 ? ? ? ? ? ? ? 方式二：prop()
 ? ? ? ? ? ? ? jq在1.6版本之后，弥补这个设计缺陷，如果该属性被选中返回true 末被选中返回false
 ? ? ? ? ? ? */
 ? ? ? ? ? ?console.log($("#hobby").prop('checked'));//返回属性的值的状态
?
 ? ? ? ? ? ?$("#hobby").prop('checked',false);//设置属性
?
 ? ? ? ? ? ?$("#username").prop("id","999");//也可以设置属性，注意不能自定义属性
?
 ? ? ? ?</script>
 ? ?</body>
</html>

操作样式

代码演示

<!DOCTYPE html>
<html lang="zh-CN">
 ? ?<head>
 ? ? ? ?<meta charset="UTF-8">
 ? ? ? ?<title>11-dom操作样式</title>
 ? ? ? ?<script src="../js/jquery-3.2.1.min.js"></script>
 ? ? ? ?<style>
 ? ? ? ? ? ?#p1 {
 ? ? ? ? ? ? ? ?background-color: red;
 ? ? ? ? ?  }
?
 ? ? ? ? ? ?.mp {
 ? ? ? ? ? ? ? ?color: green;
 ? ? ? ? ?  }
?
 ? ? ? ? ? ?.mpp {
 ? ? ? ? ? ? ? ?background-color: lightgray;
 ? ? ? ? ?  }
 ? ? ? ?</style>
?
 ? ?</head>
 ? ?<body>
 ? ? ? ?<p id="p1">1. 设置一个css样式</p>
 ? ? ? ?<p id="p2">2. 通过class设置样式</p>
 ? ? ? ?<p id="p3">3.
 ? ? ? ? ? ?<button id="toggle">切换</button>
 ? ? ? ? ?  class样式
 ? ? ? ?</p>
?
 ? ? ? ?<script>
 ? ? ? ? ? ?let $p1 = $('#p1');//获取p1
 ? ? ? ? ? ?let $p2 = $('#p2');//获取p2
 ? ? ? ? ? ?let $p3 = $('#p3');//获取p3
?
 ? ? ? ? ? ?// 1. 获取$p1的背景色
 ? ? ? ? ? ?console.log($p1.css('background-color'));
 ? ? ? ? ? ?// 1.1 设置$p1的背景色为gray色
 ? ? ? ? ? ?$p1.css('background-color', 'gray');
?
?
 ? ? ? ? ? ?// 2. 通过class设置样式
 ? ? ? ? ? ?$p2.addClass('mp mpp');
 ? ? ? ? ? ?$p2.removeClass('mpp');
?
 ? ? ? ? ? ?// 3. toggleClass() 切换一个class
 ? ? ? ? ? ?$('#toggle').click(function () {
 ? ? ? ? ? ? ? ?$p3.toggleClass('mpp');
 ? ? ? ? ?  });
 ? ? ? ?</script>
 ? ?</body>
</html>

操作元素(节点操作)

代码演示

<!DOCTYPE html>
<html lang="zh-CN">
 ? ?<head>
 ? ? ? ?<meta charset="UTF-8">
 ? ? ? ?<title>13-dom操作元素</title>
 ? ? ? ?<script src="../js/jquery-3.2.1.min.js"></script>
 ? ?</head>
 ? ?<body>
?
 ? ? ? ?<ul id="star">
 ? ? ? ? ? ?<li>古力娜扎</li>
 ? ? ? ? ? ?<li>迪丽热巴</li>
 ? ? ? ?</ul>
?
 ? ? ? ?<script>
 ? ? ? ? ? ?let $star = $('#star'); // 无序列表
 ? ? ? ? ? ?
 ? ? ? ? ? ?// 1.前面添加马尔扎哈
 ? ? ? ? ? ?$star.prepend($('<li>马尔扎哈</li>'));
 ? ? ? ? ? ?
 ? ? ? ? ? ?// 2.后面添加萨瓦迪卡
 ? ? ? ? ? ?$star.append($('<li>萨瓦迪卡</li>'));
 ? ? ? ? ? ?
 ? ? ? ? ? ?// 3.移出所有列表项
 ? ? ? ? ? ?$star.empty();
 ? ? ? ? ? ?
 ? ? ? ? ? ?// 4.删除无序列表
 ? ? ? ? ? ?$star.remove();
 ? ? ? ?</script>
 ? ?</body>
</html>

事件绑定

jQuery的事件与js的事件的功能和作用一样，只是在使用语法上稍微有些差异。

jq事件绑定语法

jq对象.事件函数(function(){})

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>14-jq事件绑定</title>
 ? ?<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="button" value="js方式" id="jsBtn"> <br>
<input type="button" value="jq方式" id="jqBtn"> <br>
?
<script>
 ? ?// js事件绑定
 ? ?document.getElementById('jsBtn').οnclick=function () {
 ? ? ? ?alert('js事件绑定')
 ?  }
 ? ?// jq事件绑定
 ? ?$('#jqBtn').click(function () {
 ? ? ? ?alert('jq事件绑定')
 ?  })
</script>
</body>
</html>

常见事件

点击事件

事件	描述
click()	单击事件
dblclick()	双击事件

焦点事件

事件	描述
blur()	失去焦点
focus()	元素获得焦点

鼠标事件

事件	描述
mousedown()	鼠标按钮被按下
mouseup()	鼠标按键被松开
mousemove()	鼠标被移动
mouseover()	鼠标移到某元素之上
mouseout()	鼠标从某元素移开

键盘事件

事件	描述
keydown()	某个键盘按键被按下
keyup()	某个键盘按键被松开
keypress()	某个键盘按键被按下并松开

改变事件

事件	描述
change()	域的内容被改变

表单事件

事件	描述
submit()	提交按钮被点击

案例

全选/全不选

        <table id="tab1" border="1" width="800" align="center" >
         ? <tr>
             ?<td colspan="5"><input type="button" value="删除"></td>
         ? </tr>
         ? <tr>
             ?<th><input type="checkbox" οnclick="selectAll(this)" ></th>
             ?<th>分类ID</th>
             ?<th>分类名称</th>
             ?<th>分类描述</th>
             ?<th>操作</th>
         ? </tr>
         ? <tr>
             ?<td><input type="checkbox" class="itemSelect"></td>
             ?<td>1</td>
             ?<td>手机数码</td>
             ?<td>手机数码类商品</td>
             ?<td><a href="">修改</a>|<a href="">删除</a></td>
         ? </tr>
         ? <tr>
             ?<td><input type="checkbox" class="itemSelect"></td>
             ?<td>2</td>
             ?<td>电脑办公</td>
             ?<td>电脑办公类商品</td>
             ?<td><a href="">修改</a>|<a href="">删除</a></td>
         ? </tr>
         ? <tr>
             ?<td><input type="checkbox" class="itemSelect"></td>
             ?<td>3</td>
             ?<td>鞋靴箱包</td>
             ?<td>鞋靴箱包类商品</td>
             ?<td><a href="">修改</a>|<a href="">删除</a></td>
         ? </tr>
         ? <tr>
             ?<td><input type="checkbox" class="itemSelect"></td>
             ?<td>4</td>
             ?<td>家居饰品</td>
             ?<td>家居饰品类商品</td>
             ?<td><a href="">修改</a>|<a href="">删除</a></td>
         ? </tr>
        </table>
?
        <script src="js/jquery-3.4.1.js"></script>
        <script>
            
         ?//分析：需要保证下边的选中状态和第一个复选框的选中状态一致即可
 ? ? ? ? ?function selectAll(obj){
            //alert(obj.checked);//true false
 ? ? ? ? ? ?//获取下边的复选框  选中复选框为true，没选中为false
 ? ? ? ? ? ?$(".itemSelect").prop("checked",obj.checked);
 ? ? ? ?  }
?
        </script>

左右移动

<!DOCTYPE html>
<html>
 ? <head>
 ? ? ?<meta charset="UTF-8">
 ? ? ?<title></title>
?
 ? ? ?<style>
 ? ? ? ? #leftName , #btn,#rightName{
 ? ? ? ? ? ?float: left;
 ? ? ? ? ? ?width: 100px;
 ? ? ? ? ? ?height: 300px;
 ? ? ? ? }
 ? ? ? ? #toRight,#toLeft{
 ? ? ? ? ? ?margin-top:100px ;
 ? ? ? ? ? ?margin-left:30px;
 ? ? ? ? ? ?width: 50px;
 ? ? ? ? }
?
 ? ? ? ? .border{
 ? ? ? ? ? ?height: 500px;
 ? ? ? ? ? ?padding: 100px;
 ? ? ? ? }
 ? ? ?</style>
?
 ? </head>
 ? <body>
 ? ? ?<div class="border">
?
 ? ? ? ? <select id="leftName" multiple="multiple">
 ? ? ? ? ? ?<option>张三</option>
 ? ? ? ? ? ?<option>李四</option>
 ? ? ? ? ? ?<option>王五</option>
 ? ? ? ? ? ?<option>赵六</option>
 ? ? ? ? </select>
?
 ? ? ? ? <div id="btn">
 ? ? ? ? ? ?<input type="button" id="toRight" value="-->"><br>
 ? ? ? ? ? ?<input type="button" id="toLeft" value="<--">
 ? ? ? ? </div>
?
 ? ? ? ? <select id="rightName" multiple="multiple">
 ? ? ? ? ? ?<option>钱七</option>
 ? ? ? ? </select>
 ? ? ?</div>
     ?
     ?<script src="js/jquery-3.4.1.js"></script>
     ?<script>
     ?
     ? ? //需求：实现下拉列表选中条目左右选择功能
     ? ? 
     ? ? $(function () {
     ? ? ? ?//toRight
     ? ? ? ?$("#toRight").click(function () {
 ? ? ? ? ? ? ? ?//append  元素后面添加
     ? ? ? ? ? //获取右边的下拉列表对象，append(左边下拉列表选中的option)
     ? ? ? ? ? $("#rightName").append($("#leftName > option:selected"));
     ? ? ? ? ?  });
     ?
     ? ? ? ? ? ?//toLeft
     ? ? ? ? ? ?$("#toLeft").click(function () {
     ? ? ? ? ? ? ? ?//appendTo ? 获取右边选中的option，将其移动到左边下拉列表中
     ? ? ? ? ? $("#rightName > option:selected").appendTo($("#leftName"));
     ?
     ? ? ? ? ?  });
     ? ? ?  });
     ?</script>
 ? </body>
</html>
?

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集