JQuery入门(4)

一、元素属性操作
在jQuery中,可以对元素的属性执行获取、设置、删除的操作,通过attr()方法可以对元素属性执行获取和设置操作,removeAttr()方法可以删除某一指定的属性。
1.获取元素的属性
语法:attr(name)
参数name表示属性的名称
2.设置元素的属性
单个属性设置语法:attr(key,value)
多个属性设置语法:attr({key0:value0,key1:value1})
3.删除元素的属性
语法:removeAttr(name)
我们将通过下面示例讲解上述语法:
示例如下:
(1)描述
使用attr()方法设置、获取、删除a标记中href属性。
(2)代码实现

<script type="text/javascript">
$(function(){
    $("#a1").attr("href","http://www.baidu.com");//设置a标记中的href属性
    var $url = $("#a1").attr("href");//获取a标记中的href属性
    $("#tip").html($url);
})
$(function(){//删除a标记中的href属性
    $("#a1").removeAttr("href");
})
</script>
...省略代码
<h3>attr()方法设置元素属性</h3>
<a data="http://www.hubwiz.com" id="a1">点我就变</a>
<div>改变后的地址:<span id="tip"></span></div>

二、元素内容操作

<script type="text/javascript">
$(function(){ //增加表单中所有属性为可用的元素类别
    var $strHtml = $("#divShow").html();//获取HTML内容
    var $strText = $("#divShow").text();//获取文本内容
    $("#divHtml").html($strHtml);//设置HTML内容
    $("#divText").text($strText);//设置文本内容
})
</script>
...省略代码
<div id="divShow"><b><i>hello</i></b></div>
<div id="divHtml"></div>
<div id="divText"></div>

三、向元素中追加内容
如果在页面中增加某个元素,只需要找到元素的上级节点,然后通过append()向指定的元素中追加内容或者通过appendTo()把内容追加到指定元素内。
如果是在元素前后插入内容,使用before()和after()方法可以在元素的前后插入内容,它们分别表示在整个元素的前面和后面插入指定的元素或内容。参数html用于找到需要追加内容的元素字符串,参数content是追加的内容,可以是字符、HTML元素标记还可以是一个返回字符串内容的函数。

<script type="text/javascript">
$(function(){ //增加表单中所有属性为可用的元素类别
    var $content = "<b>我是append()方法追加的内容</b>";
    var $contentTo = "<b>我是appendTo()方法追加的内容</b>";
    var $before = "<b>我是before()方法追加到前面的内容</b>";
    var $after = "<b>我是before()方法追加到后面的内容</b>";
    $("#id1").append($content);
    $($contentTo).appendTo("#id2");
    $("#id3").before($before);
    $("#id4").after($after);
})
</script>
...省略代码
<p id="id1">append()追加内容:</p>
<p id="id2">appendTo()追加内容:</p>
<p id="id3">before()追加到前面</p>
<p id="id4">after()追加到后面</p>

四、复制元素
想要复制元素,调用clone()方法可以生成一个被选元素的副本,即复制了一个被选元素,包含它的节点、文本和属性
语法形式:$(content).clone()
参数content可以HTML内容、HTML元素标记。
五、元素替换
在jQuery中想要替换元素或元素中的内容,replaceWith()和replaceAll()方法都可以但它们调用时,内容和被替换元素所在的位置不同

replaceWith()语法形式:$(selector).replaceWith(content)

replaceAll()语法形式:$(content).replaceAll(selector)

参数selector为被替换的元素,content为替换的内容。

六、包裹元素
在jQuery中使用wrap()和wrapInner()方法包裹元素和内容,但前者用于包裹元素本身,后者则用于包裹元素中的内容。

wrap()语法形式:$(selector).wrap(wrapper)

wrapInner()语法形式:$(selector).wrapInner(wrapper)

参数selector为被包裹的元素,wrapper参数为包裹元素的格式。
七、遍历元素
在DOM元素操作中,有时需要对同一标记的全部元素进行统一操作。在jQuery中,使用each()方法可以实现元素的遍历。

语法形式:$(selector).each(callback)

参数callback是一个function函数,该函数还可以接收一个行参index,这个形参为遍历元素的序号,序号从0开始;如果需要访问元素中的属性,可以借助形参index,配合this关键字来实现元素属性的设置或获取。
八、删除元素
在DOM元素操作中,jQuery为删除元素提供了两种方法:remove()和empty()。remove()-删除被选元素(及其子元素),empty()-从被选元素中删除子元素

时间: 2024-07-29 15:05:00

JQuery入门(4)的相关文章

jquery入门菜鸟的疑问

