Jquery:Jquery中的DOM操作<二>
由于昨天晚上回来的晚,写的有点匆忙,所以昨天的学习笔记中出现了多处错误的地方,幸好有各位园友帮忙指出,在这里谢过各位了!今天继续学习关于Jquery中DOM的操作,其实是昨天随笔的延续,求围观!!!
HTML示例代码如下:
<p title="选择你最喜欢的水果">你最喜欢的水果是?</p>
<ul>
<li title="苹果">苹果</li>
<li title="橘子">橘子</li>
<li title="菠萝">菠萝</li>
</ul>
5、替换节点
替换节点有两个方法:replaceWith()和replaceAll()。
replaceWith():将所有匹配的元素替换成指定的HTML或者DOM元素。
$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>")。
上面代码的效果是将示例中的<p>元素替换为指定的<strong>元素。
replaceAll()的作用与replaceWith()的作用相同,只是写法不同而已。
$("<strong>你最不喜欢的水果是?</strong>").replaceAll("p")。效果同上。
6、包裹节点
包裹节点的方法有三种:wrap()、wrapAll()、wrapInner()。
wrap()方法是在选中节点的外面包裹指定的标记,如果有多个相同的元素被选中,则每个元素单独包裹。
wrapAll()方法也实现了将选中元素包裹指定标记,但是它与wrap()方法的不同是:如果有多个元素被选中,它会在所有被选中的元素外面包裹一个指定标记。(注:如果被包裹的多个元素间有其它元素,其它元素会被放到包裹元素之后)。
wrapInner()方法与上面两种方法的不同是:它将选中元素的子元素用指定的标记包裹起来,包括文本节点。
7、属性操作
在Jquery中,用attr()方法来获取或设置属性,用removeAttr()方法来删除元素属性。
attr()方法中如果只有一个参数,则是获取元素的属性。
$("p").attr("title"),获取<p>元素的title属性。
attr()方法中如果有两个参数,则是为指定元素设置某个属性的值。
$("p").attr("title","your title"),将<p>元素的title属性的值设置为“your title”。
attr()方法还可以为指定元素设置多个属性的值。
$("p").attr({"title":"your title","name":"text"}),将<p>元素的title属性的值设置为"your title",name属性的值设置为“text”。
removeAttr():$("p").removeAttr("title"),删除<p>元素的title属性值。
8、样式操作
(1)、获取样式和设置样式也是用attr()方法来实现,用法与设置和获取title属性相同。
(2)、追加样式使用addClass()方法。如果在<head>标签下的<style>标签中用class类,即可使用addClass("className")来追加样式。追加样式时需要注意的是:在原有样式的基础上追加样式,如果前后两种样式中用相同的属性,则后者的属性覆盖前者的属性。
(3)、移除样式用removeClass()方法来实现,如果直接用removeClass()没有参数的话,则默认移除选中元素的所有样式;如果有一个参数,则移除指定的一个样式,如果括号中的一对引号有两个样式的名称,并且样式的名称以空格分隔开来的话,则移除这两个样式。
(4)、切换样式。在Jquery中有一个方法toggle(),这个方法我在第二章时就看到了,但忘记介绍了。toggle()方法实现了事件的切换,如果在toggle()存在多个事件,在触发toggle()后会轮流执行其中的事件。而切换样式的方法是toggleClass(),其中参数是一组样式的名称,执行时,如果已存在此样式,则移除样式,如果不存在,则添加该样式。
(5)、判断是否含有某个样式用方法hasClass(),其中的参数则为样式名,如果样式存在,则返回true,不存在返回false。这个方法其实是调用了is()方法来实现的,所以它等同于is(".className")。
9、设置和获取HTML、文本和值
html()方法等同于JavaScript中的innerHTML属性,它的功能是获取或设置某个元素中的HTML内容。
text()方法等同于JavaScript中的innerText属性,它的功能是获取或设置某个元素中的文本内容。
val()方法等同于JavaScript中的value属性,它的功能是获取或设置元素的值。
上面三个方法的用法相同,如果它们没有参数的时,则是获取值;如果有参数时,则是设置值。另外,JavaScript中的innerText不能在Firefox浏览器下运行,而Jquery则支持所有浏览器。
focus()方法相当于JavaScript中的onfocus()方法,作用是处理获得焦点时的事件。
blur()方法相当于JavaScript中的onblur()方法,作用是处理失去焦点时的事件。
10、遍历节点
children():获取选中元素的子元素的集合,不考虑其后代元素。
next():获取选中元素后面紧邻的同辈元素。
prev():获取选中元素前面紧邻的同辈元素。
siblings():获取选中元素前后的所有同辈元素。
closest():该方法用于取得最近的匹配元素,首先看选中元素是否匹配,若不匹配则向上检索父元素,直到找到匹配元素。如果没有匹配元素,则返回一个空Jquery对象。
parent():获取每一个选中元素的父元素。
parents():获取每一个选中元素的祖先元素。
好吧,今天就到此结束了。这一个多月来一直在加班,晚上回来的时候就九点半了,有时候会想,要不今天累了就不学习了,但是马上又想到如果今天不学习了,可能还会有下一个今天,还有下下一个今天,所以我还是坚持了下来,我相信我能一直坚持下去,我一定能成长为大神的!!!
各位,晚安!
Jquery:Jquery中的DOM操作<二>的更多相关文章
- 【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】
一.JQuery中的DOM操作. 什么是DOM:DOM是一中和浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM简称文档对象模型,是Document Oject Mode ...
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
- jQuery中的DOM操作<思维导图>
DOM是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口.使用该接口可以轻松地访问页面中所有的标准组件.简单来说,DOM解决了Netsc ...
- Jquery:jquery中的DOM操作<一>
之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:D ...
- jQuery中的DOM操作总结
jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...
- jQuery中的DOM操作《思维导图》
首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...
- 第三章(jQuery中的DOM操作)
3.1 DOM 操作分类 ①DOM Core 包括(getElementById() , getElementsByTagName() , getAttribute() , setAttribute( ...
- JavaWeb学习笔记——jquery中的dom操作
jquery中的dom操作 废话不说:直接上例子: 1.添加节点-html页面 Append:向每个匹配的元素内部追加内容. <body> <ul id="city& ...
- jQuery中的DOM操作——《锋利的JQuery》
jQuery封装了大量DOM操作的API,极大提高了操作DOM节点的效率. 1.查找节点 通过我们上一节介绍了JQuery选择器,可以非常轻松地查找节点元素.不过,这时得到的是jQuery对象,只能使 ...
- 锋利的jQuery ——jQuery中的DOM操作(三)
一.DOM的操作分类 1>DOM Core 2>HTML-DOM 3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery ...
随机推荐
- android 自定义view之 TypeArray
在定义view的时候,我们可以使用系统提供的属性,也可以自定义些额外的属性来设置自定义view的样式,这个时候,我们就需要TypeArray,字面意思就是Type 数组. 今天我们就讲讲如何自定义Vi ...
- 关于动态SQL中的NULL
declare v_sql ); v_c1 number; v_c2 number; begin v_c2 :; v_sql := 'begin '; v_sql := v_sql||'update ...
- 启动外部exe程序
Process myProcess = new Process();myProcess.StartInfo.FileName = pathName;myProcess.Start();其中的pathN ...
- [转]Windows与Linux系统下的库文件介绍
什么是库 库文件是一些预先编译好的函数的集合,那些函数都是按照可再使用的原则编写的.它们通常由一组互相关联的用来完成某项常见工作的函数构成,从本质上来说库是一种可执行代码的二进制形式,可以被操作系 ...
- spring的定时任务或者说自动任务
http://kevin19900306.iteye.com/blog/1397744 //这个是别人的博客 引入除spring.jar外的Quartz的jar包quartz-all-1.8. ...
- php基础之二 函数
一.语句:分支语句,循环语句 1.分支语句: 1.1 if $a = 7;if($a == 5){ echo "相等";}else{ echo "不相等";} ...
- iOS学习之数据请求
GET请求----同步连接 //GET请求 同步连接 - (void)handleSynchronize:(UIBarButtonItem *)item { //GET请求 //1.创建网址字符串; ...
- 怪胎:Android开发ImageView图片无法显示
今天碰到一个非常奇怪的问题: 在Android中ImageView无法显示加载的本地SDCard图片. 具体过程是:先调用本地照相机程序摄像,然后将拍摄的图片加载在ImageView中显示. publ ...
- zabbix报警把特定的应用集发送给developer
1.创建新的action 2.创建新的develop用户 3.需要删除组不然会给组里所有人发
- iOS 9之Advanced Touch Input(高级触摸输入)
金田 今天要讲的主题是iOS 9高级触摸输入,更准确地讲,是在iOS9上如何减少触摸输入到屏幕显示的延迟程度,此次将分 低延迟渲染(iOS9 渲染性能优化)和 触摸点方案改进 两个方面来介绍. 低延迟 ...