• 【JavaWeb】第五章 jQuery

    文章目录

    1、jQuery介绍

    • jQuery，即JavaScript和Query(查询)，它是辅助JavaScript开发的类库，极大简化了JavaScript编程
    • jQuery核心思想是write less,do more(写的更少，做的更多)，所以它实现了很多浏览器的兼容问题

    2、jQuery之Hello World！

    不用jQuery，使用原生JavaScript，实现Hello World！

    ...
<script type="text/javascript">
        window.onload = function(){
            var btnObj = document.getElementById("btnId");
            btnObj.onclick = function(){
                alert("JS原生版Hello World!");
            }
        }
    </script>
...

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    使用jQuery以后：

    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
        $(function(){ //表示页面加载完成之后，相当于window.onload = function(){}
            var $btnObj = $("#btnId"); //表示按id查询标签对象
            $btnObj.click(function(){  //绑定单击事件
                alert("jQuery版的Hello World！");
            });
        });

    </script>

</head>
<body>
    <button id="btnId">SayHello</button>

</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    问题1：不引入js类库报错：
    在这里插入图片描述
    jQuery的版本下载网址：http://www.jq22.com/jquery-info122

    选择对应的版本引入或者下载后放到工程目录中即可：

    百度压缩版引用地址:
<script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

微软压缩版引用地址:
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.min.js"></script>

官网jquery压缩版引用地址:
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    解压后的两个jquery.js文件，jquery.js阅读起来方便，jquery.min.js则是压缩版jquery.js，加载的时候就很快，部署到网站上的时候自然是选择jquery.min.js

    在这里插入图片描述

    问题2：jQuery中$是什么东西？

    • $是一个函数

    问题3：如何为按钮添加响应函数的？

    • 使用jQuery查询到标签对象
    • 使用标签对象.click( function(){} );

    3、jQuery的核心函数

    $是jQuery的核心函数，能完成jQuery的很多功能，$()就是调用这个函数

    1) 传入参数为函数时，表示页面加载完成之后，相当于window.onload = function(){}

    ...
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function(){
		alert("页面加载完成以后自动执行");
	});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    在这里插入图片描述

    2) 传入参数为HTML字符串时，会帮我们创建html标签对象或元素节点对象

    //为了让结果在页面加载完成后显示，这里给外层套一个$(function()...

