第一章 jQuery基础方法回顾
jQuery即JavaScript,它是一个.js文件(官网下载)。使用时须将jQuery库的声明写在HTML文档的head标签里。
章节内容:
1、选择DOM节点 2、延迟的JavaScript的执行 3、把CSS应用到元素上 4、选择一系列非标准的HTML元素 5、计数DOM节点和显示其文本
6、快速创建DOM节点
1、选择DOM节点(常用)
(1)$(‘p’)——访问HTML页面文档中所有的段落元素;
(2)$(‘#A’)——访问HTML页面文档中id=A的元素;(id号唯一)
(3)$(‘.b’)——访问HTML页面文档中所有class = b的元素;
2、延迟的JavaScript的执行
HTML文档head部分中引用了JavaScript文件。一旦浏览器发现脚本行就会立即执行该JavaScript文件,但此时HTML页面文档还没有完全加载完(body部分未加载),此时需要用到延迟JavaScript代码的执行直到HTML页面加载完。(其实也可以将JavaScript放在body的尾部这样就不用延迟执行)
用来通知JavaScript代码DOM准备完毕的方法是$(document).ready()。在DOM记载完毕后,此方法执行函数调用(函数作为它的参数)。
$(document).ready(function(){
})
函数体在DOM加载完后被调用,函数体被作为参数表示不希望该函数被第二次执行,即只执行一次。相当于$(document).ready()给文档注册了一个ready(就绪)事件。在JavaScript就是window.onload=function()一样的意思。
3、把CSS应用到元素上
addClass()方法用于应用一个CSS类到网页的选中部分。它包含CSS类的名称作为方法的参数(注意参数打引号,作为字符传,而不是变量)。
一个CSS类:
.highlight{
font-style:italic;
background-color:#0f0;
}
应用CSS类的Jquery代码:
$(‘div’).addClass(‘highlight’);
$(‘body’).addClass(‘highlight’);
4、选择一系列非标准的HTML元素
(1)$(‘span:contains(Life)’)——选择包含单词Life的Span元素;
(2)$(‘div:odd’)——选择偶数div元素,从0开始计数。
(3)$(‘div:even’)——选择奇数div元素,从0开始计数。
(4)$(‘p:eq(1)’)——选择第二个段落元素,从0开始计数。
5、计数DOM节点和显示其文本
在DOM中,网页被表示为一个根节点(parent)和一些分支节点(children)的树结构形式,其中每一个HTML元素表示一个节点。
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ var $nodes = $('#parent').children(); alert("Number of nodes is" + $nodes.length); var txt = ""; $('#parent').children().each(function(){ txt += $(this).text(); }); alert(txt); }); </script> </head> <body> <div id="parent"> <div id="child1">child1</div> <div id="child2">child2</div> <div id="child3">child3</div> </div> |
以上代码访问HTML页面的id = parent的DIV元素的子节点,并将它的子节点存储在变量$nodes中,用alert显示子节点数组长度。然后用each()方法逐个访问其子节点(遍历数组$nodes),使用text()方法返回每个子节点的文本,并连接成一个字符串,最后用alert显示出来。
几个方法讲解:
①children()是遍历树的方法,它搜索指点元素的直接子节点,并返回一个新的jQuery对象。此方法仅在DOM树中向下遍历一层。
②each()方法用于循环访问包装集合中的每个元素。它包含一个迭代函数,在迭代函数中编写代码,应用于集合的每个单独元素。
③text()方法是jQuery对象的一个方法,用于访问指定元素的文本内容。
④parent()方法是遍历树的方法,用于搜索每个指定元素的直接亲元素(父元素),并返回一个新的jQuery对象。此方法仅在DOM树中向上遍历一层。
⑤html()方法从指定元素中的第一个元素获取HTML内容,以字符串的形式返回HTML内容,与text()方法不同,text()方法只返回文本。如HTML页面有一个段落元素:<p>我是段落元素<span>我是段落元素里的span元素</span></p>;
此时jQuery代码:$(‘p’).html();调用html方法,返回的是“我是段落元素<span>我是段落元素里的span元素</span>”
⑥text(text) ,html(html);即带参数的text()方法和html()方法可以用于改变DOM节点的内容。其中html(html)的参数html可以包含html标记;
6、快速创建DOM节点
这里列举三个创建DOM节点的方法:prepend()、prependTo()和clone()方法。(还有其他的一些方法,如:append()、appendTo()、before()、insertBefore()等)
HTML页面代码:
<body> <p>我是段落元素<span>我是段落元素里的span元素</span></p> <h2>我是一个h2元素</h2> </body> |
页面显示效果:
(1)predend()方法在指点元素前插入指定的内容,并返回一个jQuery对象。内容可以是文本、HMTL元素或jQuery对象。在段落元素之前插入一个h2元素,其文本为“我是插入元素”。加入jQuery代码:
$(‘p’).prepend(‘<h2>我是插入元素</h2>’);
页面显示效果:
(2)prependTo()方法在指定目标之前插入指定元素(和prepend方法类似,就是写法不同)。
实现上面功能的prependTo方法示例:$(‘<h2>我是插入元素</h2>’).prependTo(‘p’); 指定目标在后,插入元素在前;(用英语语法来理解)。:)
(3)clone()方法:为了快速添加DOM节点(该节点是已有元素的副本)时使用clone()方法。复制一个h2元素,在段落元素之前插入该段元素;
$(‘h2’).clone().prependTo(‘p’);
注意:如果使用prepend方法插入DOM元素,则插入内容和目标元素会被合并,这就是说如果把样式应用于段落元素,则该样式也会被应用于之前插入的h2元素。现在拿上面的HTML页面元素做验证;
编写一个CSS类:
.highlight{ background-color:#0f0; font-style:italic; } |
HTML页面代码如下:
<!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('p').prepend('<h2>我是插入元素</h2>'); //在段落元素前插入h2元素 $('p').addClass('highlight'); //为段落元素添加样式 }); </script> </head> <body> <p>我是段落元素<span>我是段落元素里的span元素</span></p> <h2>我是一个h2元素</h2> </body> </html> |
页面显示效果:
可见,样式也被应用于插入的h2元素。
第一章 jQuery基础方法回顾的更多相关文章
- 第一章 jQuery基础
第一章jQuery基础 一.jQuert简介 1.什么是jQuery jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装. jQuery是继Prototype ...
- 第一章jQuery基础
一.jQuert简介 1.什么是jQuery jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装. jQuery是继Prototype之后又一个优秀的java ...
- jQuery系列 第一章 jQuery框架简单介绍
第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...
- web前端学习python之第一章_基础语法(一)
web前端学习python之第一章_基础语法(一) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...
- 第一章 –– Java基础语法
第一章 –– Java基础语法 span::selection, .CodeMirror-line > span > span::selection { background: #d7d4 ...
- 《零成本实现Web自动化测试--基于Selenium》第一章 自动化测试基础
第一篇 Selenium 和WebDriver工具篇 第一章 自动化测试基础 1.1 初识自动化测试 自动化测试有两种常见方式 1.1.1 代码驱动测试,又叫测试驱动开发(TDD) 1.1.2 ...
- [Python笔记][第一章Python基础]
2016/1/27学习内容 第一章 Python基础 Python内置函数 见Python内置函数.md del命令 显式删除操作,列表中也可以使用. 基本输入输出 input() 读入进来永远是字符 ...
- web前端学习python之第一章_基础语法(二)
web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...
- UNIX环境高级编程--第一章 UNIX基础知识
第一章 UNIX基础知识 1.2 UNIX体系结构 从严格意义上说,可将操作系统定义为一种软件,它控制计算机硬件资源,提供程序运行环境.我们将这种软件称为内核(kernel),因为 它相对较小,且 ...
随机推荐
- Linux 命令 创建文件
1.vi vi 1.txt 会直接创建并打开一个文件1.txt 2.touch touch的作用是更改一个文件或目录的时间.touch 2.txt 如果2.txt不存在,则创建空文件2.txt 3.e ...
- JMeter 聚合报告之 90% Line 参数说明
其实要说明这个参数的含义非常简单,可能你早就知道他的含义,但我对这个参数一直有误解,而且还一直以为是"真理",原于一次面试,被问到了这个问题,所以引起我这个参数的重新认识. 先说说 ...
- PHP常用函数大全
usleep() 函数延迟代码执行若干微秒.unpack() 函数从二进制字符串对数据进行解包.uniqid() 函数基于以微秒计的当前时间,生成一个唯一的 ID.time_sleep_until() ...
- MongoDB快速学习笔记
一,下载. XP系统,32位的下载地址: https://www.mongodb.org/dl/win32/i386 例:win32/mongodb-win32-i386-2.0.7.ziphttp: ...
- 广东地区电信官方DNS服务器
以下是广东地区电信官方DNS服务器,简单记录,以备后用! 主解析服务器: 202.96.128.143 202.96.128.68 202.105.80.210 缓存服务器(亦可作DNS解析之用) c ...
- java 中 ArrayList LinkedList Vector 三者的异同点
1.ArrayList和Vector都是基于数组实现的,所以查询速度很快,增加和删除(非最后一个节点)速度慢: Vector是线程安全的,ArrayList不是. 2.LinkedList 是一个双向 ...
- sqlserver 查看正在执行sql
SELECT [session_id], [request_id], [cpu_time], [start_time] AS '开始时间', [status] AS '状态', [co ...
- Spring boot配置文件 application.properties
http://www.tuicool.com/articles/veUjQba 本文记录Spring Boot application.propertis配置文件的相关通用属性 # ========= ...
- Jquery / js 判断数据类型方法(限制文本框类型输入)
当想要判断文本框中的值是否为自己想要的类型时,可以通过一些方法作出判断,这里对于光标离开文本框时判断文本框中输入的是否是数值类型,如果不是,做出提示 $("#WORKYEARS") ...
- C#Matlab混合编程类 初始化问题解决方法
************** 异常文本 ************** System.TypeInitializationException: “myPlus.matClass”的类型初始值设定项引发异 ...