文档章节

精华帖

流川偑
 流川偑
发布于 09/16 00:34
字数 2374
阅读 19
收藏 0

第一章

jQuery简介

jQuery是一个JavaScript库

jQuery具备简洁的语法和跨平台的兼容性

简化了JavaScript的操作。

 

在页面中引入jQuery

jQuery是一个JavaScript脚本库,不需要特别的安装,只需要我们在页面 <head> 标签内中,通过 script 标签引入jQuery 库即可,可以使用以下两种方法: 引入本地jQuery库 从远程CDN中载入jQuery, 如从百度中加载jQuery     

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>环境搭建</title> <!--本地引入--> <script type="text/javascript" src="js/jquery.js"></script> <!--远程CDN引入--> <!-- <script src=”http://libs.baidu.com/jquery/1.9.1/jquery.min.js”></script>--> </head> <body> </body> </html>

 

 

 

 

jQuery 语法

jQuery语法是为HTML元素的选取编制的,可以对元素执行某些操作。 基础语法是:$(selector).action() 美元符号定义 jQuery 选择符(selector)“查询”和“查找” HTML 元素 jQuery 的 action() 执行对元素的操作

示例 $(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class="test" 的所有元素

$("#test").hide() - 隐藏所有 id="test" 的元素

 

 

 

 

 

jQuery文档就绪函数

 

window.onload

$(document).ready()

执行时机

必须等待网页全部加载完毕(包括图片等),然后再执行包裹代码

只需要等待网页中的DOM结构加载完毕,就能执行包裹的代码

执行次数

不能同时编写多个,只能执行一次,如果第二次,那么第一次的执行会被覆盖

window.onload = function(){

        alert(“test1”);

};

window.onload = function(){

        alert(“test2”);

};

结果只会输出”test2”

能同时编写多个

$(document).ready(function () {

        alert(“Hello World!”); 

});

$(document).ready(function () {

        alert(“Hello World!”); 

});

结果两次都输出

简写方案

$(document).ready(function()

{

    //代码内容

});

$().ready(function()

{

    //代码内容

});

$(function()

{

    //代码内容

});

 

 

 

 

 

 

 

 

jQuery对象与DOM对象的对比

通过jQuery方法包装后的对象,是一个数组对象,而DOM对象就是一个单独的DOM元素。它与DOM对象完全不同,唯一相似的是它们都能操作DOM;

jQuery对象是jQuery独有的,如果一个对象是jQuery对象,那么它就可以使用jQuery 里的方法: $(“#p1”).html();

jQuery对象无法使用DOM对象的任何方法, 同样DOM对象也不能使用jQuery里的任何方法;

约定:如果获取的是 jQuery 对象, 那么要在变量前面加上 $.      var $variable = jQuery 对象 var variable = DOM 对象

 

第二章

jQuery选择器是什么?

选择器是jQuery的根基,在jQuery中,对事件处理,遍历DOM和Ajax操作都依赖于选择器。如何能熟练地使用选择器,不仅能简化代码,而且可以达到事半功倍的效果。

学习jQuery选择器,必须了解CSS(Cascading Sytle Sheets,层叠样式表)技术。它使得网页的结构和表现样式完全分离。利用CSS选择器能轻松地对某个元素添加样式而不改动HTML结构,只需通过添加不同的CSS规则,就可以得到各种不同样式的网页。要使某个样式应用特定的HTML元素,首先要找到该元素,执行这一任务的表现规则称为CSS选择器。

 

CSS的选择器

常用CSS选择器如下表

选择器

语法

介绍

示例

类型选择器

Element

以文档语言对象类型作为选择器

div{color:blue}

所有div中的文字设置为蓝色

通配选择器

*

选定文档目录树(DOM)中的所有类型的单一对象

*{font-size:12px}

所有的文档中的文字设置为12px

ID选择器

#sID

以文档目录树(DOM)中作为对象的唯一标识符的ID作为选择

#username{border:1px solid black}

id为username的输入框设置为黑色单线边框

类选择器

El.className

在HTL中可以使用此种选择器

.button{background-color:gray}  所有带有class="gray"的元素背景都设置成灰色

群组选择器

E1,E2,E3

将同样的定义应用于多个选择器,可以将选择器以逗号分隔的方式并为组

.a,#b,div{font-size:9pt}

3个选择器能选中的元素字体都设置成9pt

包含选择器

E1 E2

选择所有被E1包含的E2。即E1.contains(E2)==true

.intro li{list-style:none}    带有class="intro"的元素下面的所有的li元素项目符号去掉

 

 

jQuery选择器

jQuery中的选择器完全继承CSS的风格。利用jQuery选择器,可以非常便捷和快速地找出特定的DOM元素,然后为他们添加相应的行为,而无需担心浏览器是否支持这一选择器。

 

jQuery选择器的优点:

简洁的写法:

完善的事件处理机制

 

内容过滤器 Content Filters

内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

名称

说明

举例

:contains(text)

匹配包含给定文本的元素

$("div:contains('John')")

查找所有包含 "John" 的 div 元素

:empty

匹配所有不包含子元素或者文本的空元素

$("td:empty")

查找所有不包含子元素或者文本的空元素

:has(selector)

匹配含有选择器所匹配的元素的元素

$("div:has(p)").addClass("test")

给所有包含 p 元素的 div 元素添加一个 text 类

:parent

匹配含有子元素或者文本的元素

$("td:parent")

查找所有含有子元素或者文本的 td 元素

 

可见性过滤器  Visibility Filters

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素

可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 (<input  type=“hidden”>)和 visible:hidden 之类的元素

名称

说明

举例

:hidden

匹配所有的不可见元素

注:在1.3.2版本中, hidden匹配自身或者父类在文档中不占用空间的元素.如果使用CSS visibility属性让其不显示但是占位,则不输入hidden.

$("tr:hidden")

查找所有不可见的 tr 元素

:visible

匹配所有的可见元素

$("tr:visible")

查找所有可见的 tr 元素

 

属性过滤器 Attribute Filters

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

名称

说明

举例

[attribute]

匹配包含给定属性的元素

$("div[id]")

查找所有含有 id 属性的 div 元素

[attribute=value]

匹配给定的属性是某个特定值的元素

$("input[name='newsletter']").attr("checked", true);

查找所有 name 属性是 newsletter 的 input 元素:

[attribute!=value]

匹配给定的属性是不包含某个特定值的元素

$("input[name!='newsletter']").attr("checked", true);

查找所有 name 属性不是 newsletter 的 input 元素

[attribute^=value]

匹配给定的属性是以某些值开始的元素

$("input[name^='news']")

查找所有name属性包含news开头的input元素

名称

说明

举例

[attribute$=value]

匹配给定的属性是以某些值结尾的元素

$("input[name$='letter']")

查找所有 name 以 'letter' 结尾的 input 元素 

[attribute*=value]

匹配给定的属性是以包含某些值的元素

$("input[name*='man']")

查找所有 name 包含 'man' 的 input 元素

[attributeFilter1]

[attributeFilter2]

[attributeFilterN]

复合属性选择器,需要同时满足多个条件时使用。

$("input[id][name$='man']")

找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的

 

子元素过滤选择器:

nth-child() 选择器详解如下:

(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素

(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素 (3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素

(3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素

 

 

表单对象属性过滤选择器 Form Filters 

名称

说明

举例

:enabled

匹配所有可用元素

$("input:enabled")

查找所有可用的input元素

:disabled

匹配所有不可用元素

$("input:disabled")

查找所有不可用的input元素

:checked

匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)

$("input:checked")

查找所有选中的复选框元素

:selected

匹配所有选中的option元素

$("select option:selected")

查找所有选中的选项元素:

 

 

 

基本选择器 Basics

基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 允许重复使用).

名称

说明

举例

#id

根据元素Id选择

$("divId") 

选择ID为divId的元素

element

根据元素的名称选择,

$("a") 

选择所有<a>元素

.class

根据元素的css类选择

$(".bgRed") 

选择所有CSS类为bgRed的元素

*

选择所有元素

$("*")

选择页面所有元素

selector1, selector2, selectorN

可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容.

$("#divId, a, .bgRed")

选择页面所有ID为divId的元素、所有<a>元素和所有CSS类为bgRed的元素

© 著作权归作者所有

上一篇: 精华帖02
下一篇: jQuery
流川偑
粉丝 0
博文 6
码字总数 14252
作品 0
广州
私信 提问
推荐两门机器学习和深度学习的课程 🤖

http://study.163.com/course/courseMain.htm?courseId=1003223001 李飞飞主讲的《深度学习与计算机视觉》,课件可以在 这里 下载。 https://www.coursera.org/learn/machine-learning/home...

Summer
2018/01/04
0
0
计划任务需实现的功能

店铺30天上新数量 社区帖子精华帖计算

顺风飘行
2015/10/15
3
1
Discuz7.2升级失败处理方法

在使用upgrade13.php文件进行升级时,总会在最后提示一个升级失败,其原因是因为升级采用的代码如下: #主题图章; DELETE FROM WHERE = 0 AND = 'stamp'; INSERT INTO (, , , , ) VALUES (0...

科技小能手
2017/11/12
0
0
app

app的功能点: 1.内容文章(陈敏把一些精华帖放到我们的app上) 2.文章分类 3.文章评论 4.文章推荐 5.文章用户编辑上传 6.用户登录注册。个人中心 7.广告 8.电商闪购形式,秒杀,团购等模式 ...

timzzx
2016/05/17
3
0
宇宙社会学:生存是文明的第一需要

宇宙社会学 叶文洁建议罗辑建立的学科,指在人类当前的科技水平和社会状况下,从两条不证自明的基本公理出发(一、生存是文明的第一需要。二、文明不断增长和扩张,但宇宙中的物质总量保持不...

lgn21st
2017/10/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

iOS Xcode升级包地址(感谢大神)

下载地址:DeviceSupport

_____1____
12分钟前
5
0
Qt编写自定义控件71-圆弧进度条

一、前言 现在web形式的图表框架非常流行,国产代表就是echart,本人用过几次,三个字屌爆了来形容,非常强大,而且易用性也非常棒,还是开源免费的,使用起来不要太爽,内置的各种图表和仪表...

飞扬青云
12分钟前
3
0
润乾报表与 ActiveReport JS 功能对比

简介 润乾报表是用于报表制作的大型企业级报表软件,核心特点在于开创性地提出了非线性报表数学模型,采用了革命性的多源关联分片、不规则分组、自由格间运算、行列对称等技术,使得复杂报表...

泡泡糖儿
24分钟前
4
0
【1015】LNMP架构二

【1015】LNMP架构二 三、PHP安装 PHP安装和LAMP安装PHP方法有差别,需要开启php-fpm服务 1、下载PHP7至/usr/local/src/ 切换目录:cd /usr/local/src 2、解压缩 tar -jxvf php-7.3.0.tar.gz...

飞翔的竹蜻蜓
58分钟前
5
0
浅谈Visitor访问者模式

一、前言 什么叫访问,如果大家学过数据结构,对于这点就很清晰了,遍历就是访问的一般形式,单独读取一个元素进行相应的处理也叫作访问,读取到想要查看的内容+对其进行处理就叫作访问,那么...

青衣霓裳
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部