简单入门JavaScript库jQuery:用选择符创建jQuery对象并应用方法

简单入门JavaScript库jQuery:用选择符创建jQuery对象并应用方法
2021年08月22日19:50:12 0 568

jQuery,顾名思义,也就是JavaScript和查询(Query),是一个辅助JavaScript开发的库。

jQuery 能极大地简化 JavaScript 编程。

目录
1 jQuery库包含的特性
2 jQuery与JS
3 获取页面元素
4 DOM事件与jQuery方法
5 简易操作DOM元素
6 处理尺寸
7 遍历操作
8 过滤操作
9 jQuery对JS的增强
10 为页面添加动态效果
11 jQuery与Ajax
12 jQuery工具

通过jQuery,您可以选取(查询,query) HTML元素,并对它们执行操作(actions)。

jQuery语法是为HTML元素的获取而设计的,可以对元素执行某些操作。
基础语法是:$(selector).action()
美元符号$在jQuery中是jQuery的缩写;
选择符(selector)查询和查找HTML 素,如:
$("#test").hide() - 隐藏所有 id="test" 的元素;

2005年,受该领域的先驱人物Dean Edwards和Simon Willison等人的启发,美国人John Resig编写了一套函数,利用这些函数能够以编程的方式快速查找网页中的元素,并为这些元素指定行为。(jQuery使用jquery()函数或$函数。)

jQuery在2006年1月由John Resig在纽约的barcamp发布。其中包含了DOM操作和基本的动画功能。他把这个项目命名为jQuery,意在强调其查找或查询网页元素,并通过JS操作这些元素的核心用途。

js库主要是为了包装和扩展js核心及BOM和DOM已有功能,为开发人员提供大量便捷的实用函数。

js库和框架致力于解决的问题,无非就是(跨浏览器)DOM操作、事件处理、样式更换、外部通信(Ajax)。但jQuery独特的集合对象、隐含迭代、方法连缀、自定义选择符和事件方法,加之不到20KB的轻巧,而很受青睐。

jQuery的大部分概念是从HTML和CSS的结构中借用而来的。

jQuery的特点在于其独特的编程方式,以DOM元素为核心,一点一点地给它们添加新功能(by centering on DOM Elements and tacking bits of functionality on top of them,jQuery made JavaScript fun again)。其特色在于其面向集合和方法连缀。也就是用CSS选择符创建jQuery对象(单个或对象集合),为这些对象创建丰富的方法(操作其中的DOM元素),而且让所有方法尽可能返回这个对象以实现方法连缀使用。

jQuery不仅支持各式各样的CSS选择符表达式,而且还支持XPath和自定义的选择符表达式,使开发者找到要操作的元素或集合简单得难以置信;它有细腻灵巧而富有弹性的事件处理机制,包括事件注册、触发和自定义以及hover()方法,处理Ajax请求和响应简洁明快、简单易用;以及超级方便的扩展机制,丰富的插件支持(Interface等),强大的社区支持,让其独树一帜。

JQuery的库很轻量级,压缩后只有几十K,在http://jquery.com/下载后引入或从公共库引用,如:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="includes/js/jquery-latest.min.js"></script>

在了解细节之前,先来看一个完整的小实例:

简单入门JavaScript库jQuery:用选择符创建jQuery对象并应用方法

 

以上是实例实现的效果是:获取id为p1的<p>标签对象,然后添加css以及动态的滑动效果。

1 jQuery 库包含的特性

HTML元素选取;
HTML元素操作;
CSS操作;
HTML事件函数;
JavaScript特效和动画;
HTMLDOM遍历和修改;
AJAX;

2 jQuery与JS

JQuery作为一个库,会在JS的基础上实现自己的一些语法。要理解JQuery,首先要理解JS,JS是一门基于对象的脚本语言,由内置于浏览器的JavaScript引擎解释执行。之所以说是基于对象,是因为JS是通过自身内建的对象和DOM对象模型所提供的对象和事件,对网页内容进行控制、对用户操作进行响应,从而实现网页的动态交互效果的;

