Day_44 jQuery

最新推荐文章于 2022-10-11 11:03:17 发布

Cenobite961

最新推荐文章于 2022-10-11 11:03:17 发布

阅读量51

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_26942049/article/details/121525048

版权

一、jQuery介绍

JavaScript与jQuery比较
1. js
  1. 入口函数只有一个，window.onload
  2. 浏览器兼容性：非常令人头疼，比如textContent虽然作为标准方法但是只支持IE8+以上的浏览器
  3. DOM错综复杂，实现简单的效果很麻烦
  4. 代码容错性差，出错后导致后面的代码不执行
2. jQuery
  1. 市场占有率稳步上升，代码比较少，功能强大
  2. DOM比较强大，事件处理，完全解决了浏览器的兼容性问题
  3. ajax操作（比较好）
什么是jQuery
1. jQuery是一个JavaScript函数库。
2. jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
3. jQuery库包含以下功能：HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和HTML DOM 遍历和修改。
为什么使用jQuery
1. 目前网络上有大量开源的 JS 库, 但是 jQuery 是目前最流行的 JS 库，而且提供了大量的扩展。
2. 很多大公司都在使用 jQuery，例如:Google、Microsoft、IBM、Netflix。
3. 目前jQuery兼容于所有主流浏览器, 包括Internet Explorer 6!

二、jQuery安装

从 jquery.com 下载 jQuery 库

jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：
```
<head> 
<script src="jquery-1.10.2.min.js"></script> 
</head>
```

从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

<head> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> 
</head>

三、jQuery语法

基础语法
1. 美元符号定义 jQuery
2. 选择符（selector）"查询"和"查找" HTML 元素
3. jQuery 的 action() 执行对元素的操作。
实例
1. 您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：
```
$(document).ready(function(){ 
// 开始写 jQuery 代码... }
);
```
2. 简洁写法（与以上写法效果相同）:
```
$(function(){ 
// 开始写 jQuery 代码... 
})
```

了解jQuery的$符号

$是什么

其实$就是一个函数：$();参数不一样，功能不一样

$常用的几种情况：

$(function() {});//参数是function，说明是入口函数
$(“#btnSetConent”);//参数是字符串，并且以#开头，是一个标签选择，查找id=“btnSetContent”的元素
$(“div”);//查找所有的div元素
$(document).ready(funciton(){})//将document转换成jQuery对象

jQuery 入口函数与 JavaScript 入口函数的区别

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。

JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

四、JQuery选择器

什么是jQuery选择器
1. jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
2. jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。
3. jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
4. jQuery 中所有选择器都以美元符号开头：$()。

基本选择器

名称	用法	描述
ID选择器	$(“#id”);	获取指定ID的元素
类选择器	$(“.class”);	获取同一类class的元素
标签选择器	$(“div”);	获取同一类标签的所有元素
并集选择器	$(“div,p,li”);	使用逗号分隔，只要符合条件之一就可。获取所有的div、p、li元素
交集选择器（标签指定式选择器）	$(“div.redClass”);	注意选择器1和选择器2之间没有空格，class为redClass的div元素，注意区分后代选择器。

总结:和css选择器的用法一模一样

层级选择器

名称	用法	描述
子代选择器	$(“ul>li”);	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

总结：跟CSS的选择器一模一样。

过滤选择器

	用法	描述
:eq（index）	$(“li:eq(2)”).css(“color”, ”red”);	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$(“li:odd”).css(“color”, ”red”);	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”).css(“color”, ”red”);	获取到的li元素中，选择索引号为偶数的元素

总结：这类选择器都带冒号。

筛选选择器（方法）

	用法	说明
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”)，子类选择器
find(selector)	$(“ul”).find(“li”);	相当于$(“ul li”),后代选择器
siblings(selector)	$(“#first”).siblings(“li”);	查找兄弟节点，不包括自己本身。
parent()	$(“#first”).parent();	查找父亲
eq(index)	$(“li”).eq(2);	相当于$(“li:eq(2)”),index从0开始
next()	$(“li”).next()	找下一个兄弟
prev()	$(“li”).prev()	找上一次兄弟
Index()	$(“li”).index()	获取当前的位置（索引）
not()	$("p").not(".intro")	返回不带有类名 "intro" 的所有 <p> 元素

总结：筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

五、jQuery事件

什么是事件
1. 页面对不同访问者的响应叫做事件。
2. 实例：在元素上移动鼠标、选取单选按钮、点击元素

事件语法

单击事件

$("p").click(function(){ 
// 动作触发后执行的代码!! 
});

双击事件

$("p").dblclick(function(){
 	$(this).hide(); 
})

鼠标进入

$("#p1").mouseenter(function(){ 
alert('您的鼠标移到了 id="p1" 的元素上!'); 
});

鼠标离开

$("#p1").mouseleave(function(){ 
alert("再见，您的鼠标离开了该段落。"); 
});

获取焦点

$("input").focus(function(){ 
$(this).css("background-color","#cccccc"); 
});

失去焦点

$("input").blur(function(){ 
$(this).css("background-color","#ffffff"); 
});

Cenobite961

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