JQuery1_基础上

最新推荐文章于 2022-09-07 10:19:07 发布

gingerMr_程序人生

最新推荐文章于 2022-09-07 10:19:07 发布

阅读量174

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/gingerMr/article/details/117882283

版权

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

JQuery概念
快速入门
JQuery和Javascript的区别
JQuery和Javascript相互转换
选择器：筛选具有相似特征的元素(标签)
DOM操作
案例

JQuery概念

一个JavaScript框架，简化JS开发。

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已。

快速入门

1. 下载JQuery
	  目前jQuery有三个大版本：
			1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，
				 功能不再新增。因此一般项目来说，使用1.x版本就可以了，
				 最终版本：1.12.4 (2016年5月20日)
			2.x：不兼容ie678，很少有人使用，官方只做BUG维护，
				 功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，
				 最终版本：2.2.4 (2016年5月20日)
			3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，
				 一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。
				 目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）
		  jquery-xxx.js 与 jquery-xxx.min.js区别：
			1. jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
			2. jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快

2. 导入JQuery的js文件：导入min.js文件

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery快速入门</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">div1....</div>
<div id="div2">div2....</div>

<script>
    //使用JQuery获取元素对象
    var div1 = $("#div1");
    alert(div1.html());
    var div2 = $("#div2");
    alert(div2.html());
</script>
</body>
</html>

JQuery和Javascript的区别

1. JQuery对象在操作时，更加方便。

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery快速入门</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">div1....</div>
<script>
    //使用JQuery获取元素对象
    var $div1 = $("#div1");
    alert($div1.html());

    //获取Javascript元素对象
    var div1 = document.getElementById("div1");
    alert(div1.innerHTML);
</script>
</body>
</html>

2. JQuery对象和Javascript对象方法不通用

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery快速入门</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">div1....</div>
<script>
    //使用JQuery获取元素对象
    var $div1 = $("#div1");
    //JQuery对象调用JS中的方法
    alert($div1.innerHTML);//undefined

    //获取Javascript元素对象
    var div1 = document.getElementById("div1");
    //Javascript独享调用JQ中的方法
    alert(div1.html());//不起作用
</script>
</body>
</html>

3. JQuery和Javascript加载区别

3.1 使用Javascript写两个页面加载函数,存在覆盖的情况。

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    window.onload = function () {
        alert("张三");
    }
    window.onload = function () {
        alert("李四");
    }
</script>
<body>
</body>
</html>

李四已经覆盖张三
在这里插入图片描述

3.2 通过测试JQuery比Javascript执行更快。

代码演示

<!DOCTYPE html>
<html lang="en">
<script src="js/jquery-3.3.1.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
     //Javascript页面加载事件
     window.onload = function () {
         alert("Javascript页面加载事件");
     }
     //JQuery页面加载事件简写
    $(function(){
         alert("JQuery页面加载事件");
     });
     //JQuery页面加载事件
     /*$(document).ready(function () {
         alert("JQuery页面加载事件");

     })*/
</script>
<body>
<!--
    如果我不定义下面这么多的图片js页面事件先执行,因为定义在jq页面加载事件前面。
    然后我定义了12张图片,jq页面加载事件就会先执行。

    原因:
    js页面加载事件是整个页面加载完毕包括其他内容,比如图片,就会执行。
    jq页面加载事件是当整个dom树结构加载完毕,就会执行,所以jq执行速度更快。
-->
<img src="img/01.gif"><br>
<img src="img/02.gif"><br>
<img src="img/03.gif"><br>
<img src="img/04.gif"><br>
<img src="img/05.gif"><br>
<img src="img/06.gif"><br>
<img src="img/07.gif"><br>
<img src="img/08.gif"><br>
<img src="img/09.gif"><br>
<img src="img/10.gif"><br>
<img src="img/11.gif"><br>
<img src="img/12.gif"><br>
</body>
</html>

JQuery页面加载事件先执行
在这里插入图片描述
Javascript页面加载事件后执行

