第1章-jquery选择器_oracle数据库

视频

1. 面试题

1.1 jQuery的美元符号$有什么作用？

1.2 body中的onload()函数和jQuery中的document.ready()有什么区别？

1.3 jQuery中有哪几种类型的选择器？

2. 上次内容回顾

2.1 json概念：什么是json

Json(javascript Object notation)js的对象表示法，是一种轻量级的数据交互格式，语法格式：'{"name1":value1,"name2":value2}'

数据由逗号分隔

大括号保存对象

中括号保存数组

2.2 json数据解析

JSON.parse(str)方法，将json格式的字符串转为js对象

JSON.stringify(obj)方法，将js对象转为json格式的字符串；

3.本章内容

3.1 jquery的使用方式

3.2 jquery选择器

3.2 jquery常见选择器的应用

4. 具体内容

4.1 jquery简介

认识jQuery：

jQuery的字面意思其实就是JavaScript和查询（Query），即用于辅助开发JavaScript的库。jQuery是继prototype之后的又一个优质的Javascript库，属于开源编程语言。JQuery就是JavaScript的数组包装，

如果您想要更快、更系统地学会jQuery，您好采用边学边练（jQuery微课）的学习模式。

学完本教程，进行实战练习才有效果哦：jQuery实战

Query使用户可以更加方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，而且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详尽，同时还有很多成熟的插件可供选择。jQuery可以使用户的html页面保持代码和html的内容分离，也就是说，不需要再在html里面插入一堆js来调用命令了，只需要定义id即可。

jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此之外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

2006年1月，jQuery第一个版本发布，它以简洁、灵活的编程风格让人一见倾心。

jQuery发展至今，更新了十几个新版本，w3cschool为您整理了《各版本JQuery.js合集》供您参考、下载使用。

jQuery已然成为当前非常流行的一个JavaScript框架，并且拥有很好的可扩展性，jQuery可以使您的工作变得更加简单。

jQuery的缺点：

1、不能向后兼容。每一个新版本不能兼容早期的版本。

2、插件兼容性不是太好，与上一点类似。

3、在同一页面上使用多个插件时，很容易碰到冲突现象，尤其是这些插件依赖相同事件或selector时为明显。

4、在大型框架中，jQuery核心代码库对动画和特效的支持相对较差。但是实际上这不是一个问题。目前在这方面有一个单独的jQuery UI项目和众多插件来弥补此点。

jquery源码框架图：

分析：

1.入口模块 jQuery的入口模块，主要是创建jQuery对象。这块其实是比较绕的，涉及到JS 原型的概念。

2.底层模块 jQuery的底层模块主要包括一些工具方法，以及比较底层的，用的比较多的函数方法。比如onConflict(),isArray(),isFunction(),makkeArray()等等，建议大家可以看看jQuery API手册。

3.功能模块

这块应该是我们平时用jQuery库用的比较多的方法。比如aJax请求，动画，事件处理，样式设置与获取，属性设置与获取等等，这些方法都依赖于底层模块的工具方法和浏览器功能测试，主要用于浏览器检测，解决浏览器兼容问题。同时，功能模块不同的方法也依赖于底层模块的各个不同方法。

4.2 jquery使用方式

1.通过访问。

(注！jquery-2.0以上版本不再支持IE 6/7/8) 并不是新的版本就好的，而是根据您项目需求所适合的版本！以下讲解我们使用1.8的版本

引入jquery：

4.3 jquery 语法

<body>

</body>

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

美元符号定义 jQuery选择符（selector）"查询"和"查找" HTML 元素jQuery 的 action() 执行对元素的操作

4.4 选择器

选择器示例示例说明 CSS

.class .intro 选择所有class="intro"的元素 1

#id #firstname 选择所有id="firstname"的元素 1

* * 选择所有元素 2

element p选择所有

element,element div,p

选择所有元素和

element element div p

选择元素内的所有

element>element div>p

选择所有父级是元素的

element+element div+p

选择所有紧接着元素之后的

[attribute] [target] 选择所有带有target属性元素 2

[attribute=value] [target=_blank] 选择所有使用target="_blank"的元素 2

[attribute~=value] [title~=flower] 选择标题属性包含单词"flower"的所有元素 2