$(function(){
	//这里不用+号拼接，直接整体一个引号也行
	$("
    " + "div1+span1" + "div1+span1" + "
    "    ).appendTo("body");
	//appendTo()方法直接加到body中
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    运行效果：

    在这里插入图片描述

    3) 传入参数为选择器字符串时，根据这个字符串查找元素对象

    • $(“#id属性值”)；id选择器，根据id查询标签对象
    • $(“标签名”); 标签名选择器，根据指定的标签名查询标签对象
    • $(“.class属性值”); 类选择器，根据class属性查询标签对象
    
var $btnObj = $("#btnId");

//注意执行时机，别页面还没加载就被当单语句执行了
alert($("button").length);

    • 1
    • 2
    • 3
    • 4
    • 5

    4) 传入参数为DOM对象时，会把这个DOM对象转化为jQuery对象

    $(function(){
	var btnObj = document.getElementById("btnId");
	alert(btnObj);
	alert( $(btnObj) );
});

    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述
    在这里插入图片描述

    4、jQuery对象和DOM对象的区别

    DOM对象：

    • 通过getElementById()方法查询出来的标签对象是Dom对象
    • 通过getElementsByName()方法查询出来的标签对象是Dom对象
    • 通过getElementsByTagName()方法查询出来的标签对象是Dom对象
    • 通过createElement()方法创建出来的对象是Dom对象
    • Dom对象alert出来的效果很直观的可以看到标签信息
      在这里插入图片描述

    jQuery对象：

    • 通过jQuery提供的API创建出来的对象是jQuery对象
    • 通过jQuery包装的Dom对象是jQuery对象
    • 通过jQuery提供的API查询出来的对象是jQuery对象
    //创建
alert( $("
    "    ) );

//包装
alert( $(domObj) );

//查询
alert( $("button") );

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    在这里插入图片描述

    在使用上的区别：

    jQuery对象不能使用Dom对象的属性和方法

    //修改成功
document.getElementById("btnId").innerHTML = "这是Dom对象的innerHTML属性";

//修改失败
$("#btnId").innerHTML = "这里会修改失败";

    • 1
    • 2
    • 3
    • 4
    • 5

    Dom对象也不能使用jQuery对象的属性和方法

    //调用成功
$("#btnId").click(function(){
	alert("click是jQuery对象的方法");
});

//调用失败
document.getElementById("btnId").click(function(){
	alert("click是jQuery对象的方法");
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    5、jQuery对象的本质

    jQuery对象是Dom对象的数组+jQuery提供的一系列功能函数

    //验证
var $btns = $("button");
for(var i=0;i<$btns.length;i++){
	alert( $btns[i] );
}
//输出结果是一个个的Dom对象
//F12可以看到还有一系列的function()

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    Dom对象和jQuery对象的互转

    • Dom对象转为jQuery对象：
    var $obj = $(Dom对象);

    • 1
    • jQuery对象转为Dom对象：
    var domObj = jQuery对象[下标] 

    • 1

    在这里插入图片描述

    6、jQuery基础选择器

    • #id根据给定的id匹配一个元素
    $("#btnId")

    • 1
    • element根据给定的元素名匹配所有的元素
    <div></div>
<div></div>
<div></div>

#("div");

    • 1
    • 2
    • 3
    • 4
    • 5
    • .class根据给定的类匹配元素。一个元素可以有多个类，符合一个就能被匹配到
    <div class="myClass">1</div>
<div class="9527">2</div>
<div>3</div>

$(".myClass");

    • 1
    • 2
    • 3
    • 4
    • 5
    • *匹配所有元素
    $("*");

    • 1

    举例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#btn01").click(function(){
                //css()方法可以设置和获取样式
                $("#one").css("background-color","blue");
            });

            $("#btn02").click(function(){
                $("*").css("background-color","green");
            });
            //组合选择器
            $("#btn03").click(function(){
                $("span,.two").css("background-color","#bbffaa");
            });
        });

    </script>
</head>
<body>
    <button id="btn01">标蓝id为one的元素</button><br/>
    <button id="btn02">标绿所有的元素</button><br/>
    <button id="btn03">选择所有span标签元素和和class属性为code的元素</button>
    <h1 id="one">标题1</h1>
    <span>span元素1</span>
    <span>span元素2</span>
    <img src="../.idea/event/right.png" class="code"/>

</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    运行效果：
    在这里插入图片描述

    7、层级选择器

    1） 在给定的祖先元素下匹配所有的后代元素，返回一个Array

    //找到表单中所有的input元素（则父标签为form标签）
$("form input");

    • 1
    • 2
    //找到所有span标签中的h2元素

<span>
	<h2></h2>
	<div>
		<h2></h2>
	</div>
</span>
<button></button>
<h2></h2>

....
$(function(){
	alert($("span h2").length);
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    运行结果：
    在这里插入图片描述

    2）在给定的父元素下匹配所有的子元素

    注意和1）中的后代元素的区别

    //找到所有span标签中h2的子元素

<span>
	<h2></h2> //子
	<div>
		<h2></h2> //孙
	</div>
</span>
<button></button>
<h2></h2>

....
$(function(){
	alert($("span > h2").length);
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    在这里插入图片描述

    3）匹配紧接在prev元素后面的next元素

    //匹配所有紧跟在button标签后面的h2元素

<span>
	<h2></h2> //子
	<div>
		<h2></h2> //孙
	</div>
</span>
<button></button>
<h2></h2>
<button></button>
<h1></h1>
<h2></h2>
....
$(function(){
	alert($("button + h2").length);
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    在这里插入图片描述

    4）匹配prev元素之后的所有同辈xx元素（兄弟元素）

    $("prev ~ xx");

    • 1

    8、基本过滤选择器

    1）:first 获取第一个元素

    <ul>
	<li>list item 1</li>
	<li>list item 2</li>
	<li>list item 3</li>
	<li>list item 4</li>
	<li>list item 5</li>
</ul>

....
$("li:first");

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    结果：

    <li>list item 1</li>

//alert($("li:first")[0].innerHTML);可验证

    • 1
    • 2
    • 3

    2）:last 获取最后一个元素

    alert($("li:last")[0].innerHTML);

    • 1

    在这里插入图片描述

    3）:not(选择器) 去除与给定选择器匹配的元素

    <ul>
	<li id="9527">list item 1</li>
	<li>list item 2</li>
	<li>list item 3</li>
	<li>list item 4</li>
	<li>list item 5</li>
</ul>

....

//不要id为9527的li标签
alert($("li:not(#9527)").length);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    在这里插入图片描述

    4）:even匹配所有索引为偶数的元素，从0开始

    //匹配1.3.5行（索引0.2.4）

$("li:even");

    • 1
    • 2
    • 3

    5）:odd匹配所有索引为奇数的元素，从0开始

    //匹配2.4.6行（索引1.3.5）

$("li:odd");

    • 1
    • 2
    • 3

    6）:eq(index)匹配一个给定索引值的元素

    //匹配第二行

$("li:eq(1)");

    • 1
    • 2
    • 3

    7）:gt(index)匹配所有大于给定索引值的元素

    //返回
  • list item 5
    • 

$("li:gt(3)");

    • 1
    • 2
    • 3

    8）:lt(index)匹配所有小于给定索引值的元素

    //查找第一第二行，即索引为0.1

$("li:lt(2)");

    • 1
    • 2
    • 3

    9）:header匹配如h1、h2、h3等的标题元素

    <body>
	<h1>header1</h1>
	<p>段落1</p>
	<h2>header2</h2>
	<p>段落2</p>
</body>

.....
$(":header").css("background","blue");

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    运行效果：
    在这里插入图片描述

    10）:animated匹配正在执行动画效果的元素

    $(":animated").css("background","blue");

    • 1
    //选择没有执行动画的最后一个div元素对象

$("div:not(:animated):last").css("background","#bbffaa");

    • 1
    • 2
    • 3
  • 相关阅读:
    【LeetCode】No.101. Symmetric Tree -- Java Version
    Pointers
    pcl--第十节 点云曲面重建
    python 使用requests爬取百度图片并显示
    金仓数据库KingbaseES ksql工具用户指南及参考--2. Ksql快速启动
    读书笔记：彼得·德鲁克《认识管理》第24章 管理岗位的设计与内容
    Codeforces Beta Round 5
    pytorch中gather函数详解【包你看懂，我敢说在CSDN上没人解释的比我清楚】
    docker-compose启动oracle11、并使用navicat进行连接
    MongoDB 学习笔记
  • 原文地址：https://blog.csdn.net/llg___/article/details/127774333