3.3 JQuery页面加载函数不存在覆盖问题,按顺序加载。

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery快速入门</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">div1....</div>
<script>
   //jqery页面加载函数
    $(function(){
        alert("疾风剑豪");
    });
    $(function(){
        alert("影流之主");
    });
</script>
</body>
</html>

JQuery和Javascript相互转换

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/jquery-3.3.1.min.js/"></script>
<body>
<div id="div1">div1....</div>
<div id="div2">div2....</div>
</body>
<script>
    /*
    1. JQuery对象和js对象方法不通用的。
    2. 两者相互转换：
            js -- > jq : $(js对象)
            jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
    */
    //js获取对象
    var divs = document.getElementsByTagName("div");
    //遍历元素数组
    for (var i = 0; i < divs.length; i++) {
        //divs[i].innerHTML="至高之拳";

        //js -- > jq : $(js对象)
        $(divs[i]).html("至高之拳");
    }
    
    //jq获取对象
    var $divs = $("div");
    //$divs.html("法外狂徒");//不需要遍历,就可以设置属性。

    //jq -- > js : jq对象[索引]
    $divs[0].innerHTML = "法外狂徒";
    $divs[1].innerHTML = "法外狂徒";

    //jq -- > js : jq对象.get(索引)
    $divs.get(0).innerHTML= "防爆士兵";
    $divs.get(1).innerHTML= "防爆士兵";
</script>
</html>

在这里插入图片描述

选择器：筛选具有相似特征的元素(标签)

1. 基本选择器

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

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

1.2 id选择器

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

1.3 类选择器

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

1.4 并集选择器

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

