投稿
  1. 极客之音首页
  2. 技术随笔

【JavaWeb】第五章 jQuery（上篇）

飞熊 • • 技术随笔 • 阅读 200

有时候，不是因为你没有能力，也不是因为你缺少勇气，只是因为你付出的努力还太少，所以，成功便不会走向你。而你所需要做的，就是坚定你的梦想，你的目标，你的未来，然后以不达目的誓不罢休的那股劲，去付出你的努力，成功就会慢慢向你靠近。

导读：本篇文章讲解 【JavaWeb】第五章 jQuery（上篇），希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com，来源：原文

文章目录

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>
...

使用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：不引入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>

解压后的两个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("页面加载完成以后自动执行");
	});

在这里插入图片描述

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

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

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

运行效果：

在这里插入图片描述

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

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

var $btnObj = $("#btnId");

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

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

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

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

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( $("<h1></h1>") );

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

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

在这里插入图片描述

在使用上的区别：

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

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

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

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

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

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

5、jQuery对象的本质

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

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

Dom对象和jQuery对象的互转

  • Dom对象转为jQuery对象：
var $obj = $(Dom对象);
  • jQuery对象转为Dom对象：
var domObj = jQuery对象[下标]

在这里插入图片描述

6、jQuery基础选择器

  • #id根据给定的id匹配一个元素
$("#btnId")
  • element根据给定的元素名匹配所有的元素
<div></div>
<div></div>
<div></div>

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

$(".myClass");
  • *匹配所有元素
$("*");

举例：

<!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>

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

7、层级选择器

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

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

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

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

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

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

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

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

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

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

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

在这里插入图片描述

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);
});

在这里插入图片描述

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

$("prev ~ xx");

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");

结果：

<li>list item 1</li>

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

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

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

在这里插入图片描述

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);

在这里插入图片描述

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

//匹配1.3.5行（索引0.2.4）

$("li:even");

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

//匹配2.4.6行（索引1.3.5）

$("li:odd");

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

//匹配第二行

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

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

//返回<li>list item 5</li>

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

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

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

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

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

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

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

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

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

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

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

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

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/146104.html

赞 (0)
飞熊的头像飞熊bm
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！