问题描述 jquery入门菜鸟的疑问 $(document).ready(function(){ alert("asdasdasd"); });这段代码没有生效,不只是否是js类库没有加载到 我是在myeclipse里做的,jquery-1.7.2.js是放在/WebRoot/WEB-INF/js/jquery-1.7.2.js jsp文件时放在/WebRoot/index.jsp 解决方案 解决方案二: 问题不清楚,不知道你是否引入了js

jquery入门教程

jQuery入门(1) 概述 jQuery入门(2) 基本语法 jQuery入门(3) Selectors jQuery入门(4) Events jQuery入门(5) 显示/隐藏内容 jQuery入门(6) 淡入淡出效果 jQuery入门(7) 滑动效果 jQuery入门(8) 动画效果 jQuery入门(9) 终止动画 jQuery入门(10) 回调函数 jQuery入门(11) 方法链 jQuery入门(12) HTML Get jQuery入门(13) HTML Set jQuery入门

jQuery入门[1]-构造函数

体积小(v1.2.315kb) 丰富的DOM选择器(CSS1-3+XPath) 跨浏览器(IE6,FF,Safari,Opera) 链式代码 强大的事件.样式支持 强大的AJAX功能 易于扩展,插件丰富 jQuery的构造函数接收四种类型的参数: jQuery(expression,context) jQuery(html) jQuery(elements) jQuery(fn) 第一种根据表达式(ID,DOM元素名,CSS表达式,XPath表达式)找出文档中的元素,并组装成一个 jQuery对

jQuery入门(13) HTML Set

上篇介绍HTML Get,jQuery其实使用上面同样的三个方法来赋值. text() – 设置或取得指 定元素的文本内容. html() – 设置或取得指定元素的内容(包括HTML标记) val() – 设置或 取得表单某个输入域的值. 比如下面代码就是使用上面三种方法给HTML元素或Form赋值 $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("

jQuery入门(12) HTML Get

jQuery库包含了很多用来改变和操作HTML元素及其属性的方法. 其中一个非常重要的部分就是 jQuery可以用来操作DOM. 本篇介绍使用jQuery来取得DOM节点元素的值或属性. 其中三个简单而 有用的方法如下: text() – 设置或取得指定元素的文本内容. html() – 设置或取得指定 元素的内容(包括HTML标记) val() – 设置或取得表单某个输入域的值. 例如,下面代码 使用html()和text()方法取得HTML元素的内容: $("#btn1").cli

jQuery入门(11) 方法链

jQuery支持将多个方法链接在一起,比如介绍的多个animation(),这个链接也可以应用到其它方法 ,构成一个方法链. 使用这个方法,对于同一个元素,链接多个方法,浏览器无需多次查找HTML元 素. 下面的方法,可以把css,slideUp,slideDown串接在一起: $("#p1") .css("color","red") .slideUp(2000) .slideDown(2000); 以上是小编为您精心准备的的内容,在的博客.问答

jQuery入门(5) 显示/隐藏内容

jQuery的hide()和show()可以用来显示和隐藏内容.比如下面的例子:jQuery的hide()和show()可 以用来显示和隐藏内容.比如下面的例子: <!doctype html> <html> <head> <meta charset="utf-8"> <title>JQuery Demo</title> <script src="scripts/jquery-1.9.1.js&qu

jQuery入门(4) Events

学习了jQuery的选择器,就可以针对选择的HMTL标记或是元素添加事件处理,事件包括按键,鼠标 ,单击按钮等. 下面为常见的DOM事件: 鼠标事件 键盘事件 表单事件 文档/窗口事 件 click keypress submit load dblc lick keydown change resize mouseenter key up focus scroll mouseleave   blur unload jQuery事件处理的语法 在jQuery中 ,大部分的DOM事件都有对应的jQu

jQuery入门(3) Selectors

jQuery Selector 是jQuery库中非常重要的一个组成部分. jQuery Selector 用来选择某个 HTML元素,其基本语句和CSS的选择器(Selector)是一样的,所有jQuery selector 都是以$()开始. 选择HTML标记 选择某个HTML元素的方法是直接使用该元素的标记名称,比如选择所有 <p>元素 $("p") 下面的例子当用户点击一个按钮时,隐藏所有的<p>元 素 $(document).ready(functio

jQuery入门(1) 概述

jQuery是一套跨浏览器的JavaScript函式库,简化HTML与JavaScript之间的操作,下面为摘自 Wikepedia上的jQuery说明: jQuery 是开源软件,使用MIT许可证授权.[4] jQuery的语法设计 使得许多操作变得容易,如操作文档对象(document).选择DOM元素.创建动画效果.处理事件.以 及开发Ajax程序.jQuery 也提供了给开发人员在其上创建插件的能力.这使开发人员可以对底层交互 与动画.高级效果和高级主题化的组件进行抽象化.模块化的方式使