基本选择器代码演示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>基本选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
        div, span {
            width: 180px;
            height: 180px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }
        div .mini {
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
        div .mini01 {
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
    </style>
    <script>
        $(function () {
            // <input type="button" value="改变 id 为 one 的元素的背景色为 红色" id="b1"/>
            $("#b1").click(function () {
                $("#one").css("backgroundColor", "pink");
            });
            // <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色" id="b2"/>
            $("#b2").click(function(){
                $("div").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色" id="b3"/>
            $("#b3").click(function(){
                $(".mini").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色" id="b4"/>
            $("#b4").click(function(){
                $("span,#two").css("backgroundColor","pink");
            });
        });
    </script>
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini"/>
<input type="button" value="改变 id 为 one 的元素的背景色为 红色" id="b1"/>
<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色" id="b2"/>
<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色" id="b3"/>
<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色" id="b4"/>
<h1>有一种奇迹叫坚持</h1>
<h2>自信源于努力</h2>
<div id="one">
    id为one
</div>
<div id="two" class="mini">
    id为two class是 mini
    <div class="mini">class是 mini</div>
</div>
<div class="one">
    class是 one
    <div class="mini">class是 mini</div>
    <div class="mini">class是 mini</div>
</div>
<div class="one">
    class是 one
    <div class="mini01">class是 mini01</div>
    <div class="mini">class是 mini</div>
</div>
<span class="spanone">class为spanone的span元素</span>
<span class="mini">class为mini的span元素</span>
<input type="text" value="zhang" id="username" name="username">
</body>
</html>

在这里插入图片描述

2. 层级选择器

2.1 后代选择器

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

2.2 子选择器

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

层级选择器代码演示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>层次选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
        div, span {
            width: 180px;
            height: 180px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }
        div .mini {
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
        div .mini01 {
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
    </style>
    <script>
        $(function () {
            // <input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色" id="b1"/>
            $("#b1").click(function () {
                $("body div").css("backgroundColor", "pink");
            });
            // <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色" id="b2"/>
            $("#b2").click(function () {
               $("body > div").css("backgroundColor","pink");
            });
        });
    </script>
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini"/>
<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色" id="b1"/>
<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色" id="b2"/>
<h1>有一种奇迹叫坚持</h1>
<h2>自信源于努力</h2>
<div id="one">
    id为one
</div>
<div id="two" class="mini">
    id为two class是 mini
    <div class="mini">class是 mini</div>
</div>
<div class="one">
    class是 one
    <div class="mini">class是 mini</div>
    <div class="mini">class是 mini</div>
</div>
<div class="one">
    class是 one
    <div class="mini01">class是 mini01</div>
    <div class="mini">class是 mini</div>
</div>
<span class="spanone">span</span>
</body>
</html>

在这里插入图片描述

3. 属性选择器

3.1 属性名称选择器

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

3.2 属性选择器

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

3.3 复合属性选择器

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

属性选择器代码演示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>属性过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
        div, span {
            width: 180px;
            height: 180px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }
        div .mini {
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
        div .mini01 {
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
        div.visible {
            display: none;
        }
    </style>
    <script>
        $(function () {
            // <input type="button" value=" 含有属性title 的div元素背景色为红色" id="b1"/>
            $("#b1").click(function () {
                $("div[title]").css("backgroundColor", "pink");
            });
            // <input type="button" value=" 属性title值等于test的div元素背景色为红色" id="b2"/>
            $("#b2").click(function () {
                $("div[title='test']").css("backgroundColor", "pink");
            });
            // <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/>
            $("#b3").click(function () {
                $("div [title!='test']").css("backgroundColor", "pink");
            });
            // <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色" id="b4"/>
            $("#b4").click(function () {
                $("div[title^=te]").css("backgroundColor", "pink");
            });
            // <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色" id="b5"/>
            $("#b5").click(function () {
                $("div[title$=est]").css("backgroundColor", "pink");
            });
            // <input type="button" value="属性title值 含有es的div元素背景色为红色" id="b6"/>
            $("#b6").click(function () {
               $("div[title*=es]").css("backgroundColor","pink");
            });
            // <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id="b7"/>
            $("#b7").click(function () {
               $("div[id][title*=es]").css("backgroundColor","pink");
            });
        });
    </script>
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini"/>
<input type="button" value=" 含有属性title 的div元素背景色为红色" id="b1"/>
<input type="button" value=" 属性title值等于test的div元素背景色为红色" id="b2"/>
<input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/>
<input type="button" value=" 属性title值 以te开始 的div元素背景色为红色" id="b4"/>
<input type="button" value=" 属性title值 以est结束 的div元素背景色为红色" id="b5"/>
<input type="button" value="属性title值 含有es的div元素背景色为红色" id="b6"/>
<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id="b7"/>
<div id="one">
    id为one div
</div>

<div id="two" class="mini" title="test">
    id为two class是 mini div title="test"
    <div class="mini">class是 mini</div>
</div>

<div class="visible">
    class是 one
    <div class="mini">class是 mini</div>
    <div class="mini">class是 mini</div>
</div>
<div class="one" title="test02">
    class是 one title="test02"
    <div class="mini01">class是 mini01</div>
    <div class="mini" style="margin-top:0px;">class是 mini</div>
</div>
<div class="visible">
    这是隐藏的
</div>
<div class="one">
</div>
<div id="mover">
    动画
</div>
<input type="text" value="zhang" id="username" name="username">
</body>
</html>

在这里插入图片描述

4. 过滤选择器

4.1 首元素选择器

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

4.2 尾元素选择器

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

4.3 非元素选择器

语法： :not(selector) 不包括指定内容的元素

4.4 偶数选择器

语法： :even 偶数，从 0 开始计数

4.5 奇数选择器

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

4.6 等于索引选择器

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

4.7 大于索引选择器

语法： :gt(index) 大于指定索引元素

4.8 小于索引选择器

语法： :lt(index) 小于指定索引元素

4.9 标题选择器

语法： :header 获得标题（h1~h6）元素，固定写法

过滤选择器代码演示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>基本过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
        div, span {
            width: 180px;
            height: 180px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }
        div .mini {
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
        div .mini01 {
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
    </style>
    <script>
        $(function () {
            // <input type="button" value=" 改变第一个 div 元素的背景色为 红色" id="b1"/>
            $("#b1").click(function () {
                $("div:first").css("backgroundColor", "pink");
            });
            // <input type="button" value=" 改变最后一个 div 元素的背景色为 红色" id="b2"/>
            $("#b2").click(function () {
                $("div:last").css("backgroundColor", "pink");
            });
            // <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色" id="b3"/>
            $("#b3").click(function () {
                $("div[class]:not('.one')").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色" id="b4"/>
            $("#b4").click(function(){
                $("div:even").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色" id="b5"/>
            $("#b5").click(function(){
                $("div:odd").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色" id="b6"/>
            $("#b6").click(function(){
                $("div:gt(3)").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色" id="b7"/>
            $("#b7").click(function () {
               $("div:eq(3)").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色" id="b8"/>
            $("#b8").click(function () {
                $("div:lt(3)").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变所有的标题元素的背景色为 红色" id="b9"/>
            $("#b9").click(function(){
                $(":header").css("backgroundColor","pink");
            });
        });
    </script>
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini"/>
<input type="button" value=" 改变第一个 div 元素的背景色为 红色" id="b1"/>
<input type="button" value=" 改变最后一个 div 元素的背景色为 红色" id="b2"/>
<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色" id="b3"/>
<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色" id="b4"/>
<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色" id="b5"/>
<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色" id="b6"/>
<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色" id="b7"/>
<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色" id="b8"/>
<input type="button" value=" 改变所有的标题元素的背景色为 红色" id="b9"/>

<h1>有一种奇迹叫坚持</h1>
<h2>自信源于努力</h2>

<div id="one">
    id为one
</div>
<div id="two" class="mini">
    id为two class是 mini
    <div class="mini">class是 mini</div>
</div>

<div class="one">
    class是 one
    <div class="mini">class是 mini</div>
    <div class="mini">class是 mini</div>
</div>
<div class="one">
    class是 one
    <div class="mini01">class是 mini01</div>
    <div class="mini">class是 mini</div>
</div>
</body>
</html

在这里插入图片描述

5. 表单过滤选择器

5.1 可用元素选择器

语法： :enabled 获得可用元素

5.2 不可用元素选择器

语法： :disabled 获得不可用元素

5.3 选中选择器

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

5.4 选中选择器

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

表单过滤选择器代码演示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>表单属性过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
        div, span {
            width: 180px;
            height: 180px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div .mini {
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div .mini01 {
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
        #job {
            margin: 20px;
        }
        #edu {
            margin-top: -70px;
        }
    </style>
    <script>
        $(function () {
            // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/>
            $("#b1").click(function () {
                $("input[type='text']:enabled").val("aaa");
            });
            // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/>
            $("#b2").click(function () {
                $("input[type='text']:disabled").val("bbb");
            });
            // <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数" id="b3"/>
            $("#b3").click(function () {
               alert($("input[type='checkbox']:checked").length);//4
            });
            // <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数" id="b4"/>
            $("#b4").click(function(){
                   alert($("select option:selected").length);
            });
        });
    </script>
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini"/>
<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/>
<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/>
<input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数" id="b3"/>
<input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数" id="b4"/>
<br><br>
<input type="text" value="不可用值1" disabled="disabled">
<input type="text" value="可用值1">
<input type="text" value="不可用值2" disabled="disabled">
<input type="text" value="可用值2">
<br><br>
<input type="checkbox" name="items" value="美容">美容
<input type="checkbox" name="items" value="IT">IT
<input type="checkbox" name="items" value="金融">金融
<input type="checkbox" name="items" value="管理">管理
<br><br>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<br><br>
<select name="job" id="job" multiple="multiple" size=4>
    <option>程序员</option>
    <option>中级程序员</option>
    <option>高级程序员</option>
    <option>系统分析师</option>
</select>
<select name="edu" id="edu">
    <option>本科</option>
    <option>博士</option>
    <option>硕士</option>
    <option>大专</option>
</select>
<br/>
<div id="two" class="mini">
    id为two class是 mini div
    <div class="mini">class是 mini</div>
</div>
<div class="one">
    class是 one
    <div class="mini">class是 mini</div>
    <div class="mini">class是 mini</div>
</div>
<div class="one">
    class是 one
    <div class="mini01">class是 mini01</div>
    <div class="mini">class是 mini</div>
</div>
</body>
</html>

在这里插入图片描述

DOM操作

1. 内容操作

1.1 html()：获取/设置元素的标签体内容

举例:<a><font>内容</font></a>  --> <font>内容</font>

代码演示

<!DOCTYPE html>
<html lang="en">
<script src="js/jquery-3.3.1.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    $(function(){
        //html()
        var $html = $("#mydiv").html();
        alert($html); //<p><a href="#">标题标签</a></p>
        //设置标签体内容
        $("#mydiv").html("格雷福斯");
    });
</script>
<body>
<input id="myinput" type="text" name="username" value="张三"/><br/>
<div id="mydiv"><p><a href="#">标题标签</a></p></div>
</body>
</html>

1.2 text()：获取/设置元素的标签体纯文本内容

举例:<a><font>内容</font></a> --> 内容

代码演示

<!DOCTYPE html>
<html lang="en">
<script src="js/jquery-3.3.1.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    $(function () {
        //text()
        var text = $("#mydiv").text();
        alert(text);
        //设置文本内容
        $("#mydiv").text("影流之主");
    });
</script>
<body>
<input id="myinput" type="text" name="username" value="张三"/><br/>
<div id="mydiv"><p><a href="#">标题标签</a></p></div>
</body>
</html>

1.3 val()：获取/设置元素的value属性值

代码演示

<!DOCTYPE html>
<html lang="en">
<script src="js/jquery-3.3.1.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    $(function () {
        //val();
        var $val = $("#myinput").val();
        alert($val);
        $("#myinput").val("李四");
    });
</script>
<body>
<input id="myinput" type="text" name="username" value="张三"/><br/>
<div id="mydiv"><p><a href="#">标题标签</a></p></div>
</body>
</html>

2. 属性操作

2.1 通用属性操作

attr和prop区别？

如果操作的是元素的固有属性，则建议使用prop。(在html文档中能找到的属性就是固有属性)。
如果操作的是元素自定义的属性，则建议使用attr。

注意：attr()在jquery1.11版本不适用，采用prop()来替代(在各个版本都适用)。

2.1.1 attr()：获取/设置元素的属性

2.1.2 removeAttr()：删除属性

2.1.3 prop()：获取/设置元素的属性

2.1.4 removeProp()：删除属性

通用属性操作代码演示

<!DOCTYPE html>
<html lang="en">
<script src="js/jquery-3.3.1.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    $(function () {
        //attr
        //获取属性值
        var name = $("#bj").attr("name");
        //alert(name);
        //重新设置属性
        $("#bj").attr("name", "疾风剑豪");
        //新增属性
        $("#bj").attr("discription", "影流之主");
        //删除属性
        $("#bj").removeAttr("name");


        //prop
        //获取属性值
        var checked = $("#hobby").prop("checked");
        /*
            像复选框和下拉框中的checked和selected使用attr,获取不到复选框和下拉框中的状态。
            input标签中如果不写checked="checked",获取到的就是undefined,而不是false。
            input标签中如果写checked="checked"，获取到的就是checked，而不是true没什么意义。
         */
        //var checked = $("#hobby").attr("checked");//undefined
        alert(checked);
        
        //新增属性
        $("#hobby").prop("checked","checked");
    });
</script>
<body>
<ul>
    <li id="bj" name="beijing" xxx="yyy">北京</li>
    <li id="tj" name="tianjin">天津</li>
</ul>
<input type="checkbox" id="hobby"/>
</body>
</html>

2.2 对class属性以及样式属性操作

2.2.1 addClass()：添加class属性值

2.2.2 removeClass()：删除class属性值

2.2.3 toggleClass()：切换class属性

对class属性以及样式属性操作代码演示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>样式操作</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
        .one {
            width: 200px;
            height: 140px;
            margin: 20px;
            background: red;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }
        div .mini {
            width: 40px;
            height: 40px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
        div .mini01 {
            width: 40px;
            height: 40px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
        /*待用的样式*/
        .second {
            width: 300px;
            height: 340px;
            margin: 20px;
            background: yellow;
            border: pink 3px dotted;
            float: left;
            font-size: 22px;
            font-family: Roman;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //<input type="button" value="采用属性增加样式(改变id=one的样式)"  id="b1"/>
            $("#b1").click(function () {
                $("#one").prop("class", "second");
            });
            //<input type="button" value=" addClass"  id="b2"/>
            $("#b2").click(function () {
                $("#one").addClass("second");
            });
            //<input type="button" value="removeClass"  id="b3"/>
            $("#b3").click(function () {
                $("#one").removeClass("second");
            });
            //<input type="button" value=" 切换样式"  id="b4"/>
            $("#b4").click(function () {
                $("#one").toggleClass("second");
            });
            //<input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>
            $("#b5").click(function () {
                var color = $("#one").css("backgroundColor");
                alert(color);
            });
            //<input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>
            $("#b6").click(function () {
               $("#one").css("backgroundColor","green");
            });
        });
    </script>
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini"/>
<input type="button" value="采用属性增加样式(改变id=one的样式)" id="b1"/>
<input type="button" value=" addClass" id="b2"/>
<input type="button" value="removeClass" id="b3"/>
<input type="button" value=" 切换样式" id="b4"/>
<input type="button" value=" 通过css()获得id为one背景颜色" id="b5"/>
<input type="button" value=" 通过css()设置id为one背景颜色为绿色" id="b6"/>
<h1>有一种奇迹叫坚持</h1>
<h2>自信源于努力</h2>
<div id="one">
    id为one
</div>
<div id="two" class="mini">
    id为two class是 mini
    <div class="mini">class是 mini</div>
</div>
<div class="one">
    class是 one
    <div class="mini">class是 mini</div>
    <div class="mini">class是 mini</div>
</div>
<div class="one">
    class是 one
    <div class="mini01">class是 mini01</div>
    <div class="mini">class是 mini</div>
</div>
<span class="spanone">span</span>
</body>
</html>

在这里插入图片描述

3. CRUD操作

3.1 开头或末尾新增元素

3.1.1 append()：父元素将子元素追加到末尾

对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾。

3.1.2 prepend()：父元素将子元素追加到开头

对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头。

3.1.3 appendTo()

对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾。

3.1.4 prependTo()

对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头。

开头或末尾新增元素代码演示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>内部插入脚本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div .mini {
            width: 30px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div.visible {
            display: none;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            // <input type="button" value="将反恐放置到city的后面"  id="b1"/>
            $("#b1").click(function () {
                //$("#city").append($("#fk"));
                $("#fk").appendTo($("#city"));
            });
            // <input type="button" value="将反恐放置到city的最前面"  id="b2"/>
            $("#b2").click(function () {
                //$("#city").prepend($("#fk"));
                $("#fk").prependTo($("#city"));
            });
        });
    </script>
</head>
<body>
<input type="button" value="将反恐放置到city的后面" id="b1"/>
<input type="button" value="将反恐放置到city的最前面" id="b2"/>
<input type="button" value="将反恐插入到天津后面" id="b3"/>
<input type="button" value="将反恐插入到天津前面" id="b4"/>
<ul id="city">
    <li id="bj" name="beijing">北京</li>
    <li id="tj" name="tianjin">天津</li>
    <li id="cq" name="chongqing">重庆</li>
</ul>
<ul id="love">
    <li id="fk" name="fankong">反恐</li>
    <li id="xj" name="xingji">星际</li>
</ul>
<div id="foo1">Hello1</div>
</body>
</html>

在这里插入图片描述

3.2 指定元素前或后新增元素

3.2.1 after()：添加元素到元素后边

对象1.after(对象2)：将对象2添加到对象1后边，对象1和对象2是兄弟关系。

3.2.2 before()：添加元素到元素前边

对象1.before(对象2)： 将对象2添加到对象1前边，对象1和对象2是兄弟关系。

3.2.3 insertAfter()

对象1.insertAfter(对象2)：将对象1添加到对象2后面，对象1和对象2是兄弟关系。

3.2.4 insertBefore()

对象1.insertBefore(对象2)： 将对象1添加到对象2前面，对象1和对象2是兄弟关系。

指定元素前或后新增元素代码演示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>内部插入脚本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }
        div .mini {
            width: 30px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }
        div.visible {
            display: none;
        }
    </style>
    <script>
        $(function () {
            // <input type="button" value="将反恐插入到天津后面"  id="b3"/>
            $("#b3").click(function () {
                //$("#tj").after($("#fk"));
                $("#fk").insertAfter($("#tj"));
            });

            // <input type="button" value="将反恐插入到天津前面"  id="b4"/>
            $("#b4").click(function () {
               //$("#tj").before($("#fk"));
                $("#fk").insertBefore($("#tj"));
            });
        });
    </script>
</head>
<body>
<input type="button" value="将反恐放置到city的后面" id="b1"/>
<input type="button" value="将反恐放置到city的最前面" id="b2"/>
<input type="button" value="将反恐插入到天津后面" id="b3"/>
<input type="button" value="将反恐插入到天津前面" id="b4"/>
<ul id="city">
    <li id="bj" name="beijing">北京</li>
    <li id="tj" name="tianjin">天津</li>
    <li id="cq" name="chongqing">重庆</li>
</ul>
<ul id="love">
    <li id="fk" name="fankong">反恐</li>
    <li id="xj" name="xingji">星际</li>
</ul>
<div id="foo1">Hello1</div>
</body>
</html>

在这里插入图片描述

3.3 删除元素

3.3.1 remove()：移除元素

对象.remove()：将对象删除掉。

3.3.2 empty()：清空元素的所有后代元素

对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点。

删除元素代码演示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>删除节点</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
        div, span {
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div.mini {
            width: 30px;
            height: 30px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div.visible {
            display: none;
        }
    </style>
    <script>
        $(function () {
            // <input type="button" value="删除<li id='bj' name='beijing'>北京</li>"  id="b1"/>
            $("#b1").click(function () {
                $("#bj").remove();
            });
            // <input type="button" value="删除city所有的li节点   清空元素中的所有后代节点(不包含属性节点)"  id="b2"/>
            $("#b2").click(function(){
                $("#city").empty();
            });
        });

    </script>
</head>
<body>
<input type="button" value="删除<li id='bj' name='beijing'>北京</li>" id="b1"/>
<input type="button" value="删除所有的子节点   清空元素中的所有后代节点(不包含属性节点)" id="b2"/>

<ul id="city">
    <li id="bj" name="beijing">北京</li>
    <li id="tj" name="tianjin">天津</li>
    <li id="cq" name="chongqing">重庆</li>
</ul>
<p class="hello">Hello</p> how are <p>you?</p>
</body>
</html>

在这里插入图片描述

案例

1.隔行换色

代码演示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        //需求：将数据行的奇数行背景色设置为 pink，偶数行背景色设置为 yellow
        $(function () {
            $("table tr:gt(1):even").css("backgroundColor", "yellow");
            $("table tr:gt(1):odd").css("backgroundColor", "pink");
        });
    </script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
    <tr>
        <td colspan="5"><input type="button" value="删除"></td>
    </tr>
    <tr style="background-color: #999999;">
        <th><input type="checkbox"></th>
        <th>分类ID</th>
        <th>分类名称</th>
        <th>分类描述</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>1</td>
        <td>手机数码</td>
        <td>手机数码类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>2</td>
        <td>电脑办公</td>
        <td>电脑办公类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>3</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

2.全选和全不选

代码演示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script  src="js/jquery-3.3.1.min.js"></script>
</head>
<script>
    function selectAll(obj){
        $(".itemSelect").prop("checked",obj.checked);
    }
</script>
<body>
<table id="tab1" border="1" width="800" align="center" >
    <tr>
        <td colspan="5"><input type="button" value="删除"></td>
    </tr>
    <tr>
        <th><input type="checkbox" onclick="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>
</body>
</html>

在这里插入图片描述

3.QQ表情选择

代码演示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>QQ表情选择</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .emoji {
            margin: 50px;
        }

        ul {
            overflow: hidden;
        }

        li {
            float: left;
            width: 48px;
            height: 48px;
            cursor: pointer;
        }

        .emoji img {
            cursor: pointer;
        }
    </style>
    <script>
        $(function () {
            //需求：点击qq表情，将其追加到发言框中
            var length = $("li img").click(function () {
            	//clone:是一个克隆方法,复制的元素添加到发言框中。
                $(".word").append($(this).clone());
            });
        });
    </script>

</head>
<body>
<div class="emoji">
    <ul>
        <li><img src="img/01.gif" height="22" width="22" alt=""/></li>
        <li><img src="img/02.gif" height="22" width="22" alt=""/></li>
        <li><img src="img/03.gif" height="22" width="22" alt=""/></li>
        <li><img src="img/04.gif" height="22" width="22" alt=""/></li>
        <li><img src="img/05.gif" height="22" width="22" alt=""/></li>
        <li><img src="img/06.gif" height="22" width="22" alt=""/></li>
        <li><img src="img/07.gif" height="22" width="22" alt=""/></li>
        <li><img src="img/08.gif" height="22" width="22" alt=""/></li>
        <li><img src="img/09.gif" height="22" width="22" alt=""/></li>
        <li><img src="img/10.gif" height="22" width="22" alt=""/></li>
        <li><img src="img/11.gif" height="22" width="22" alt=""/></li>
        <li><img src="img/12.gif" height="22" width="22" alt=""/></li>
    </ul>
    <p class="word">
        <strong>请发言：</strong>
        <img src="img/12.gif" height="22" width="22" alt=""/>
    </p>
</div>
</body>
</html>

在这里插入图片描述

4.多选下拉列表左右移动

代码演示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <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>
    <!--  //需求：实现下拉列表选中条目左右选择功能-->
    <script>
        $(function () {
            //单击左边元素追加到右边
            $("#toRight").click(function () {
                $("#rightName").append($("#leftName option:selected"));
            });
            //单击右边元素追加到左边
            $("#toLeft").click(function () {
                $("#leftName").append($("#rightName option:selected"))
            });

            //双击左边元素追加到右边
            $("#leftName option").dblclick(function () {
                $("#rightName").append($("#leftName option:selected"));
            });

            //双击右边元素追加到左边
            $("#rightName option").dblclick(function () {
                $("#leftName").append($("#rightName option:selected"));
            });
        });
    </script>
</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>
</body>
</html>

在这里插入图片描述

gingerMr_程序人生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery1_基础上

文章目录JQuery概念快速入门JQuery和Javascript的区别1. JQuery对象在操作时，更加方便。2. JQuery对象和Javascript对象方法不通用3. JQuery和Javascript加载区别3.1 使用Javascript写两个页面加载函数,存在覆盖的情况。3.2 通过测试JQuery比Javascript执行更快。3.3 JQuery页面加载函数不存在覆盖问题,按顺序加载。JQuery和Javascript相互转换选择器：筛选具有相似特征的元素(标签)1. 基本选择器1.1
复制链接

扫一扫