当浏览器作为JS的执行环境时,浏览器就作为宿主环境提供了宿主对象(BOM);因为这些对象在浏览器加载网页时就存在,可以看成它们是一些宿主类的实例,只是这些实例无须使用new运算符显式地实例化。这些宿主对象也就是浏览器公开给JS的API,通过这些API,JS应用程序可以获取浏览器相关的信息,也可以修改浏览器的一些显示;

JS的核心在于通过DOM对象操作HTML页面中的各个节点元素或元素集合,动态修改HTML文档的内容,实现基于Web的应用。如同Word、Excel的先选定、后操作一样,JS对页面元素的操作也要先选择。JS对页面的选择包括有HTML标签元素、元素属性以及CSS选择器(ID与类选择器)。

3 获取页面元素

从jQuery的字面去理解,j代表javaScript,Query表示查询,jQuery很重要的功能就是实现对象(或叫文档元素、DOM元素、页面元素)的查询或获取,以实现对象的相应操作;Query 最有特色的语法特点就是与CSS 语法相似的选择器。

下面来看JS获取页面元素的语法:

简单入门JavaScript库jQuery:用选择符创建jQuery对象并应用方法

 

如:

var h = document.getElementById(tab).getElementsByTagName("h3");

jQuery 获取页面元素的语法就简便了,jQuery 中所有选择器都以美元符号开头:$(),如:

$("p")、$("#containor")、$(".quo")

括号内的参数可以是HTML标签元素,也可以是CSS的ID或class选择器及其它自定义选择器;

上面的JS语句用JQuery表示就是:

var h = $('#tab > h3');

jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。

3.1 元素选择器

jQuery 使用 CSS 选择器来选取 HTML元素。

$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。

3.2 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

3.3 CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

$("p").css("background-color","red");

简单入门JavaScript库jQuery:用选择符创建jQuery对象并应用方法

 

4 DOM 事件与jQuery方法

在JS中一切都是对象,JQuery也不例如,在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。

先选择(或确认)目标对象,后应用等效DOM事件的jQuery方法:

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

简单入门JavaScript库jQuery:用选择符创建jQuery对象并应用方法

 

5 简易操作DOM元素

选择器允许您对 HTML 元素组或单个元素进行操作。

在 HTML DOM 术语中:

选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

如修改页面外观、改变文档内容、应用动态效果等。

首先看一下JS相关的操作代码:

var parent = document.getElementById("parent");
var child0 = document.createElement("div");
child0.innerHTML = "child0";
child0.className = "newDiv";
parent.appendChild(child0);

5.1 设置或返回所选元素的内容或值

三个简单实用的用于 DOM 操作的 jQuery 方法:

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
 $("#test").text());
$("#test").html());
$("#test").val());

5.2 获取并设置 CSS 类

jQuery提供了跨浏览器的标准解决方案,且即使在页面已经呈现之后,jQuery仍然能够改变文档中某个部分的类或者个别的样式属性。

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
 
 $("#div1").addClass("important blue");
 $("h1,h2,p").removeClass("blue");
 $("h1,h2,p").toggleClass("blue");
$("p").css({"background-color":"yellow","font-size":"200%"});

5.3 添加新的 HTML 内容

$('#container').append('<a href="more.html">more</a>');

5.4 设置属性

jQuery attr() 方法也用于设置/改变属性值。

$("button").click(function(){
 $("#w3s").attr({
 "href" : "http://www.w3school.com.cn/jquery",
 "title" : "W3School jQuery Tutorial"
 });
});

5.5 删除元素/内容

remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素
$("#div1").remove();
$("#div1").empty();

6 处理尺寸

通过 jQuery,很容易处理元素和浏览器窗口的尺寸。

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
$("button").click(function(){
 var txt="";
 txt+="Width: " + $("#div1").width() + "</br>";
 txt+="Height: " + $("#div1").height();
 $("#div1").html(txt);
});

7 遍历操作

7.1 向上遍历 DOM 树

parent() 方法返回被选元素的直接父元素。
 $("span").parent();
parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
 $("span").parents();
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
 $("span").parentsUntil("div");

7.2 向下遍历

向下遍历 DOM 树,以查找元素的后代。

children() 方法返回被选元素的所有直接子元素。
 $("div").children();
find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
 $("div").find("span");
 $("div").find("*");

7.3 水平遍历

有许多有用的方法让我们在 DOM 树进行水平遍历:

 $("h2").siblings();
 $("h2").siblings("p");
 $("h2").next();
 $("h2").nextAll();
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
 $("h2").nextUntil("h6");
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)。

8 元素过滤

元素过滤可以缩小搜索元素的范围。

8.1 按位置过滤

first()、last() 和 eq()允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

 $("div p").first();
 $("div p").last();
 $("p").eq(1);

8.2 filter() 方法

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。

 $("p").filter(".intro");

8.3 not() 方法

not() 方法返回不匹配标准的所有元素。

 $("p").not(".intro");

9 jQuery对JS的增强

JS除于实现更简易操作DOM元素以外,还有其它方面的增强:

9.1 jQuery提供了对基本JavaScript结构的增强,比如元素迭代和数组处理等操作。

$.each(obj,function(key,value){
total += value
});

9.2 jQuery提供了各种页面事件,它可以避免程序员在HTML中添加太多事件处理代码,最重要的是,它的事件处理器消除了各种浏览器兼容性问题。

JS以浏览器为运行环境,代码由浏览器解释执行,所以不同的浏览器对一些JS的命令的支持是不一样。另外浏览器所提供的DOM方式也是有区别的。

10 为页面添加动态效果

jQuery内置了一些隐藏、显示、切换,滑动,淡入淡出,以及动画之类的效果,以及制作新效果的工作包。

$('div.details').slideDown();

11 jQuery与Ajax

无须刷新页面从服务器获取信息:也就是Ajax,是一系列在客户端和服务器之间传输数据强大技术。

$('div.details').load('more.html #content');

12 jQuery工具

$.each() 是更通用的循环方法,能够在对象和数组中循环;
($().each()专用于jQuery对象中的循环;)
$.map() 循环读取数组;
$.merge 合并两个数组;
$.unique 过滤重复的数组元素;
$.trim() 从字符串或者表单值中删除空格;
$().data() 将对象和数据附加到DOM中;

13 结束语

理解了上述内容以后,再来看JQuery语法就简单了,当然首先是要熟悉JS语法,然后再熟悉一下JQuery的选择器语法与等效DOM事件的jQuery方法,大部分的JQuery代码就能看懂了。

参考:http://www.w3school.com.cn/jquery/index.asp

附代码:

<!DOCTYPE html>
<html>
<head>
<script src="http://public.dabiaoge.me/common/js/jquery.min.js"></script>
<script>
$(document).ready(function()
 {
 $("button").click(function(){
 $("#p1").css("color","red").slideUp(2000).slideDown(2000);
 });
});
</script>
</head>
<body>
<p id="p0">1 Query html node.</p>
<p id="p1">2 applyint event emthod.</p>
<p id="p2">3 easy for Javascript coding.</p>
<button>chaining</button>
</body>
</html>

打赏 点赞(0)
weinxin
微信客服
问题+文章链接地址,发送到此微信:tourism52咨询处理。
历史上的今天
12月
06
javascript,语句 菜鸟教程

JavaScript语句

JavaScript语句JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。JavaScript 语句JavaScript 语句是发给浏览器的命令。这些命...
学习,笔记,html,基础 菜鸟教程

「学习笔记」HTML基础

「学习笔记」HTML基础前言    勤做笔记不仅可以让自己学的扎实,更重要的是可以让自己少走弯路。有人说:"再次翻开笔记是什么感觉",我的回...
十分钟,上手,前端,框架,Bootstrap,十分钟,上手, 菜鸟教程

十分钟上手前端UI框架Bootstrap

十分钟上手前端UI框架Bootstrap 引言 Bootstrap是一个简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。它把网站页面开发常用的一些样式、组件、特效集中在...

评论列表 共有 0 条评论

暂无评论