[attribute|=language] [lang|=en] 选择一个lang属性的起始值="EN"的所有元素 2

:link a:link 选择所有未访问链接 1

:visited a:visited 选择所有访问过的链接 1

:active a:active 选择活动链接 1

:hover a:hover 选择鼠标在链接上面时 1

:focus input:focus 选择具有焦点的输入元素 2

::first-letter p::first-letter选择每一个

元素

元素的第一个字母

选择器示例示例说明 CSS

::first-line p::first-line选择每一个

::first-child p::first-child指定只有当

::before p::before在每个

::after p::after在每个

::lang(language) p:lang(it)选择一个lang属性的起始值="it"的所有

element1~element2 p~ul选择

[attribute^=value] a[src^="

[attribute$=value] a[src$=".pdf"] 选择每一个src属性的值以".pdf"结尾的元素 3

[attribute**=value*] a[src*="44lan"] 选择每一个src属性的值包含子字符串"44lan"的元素 3

:first-of-type p:first-of-type

选择每个

:last-of-type p:last-of-type

选择每个

:only-of-type p:only-of-type

选择每个

:only-child p:only-child选择每个

元素的第一行

元素是其父级的第一个子级的样式。

元素之前插入内容

元素之后插入内容

元素

元素之后的每一个ul元素

元素是其父级的第一个

元素

元素是其父级的后一个

元素

元素是其父级的唯一

元素

元素是其父级的唯一子元素

选择器示例示例说明 CSS

:nth-child(n) p:nth-child(2)选择每个

:nth-last-child(n)p:nth-last-child(2)

选择每个

:nth-of-type(n) p:nth-of-type(2)

选择每个

:nth-last-of-type(n)p:nth-last-of-type(2)

选择每个

:last-child p:last-child选择每个

:root :root 选择文档的根元素 3

:empty p:empty选择每个没有任何子级的

:target #news:target选择当前活动的#news元素（包含该锚名称的点击的URL）

:enabled input:enabled 选择每一个已启用的输入元素 3

:disabled input:disabled 选择每一个禁用的输入元素 3

:checked input:checked 选择每个选中的输入元素 3

:not(selector) :not(p)选择每个并非

::selection ::selection 匹配元素中被用户选中或处于高亮状态的部分 3

:out-of-range :out-of-range匹配值在指定区间之外的

元素3

:in-range :in-range匹配值在指定区间之内的

元素3

元素是其父级的第二个子元素

元素的是其父级的第二个子元素，从后一个子项计数

元素是其父级的第二个

元素

元素的是其父级的第二个

元素，从后一个子项计数

元素是其父级的后一个子级。

元素（包括文本节点）

元素的元素

选择器示例示例说明 CSS

:read-write :read-write 用于匹配可读及可写的元素 3

:read-only :read-only 用于匹配设置 "readonly"（只读）属性的元素 3

:optional :optional 用于匹配可选的输入元素 3

:required :required 用于匹配设置了 "required" 属性的元素 3

:valid :valid 用于匹配输入值为合法的元素 3

:invalid :invalid 用于匹配输入值为非法的元素 3

:contains ( txt ) 匹配并获得包含txt文本的元素

:empty 匹配并获得没有子元素或者文本的元素

:has ( selector ) 匹配并获得包含有selector选择器的元素

内容选择器：

案例：

<!DOCTYPE html>

<html>

<head>

$(function(){

console.log($("div:contains('jQuery')").html());

console.log($("div:empty").size());

console.log($("div:has('#a')").html());

</script>

</head>

<body>

<div>I love jQuery</div>

<div>

<a href=";

</div>

</body>

</html>

名称说明

:first 获得匹配到的第一个元素

:last 获得匹配到的最后一个元素

:not ( selector ) 获得除了匹配的元素之外的元素

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

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

:eq ( index ) 匹配一个给定索引值的元素，从0开始计数

:gt ( index ) 匹配所有大于给定索引值的元素，从0开始计数

:lt ( index ) 匹配所有小于给定索引值的元素，从0开始计数

过滤选择器：

案例：

<!DOCTYPE html>

<html>

<head>

<style>

.odd{background: red;color: #ffffff;}

.even{background: blue;color: #fff;}

.gt{background: yellow;color: #fff;}

</style>

$(function(){

$("tr:odd").each(//获取偶数行 function() {

$(this).addClass("odd");

$("tr:even").each(//获取奇数行 function(){

$(this).addClass("even");

$("tr:gt(3)").each(//下标大于3的行 function(){

$(this).addClass("gt");

</script>

</head>

<body>

<tr>

<tr>

<tr>

<tr>

<tr>

<tr>

</table>

</body>

</html>

名称说明

:input 匹配并获得表单中所有input, textarea, select和button元素

:text 匹配并获得所有的文本框

:password 匹配并获得所有密码框

:radio 匹配并获得所有单选按钮

:checkbox 匹配并获得所有复选框

:submit 匹配并获得所有提交按钮

:image 匹配并获得所有图片

:reset 匹配并获得所有重置按钮

:button 匹配并获得所有按钮

:file 匹配并获得所有文件域

:hidden 匹配并获得所有隐藏域

名称说明

:enabled 匹配并获得所有正常使用的元素

:disabled 匹配并获得所有禁用的元素

:checked 匹配并获得所有被选中的复选框

:selected 匹配并获得下拉列表框的选中项

表单选择器：

表单属性选择器：

4.5 常用函数

层次选择器说明

$("ancestor descendant") 匹配并获取ancestor元素里的所有后代descendant元素

$("parent > child") 匹配并获取parent元素里的子元素

$("prev + next") 匹配并获取紧挨着prev元素后的next元素

$("prev ~ siblings") 匹配并获取prev元素后的所有siblings元素

选择器的演示用到常用的三个函数： val( )：用来获得或设置元素value属性的值 html( )：用来获得或设置元素标签内的所有信息，包括标签和文本，相当于DOM中的innerHTML size( )：用来获得集合/数组的长度

4.6 层次选择器

层次选择器层次选择器是通过DOM对象之间的层次关系来获取并匹配元素的，例如后代元素、子元素、相邻元素等

4.7 文档就绪事件

以前我们用javascript时文档执行顺序是从上到下依次执行的，我们能不能在执行完html之后再执行我们的js呢，利用jquery我们可以实现这种方式，以后我们的js代码就可以放在任意的位置了。这是为了防止文档在完全加载（就绪）之前运行 jQuery(js) 代码。

如果在文档没有完全加载之前就运行函数，操作可能失败

第一种 document ready 函数中：

第二种简洁写法（与以上写法效果相同）:

4.8 jquery和dom的转换

jquery---->dom

jQuery提供了两种方式来实现jQuery对象转换成DOM对象，分别是[下标] 和get(索引)

$(document).ready(function(){

// 开始写 jQuery 代码...

$(function(){

// 开始写 jQuery 代码...

<html>

<head>

DOM---->jquery

对于一个DOM对象，只需要使 $() 把它包裹起来即可转换成jQuery对象，即 $(DOM)

<title>jquery=》dom</title> <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>

$(function(){

//将jquery对象转为dom，直接使用[0]或者get(0)方法 var btn=$("#btn");

//直接调用jquery中的方法 console.log(btn[0].value);

var div=$("#title");

console.log(div.get(0).innerHTML);

</script>

</head>

<body>

</body>

</html>

<html>

<head>

<title>dom=》jquery</title> <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>

$(function(){

//将dom对象转为jquery，直接使用$()方法 var btn=$(document.getElementById("btn"));

//直接调用jquery中的方法 console.log(btn.val());

var div=$(document.getElementById("title"));

console.log(div.html());

</script>

</head>

<body>

</body>

总结：

JQuery就是JavaScript的数组包装,Jquery对象与DOM对象相互转换

1. 使用document对象的相关方法来获取HTML元素，这时获得的是DOM2. jQuery对象实际上是通过jQuery对DOM对象进行封装后产生的对象3. document.getElementById("btn")获得的是DOM对象，它不能调用jQuery中的html()和val()方法；4. $("#btn")获得的是jQuery对象，它不能调用DOM中的innerHTML和value属性。5. JQuery对象可以通过数组下标[index]和get(index)方法来获得DOM对象。

4.9 案例总结

案例4.8.1：函数、选择器测试：

</html>

<!DOCTYPE html>

<html>

<head>

<title>导入jquery库</title> <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>

$(function(){

console.log($("#btn").val());//获取id=btn标签的value属性值 console.log($("a").size());//获取a标签的数量 console.log($(".txt").size());//获取类名为'txt'的标签数量 console.log($("#title").html());//获取id为title的标签体 console.log($("#title").text());//获取id为title的标签内容 })

</script>

</head>

<body>

<div id="title"><h3>示例2.1</h3></div> <a href=";

</body>

</html>

效果：

4.10 each()方法的使用

在js中我们使用循环遍历的方式是for循环或者while循环，但是如果是通过jquery选择中遍历dom对象，同时对对象的操作不是很方便，jquery库为我们考虑到了这个事情，在jquery中each方法很方便的解决了这个问题

下面我们通过案例来看一个each的用法

案例4.10.1 ：淘宝导航条的制作，使用jquery将是非常方便的事情

<!DOCTYPE html>

<html>

<head>

<style>

*{margin: 0;padding: 0;}

ul{list-style: none;cursor: pointer;}

.nav li {padding: 10px 15px;float: left;color: orangered;

.nav .selected {

background:red;

color: white;

font-weight: bolder;

border-radius: 10px 10px 0 0;

</style>

$(function(){

/*获取所有li标签并且循环遍历 */ $(".nav li").each(function(){

$(this).click(function(){

$(".selected").removeClass("selected");//找到类名selected并且删除 $(this).addClass("selected");//给自己添加类名 });

</script>

</head>

<body>

</body>

</html>

效果：

案例：提交之前判断所有的表单内容不能为空

<!DOCTYPE html>

<html>

<head>

$(function(){

$("#btn").click(function(){

$("input").each(function(){

if($(this).val()==""){

alert("所有内容不能为空"); return false;

</script>

</head>

<body>

<form>

用户名:<input type="text" name="username" id="username"/><br> 邮箱:<input type="text"/><br> 密码:<input type="password" name="username" id="username"/><br> <input type="submit" id="btn" value="登录"/> </form>

</body>

</html>

效果：

5. 本章总结

5.1 jquery的使用方式

首先导入jquery库，使用选择器查找目的标签，操作标签

3.2 jquery选择器

大致可以分为基本选择器，层次选择器、过滤选择器

3.2 jquery常见选择器的应用

6. 面试题答案

6.1 jQuery的美元符号$有什么作用？

回答：其实美元符号$只是"jQuery"的别名，它是jQuery的选择器，如下代码：

$(document).ready(function(){

当然你也可以用jQuery来代替$，如下代码：

jQuery(document).ready(function(){

jQuery中就是通过这个美元符号来实现各种灵活的DOM元素选择的，例如$("#main")即选中id为main的元素。

6.2 body中的onload()函数和jQuery中的document.ready()有什么区别？

回答：onload()和document.ready()的区别有以下两点：

1、我们可以在页面中使用多个document.ready()，但只能使用一次onload()。

2、document.ready()函数在页面DOM元素加载完以后就会被调用，而onload()函数则要在所有的关联资源（包括图像、音频）加载完毕后才会调用。

6.3 jQuery中有哪几种类型的选择器？

回答：从自己的认知角度来讲，可以有3种类型的选择器，如下：

大致分为：基本选择器，层次选择器，表单选择器基本选择器：id选择器，标签选择器，类选择器等层次选择器：如： $("form input") 选择所有的form元素中的input元素 $("#main > *") 选择id为main的所有子元素过滤选择器：如： $(tr:first")选择所有tr元素的第一个 $("tr:last")选择所有tr元素的后一个表单选择器：如：$(":input")选择所有的表单输入元素 $(":text")选择所有的text的input元素

7.作业练习

7.1 利用jquery实现判断表单内容有为空的不让提交

7.2 实现文档中所有的选择器的测试

8. 预习下一章内容

预习下一章jquery属性与事件

第1章-jquery选择器

1. 面试题2. 上次内容回顾3.本章内容4. 具体内容4.1 jquery简介4.2 jquery使用方式4.3 jquery 语法4.4 选择器4.5 常用函数4.6 层次选择器4.7 文档就绪事件4.8 jquery和dom的转换4.9 案例总结4.10 each()方法的使用5. 本章总结6. 面试题答案7.作业练习8. 预习下一章内容