Jquery操作Dom.docx
- 文档编号:7845409
- 上传时间:2023-01-26
- 格式:DOCX
- 页数:13
- 大小:20.03KB
Jquery操作Dom.docx
《Jquery操作Dom.docx》由会员分享,可在线阅读,更多相关《Jquery操作Dom.docx(13页珍藏版)》请在冰豆网上搜索。
Jquery操作Dom
1DOM对象
通过JavaScript方法访问DOM的元素,可以生成DOM对象。
例如:
varobj=document.getElementById("content");
使用JavaScript中的getElementById()方法,在文档中选择id=“content”的匹配元素,最后将生成的DOM对象储存在obj变量中。
2jQuery对象
使用jQuery选择器选择页面元素,是为了生成jQuery对象。
代码如下:
varobj=$("#content");
jQuery对象具有特有的方法和属性,完全能够实现传统DOM对象的所有功能。
在jQuery对象上使用html()方法,以便获取或者设置元素内部的html代码内容。
代码如下:
varobj=$("#content");
obj.html("jQuery对象");
使用jQuery分析上面的两行代码,需要分为两个步骤:
第一步是获取指向某元素的jQuery对象,第二步是使用jQuery对象的方法来操作该元素,以达到更改html网页内容和样式的目的。
其中,第一个步骤即获取需要的jQuery对象,在第七章中已经详细讲解过,这里不作讲解。
本章主要讲述使用jQuery的第二个步骤,即操作获得的jQuery对象。
3jQuery对象和DOM对象的相互转换
(1)jQuery对象转换成DOM对象
将jQuery对象转换成DOM对象,可以使用get()方法,其语法结构为get([index])
jQuery对象是一个可以匹配多个元素的集合。
如果get()方法不带参数,get()方法会返回所有匹配元素的DOM对象,并将它们包含在一个数组中。
(2)DOM对象转换成jQuery对象
对于一个DOM对象,只需要用$()将它包装起来,就可以获得对应的jQuery对象,其语法结构为$(DOM对象)。
设置DOM对象的style属性,实现了当单击标题时,标题的文本颜色变成红色的功能。
$(function(){
$("h3").click(function(){
this.style.color="red";//DOM对象
});
});
利用jQuery对象的css()方法,实现了当单击标题时,标题的文本颜色变成红色的功能。
DOCTYPEhtml>
$(function(){
$("h3").click(function(){
$(this).css("color","red");//jQuery对象
});
});
全部商品分类
2元素样式操作
(1)直接设置元素样式值
设置单个属性:
jQuery对象.css(name,value),其中name为样式名称,value为样式的值。
同时设置多个属性:
jQuery对象css({name:
value,name:
value,name:
value…})
创建了一个p标签,单击该标签时,其中的文字将会加粗、变成斜体,并增加背景色。
$(function(){
$("#content").click(function(){
$(this).css("font-weight","bold");
$(this).css("font-style","italic");
$(this).css("background-color","#eee");
});
});
(2)增加css类
jQuery对象.addClass(class);
其中,参数class为在css中定义的类的名称,也可以增加多个类别的名称,只需要用空格将类名隔开即可,其语法格式为:
jQuery对象.addClass(class0class1…)
通过调用jQuery对象的addClass(class)方法。
DOCTYPEhtml>
.cls1{
font-weight:
bold;
font-style:
italic;
background-color:
#eee;
}
$(function(){
$("#content").click(function(){
$(this).addClass("cls1");
});
});
全部商品分类
(3)删除类别
jQuery对象.removeClass(class);
其中,参数class为在css中定义的类的名称,也可以增加多个类别的名称,只需要用空格将类名隔开即可,其语法格式为:
jQuery对象.removeClass(class0class1…)
单击按钮后,删除
标签增加的类样式。
DOCTYPEhtml>
.cls1{
font-weight:
bold;
font-style:
italic;
background-color:
#eee;
}
$(function(){
$("#content").click(function(){
$(this).addClass("cls1");
});
$("#btn").click(function(){
$("#content").removeClass("cls1");
});
});
类别切换
–通过toggleClass()方法切换不同的元素类别。
•toggleClass(class)
•其中参数class为类别名称,其功能是当元素含有名称为class的css类别时,删除该类别,否则增加一个该名称的css类别。
单击
标签,实现了
标签增加类样式和删除类样式的切换。
DOCTYPEhtml>
.cls1{
font-weight:
bold;
font-style:
italic;
background-color:
#eee;
}
$(function(){$("#content").click(function(){$(this).toggleClass("cls1");});});
3元素内容及value属性值操作
–
(1)设置或获取元素的内容
语法格式
参数说明
功能描述
html()
无参数
用于获取第一个匹配元素的html内容或文本内容
html(content)
content参数为元素的html内容
用于设置所有匹配元素的html内容或文本内容
text()
无参数
用于获取所有匹配元素的文本内容
text(content)
content参数为元素的文本内容
用于设置所有匹配元素的文本内容
单击按钮,在
标签中增加图像即标签。
DOCTYPEhtml>
$(function(){
$("input[type='button']").click(function(){
$("p").html("
});
});
(2)获取或设置元素值
在jQuery中,如果要获取元素的值,那么需要通过val()方法来实现。
其语法格式如下:
jQuery对象.val([val])
其中,如果不带参数val,则是获取某元素的值;反之,则是将参数val赋给某元素,即设置元素的值。
登录框水印特效。
当文本框获得焦点时,文本框默认文字消失,失去焦点且用户没有输入内容时,文本框内的提示文字会再次出现。
......
$(function(){
$("#userEmail").focus(function(){//输入邮箱的文本框获得焦点
vartxt_value=$(this).val();//得到当前文本框的值
if(txt_value=="hj@"){
$(this).val("");//如果符合条件,则清空文本框内容
}
});
$("#userEmail").blur(function(){//文本框失去鼠标焦点
vartxt_value=$(this).val();//得到当前文本框的值
if(txt_value==""){
$(this).val("hj@");//如果符合条件,则设置内容
}
});
});
四元素属性操作
(1)获取元素的属性
jQuery对象.attr(name);
其中,参数name表示属性的名称
元素属性操作
(2)设置元素的属性
在页面中,attr()方法不仅可以获取元素属性值,还可以设置元素的属性,其设置属性的语法格式如下所示:
jQuery对象.attr(name,value);
其中,参数name表示属性的名称,value表示属性的值。
如果要设置多个属性,也可以通过arrt()方法实现,其语法格式如下所示:
jQuery对象.arrt({name0:
value0,name1:
value1…});
•创建一个标签。
当页面加载完毕后,随机展示图片。
$(function(){
varimgs=newArray();
imgs[0]="images/flower1.jpg";
imgs[1]="images/flower2.jpg";
imgs[2]="images/flower3.jpg";
imgs[3]="images/flower4.jpg";
$("img").attr("src",function(){
vari=Math.ceil(Math.random()*3);
returnimgs[i];
});
});
5创建节点元素
函数$()用于动态创建页面元素,其语法格式如下
$(html);
其中,参数html表示用于动态创建DOM元素的html标签字符串。
插入节点
–
(1)元素内部插入子节点
语法格式
功能描述
append(content)
$(A).append(B)表示将B追加到A中,如:
$("ul").append($li);
appendTo(content)
$(A).appendTo(B)表示把A追加到B中,如:
$li.appendTo("ul")
prepend(content)
$(A).prepend(B)表示将B前置插入到A中,如:
$("ul").prepend($li)
prependTo(content)
$(A).prependTo(B)表示将A前置插入到B中,如:
$li.prependTo("ul")
要求在文本框中输入最近流行的歌曲名和歌手后,将其添加到列表的最前面。
DOCTYPEhtml>
$(function(){$("#song").blur(function(){var$li=$("
- 想起
- 没那么简单
- 指望
(2)元素外部插入同辈节点
元素外部插入同辈节点的方法见下表
语法格式
功能描述
after(content)
$(A).after(B)表示将B插入到A之后,如:
$("ul").after($div);
insertAfter(content)
$(A).insertAfter(B)表示将A插入到B之后,如:
$div.insertAfter("ul")
before(content)
$(A).before(B)表示将B插入至A之前,如:
$("ul").before($div)
insertBefore(content)
$(A).insertBefore(B)表示将A插入到B之前,如:
$div.insertBefore("ul")
单击页面的“流行歌曲”标题,自动添加歌曲列表项。
$(function(){$("h3").click(function(){var$ul=$("
替换节点
在jQuery中,如果要替换元素中的节点,那么可以使用replaceWith()和replaceAll()这两种方法。
其语法格式分别如下:
jQuery对象.replaceWith(content);
该方法的功能是将所有选择的元素替换成指定的html元素,其中参数content为将替换所选择元素的内容。
jQuery对象.replaceAll(selector);
该方法的功能是将所有选择的元素替换成指定selector的元素,其中参数selector为需要被替换的元素。
单击“替换”按钮把歌曲列表中的最后一首流行歌曲替换成“也许明天”。
DOCTYPEhtml>
$(function(){$("input[type='button']").click(function(){var$li=$("
last").replaceWith($li);});});
- 想起
- 没那么简单
- 指望
replaceWith()是用括号中的内容替换所选择的元素,replaceAll()是把括号中所指定的元素替换掉。
两者的关系类似于append()和appendTo()的关系。
复制节点
在页面中,有时候需要复制某个元素节点。
在jQuery中,通常可以通过方法clone()轻松实现这一功能,该方法的语法格式为:
jQuery对象.clone();
其功能是复制选择的html元素,该方法只是复制元素本身,被复制后的新元素不具有任何元素行为。
插入一幅图片,当单击此图片时,将其复制并在其右侧粘贴。
$(function(){
$("img").click(function(){
$(this).clone(true).appendTo("#p1");
});
});
......
删除节点
–在操作页面时,删除多余的或是指定的页面元素是非常必要的,jQuery中提供了remove()方法来删除元素,remove()方法的语法格式如下:
remove([expr]);
其中参数expr为可选项,如果接受参数,则该参数为筛选元素的jQuery表达式,通过该表达式将获取指定的元素,并进行删除。
在页面插入无序列表和按钮,单击按钮时,将无序列表最后一项删除。
DOCTYPEhtml>
$(function(){
$("input[type='button']").click(function(){
//$("ulli").remove();//删除所有的列表项
$("ulli").remove("ulli:
eq
(2)");
});
});
- 想起
- 没那么简单
- 指望
6遍历元素
在元素操作中,有时候需要对多个元素进行统一操作。
在传统的JavaScript中,通过先获取数组的总长度,然后以for循环语句,循环访问每个元素,其代码相对复杂;而在jQuery中,可以直接使用each()方法实现元素的遍历。
其语法格式如下:
插入两幅图片,单击“添加边框”的按钮后,给两幅图片添加边框并设置其title属性。
$(function(){
$("input[type='button']").click(function(){
$("img").each(function(index){
//$(this).css("border","1pxsolid#f00");
//$(this).attr("title","第"+(index+1)+"幅风景画");jQuery对象
this.style.border="1pxsolid#f00";//this:
DOM对象
this.title="第"+(index+1)+"幅风景";
});
});
});
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Jquery 操作 Dom