四 JQuery操作DOM元素
1 使用attr()方法控制元素的属性
attr()方法的作用是设置或者返回元素的属性,
其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式是设置元素属性名的值
例如:
<body>
<h3>attr()方法设置元素属性</h3>
<a href="http://127.0.0.1" id="a1">点我就变</a>
<div>我改变后的地址是:<span id="tip"></span></div>
<script type="text/javascript">
$("#a1").attr("href" , "www.imooc.com");
var $url = $("#a1").attr("href");
$("#tip").html($url);
</script>
</body>
2 操作元素内容
使用html()和text()方法操作元素的内容,
当两个方法的参数为空时,表示获取该元素的内容,而如果方法中包含参数,则表示将参数值设置为元素内容。
例如:
<body>
<h3>html()和text()方法设置元素内容</h3>
<div id="html"></div>
<div id="text"></div>
<script type="text/javascript">
var $content = "<b>唉,我又变胖了!</b>";
$("#html").html('<strong>e</strong>');
$("#text").text('ee');
</script>
</body>
3 操作元素的样式
通过addClass()和css()方法可以方便地操作元素中的样式,
前者括号中的参数为增加元素的样式名称,后者直接将样式的属性内容写在括号中
例如:
<body>
<h3>css()方法设置元素样式</h3>
<div id="content">我穿了一件红色外衣</div>
<script type="text/javascript">
$("#content").css({"background-color":"red","color":"white"});
</script>
</body>
4 移除属性和样式
使用removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能,
前者方法中参数表示移除属性名,后者方法中参数则表示移除的样式名
例如:
<body>
<h3>removeClass()方法移除元素样式</h3>
<div id="content" class="blue white">我脱下了一件蓝色外衣</div>
<script type="text/javascript">
$("#content").removeClass("blue white");
</script>
</body>
5 使用append()方法向元素内追加内容
append(content)方法的功能是指定的元素中追加内容被追加的content参数,可以使字符,HTML元素标记,
还可以使一个返回字符串内容的函数
例如:
<body>
<h3>append()方法追加内容</h3>
<script type="text/javascript">
function rethtml() {
var $html = "<div id='test' title='hi'>我是调用函数创建的</div>"
return $html;
}
$("body").append(rethtml());;
</script>
</body>
6 使用appendTo()方法向被选元素内插入内容
appendTo()方法也可以向指定的元素内插入内容,它的使用格式是:
$(content).appendTo(selector)
参数content表示需要插入的内容,参数selector表示被选的元素,
即把content内容插入selector元素内,默认是在尾部。
例如:
<body>
<h3>appendTo()方法插入内容</h3>
<div>
<span class="green">小乌龟</span>
</div>
<script type="text/javascript">
var $html = "<span class='red'>小青蛙</span>"
$($html).appendTo("div");
</script>
</body>
7 使用before()和after()在元素前后插入内容
$(selector).before(content)和$(selector).after(content)
使用before()和after()方法可以在元素的前后插入内容,它们分别表示在整个元素的前面和后面插入指定的元素或内容
例如:
<body>
<h3>after()方法在元素之后插入内容</h3>
<span class="green">我们交个朋友吧!</span>
<script type="text/javascript">
var $html = "<span class='red'>兄弟。</span>"
$("span").after($html);
</script>
</body>
8 使用clone()方法复制元素
$(selector).clone()
例如:
<body>
<h3>使用clone()方法复制元素</h3>
<span class="red" title="hi">我是美猴王</span>
<script type="text/javascript">
$("body").append($(".red").clone());
</script>
</body>
9 替换内容
replaceWith()和replaceAll()方法都可以用于替换元素或元素中的内容,
但它们调用时,内容和被替换元素所在的位置不同,分别为如下所示:
$(selector).replaceWith(content)和$(content).replaceAll(selector)
例如:
<body>
<h3>使用replaceAll()方法替换元素内容</h3>
<span class="green" title="hi">我是屌丝</span>
<script type="text/javascript">
var $html = "<span class='red' title='hi'>我是土豪</span>";
$($html).replaceAll(".green");
</script>
<body>
<h3>使用replaceAll()方法替换元素内容</h3>
<span class="green" title="hi">我是屌丝</span>
<script type="text/javascript">
var $html = "<span class='red' title='hi'>我是土豪</span>";
$(".green").replaceWith("替换了");
</script>
</body>
10 使用wrap()和wrapInner()方法包裹元素和内容
wrap()和wrapInner()方法都可以进行元素的包裹,但前者用于包裹元素本身,后者则用于包裹元素中的内容,它们的调用格式分别为:
$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)
参数selector为被包裹的元素,wrapper参数为包裹元素的格式。
例如:
<body>
<h3>使用wrapInner()方法包裹元素</h3>
<span class="red" title='hi'>我的身体有点歪</span>
<script type="text/javascript">
$(".red").wrapInner("<i></i>");
</script>
</body>
<body>
<h3>使用wrap()方法包裹元素</h3>
<span class="red" title="hi">我被绿色带包围了</span>
<script type="text/javascript">
$(".red").wrap("<div></div>");
</script>
</body>
11 使用each()方法遍历元素
使用each()方法可以遍历指定的元素集合,在遍历时,通过回调函数返回遍历元素的序列号,它的调用格式为:
$(selector).each(function(index))
参数function为遍历时的回调函数,index为遍历元素的序列号,它从0开始
<body>
<h3>使用each()方法遍历元素</h3>
<span class="green">香蕉</span>
<span class="green">桃子</span>
<span class="green">葡萄</span>
<span class="green">荔枝</span>
<script type="text/javascript">
$("span").each(function (index) {
if (index == 1) {
$(this).attr("class", "red");
}
});
</script>
</body>
12 使用remove()和empty()方法删除元素
remove()方法删除所选元素本身和子元素,该方法可以通过添加过滤参数指定需要删除的某些元素,
而empty()方法则只删除所选元素的子元素。
例如:
<body>
<h3>使用empty()方法删除元素</h3>
<span class="green">香蕉</span>
<span class="green">桃子</span>
<span class="green">葡萄</span>
<span class="green">荔枝</span>
<script type="text/javascript">
$("span").empty();
</script>
</body>
<body>
<h3>使用remove()方法删除元素</h3>
<span class="red">香蕉</span>
<span class="green">桃子</span>
<span class="red">葡萄</span>
<span class="green">荔枝</span>
<script type="text/javascript">
$("span").remove(".red");
</script>
</body>
五 页面加载时触发ready()事件
1 ready()事件类似于onLoad()事件,但前者只要页面的DOM结构加载后便触发,
而后者必须在页面全部元素加载成功才触发,ready()可以写多个,按顺序执行。此外,下列写法是相等的
$(document).ready(function(){})等价于$(function(){});
2 使用bind()方法绑定元素的事件
需要知道被绑定的元素名,丙丁的事件名,事件中执行的函数内容就可以
$(selector).bind(event,[data] function)
参数event为事件名称,多个事件名称用空格隔开,function为事件执行的函数
例如:
<body>
<h3>bind()方法绑多个事件</h3>
<input id="btntest" type="button" value="点击或移出就不可用了" />
<script type="text/javascript">
$(function () {
$("#btntest").bind("click", function () {
$(this).attr("disabled", "true");
})
});
</script>
</body>
3 使用hover()方法切换事件
hover()方法的功能是当鼠标移到所选元素上时,执行方法中的第一个函数,鼠标移除时,执行方法中的第二个函数
$(selector).hover(over,out);
例如:
<body>
<h3>hover()方法切换事件</h3>
<div>别走!你就是土豪</div>
<script type="text/javascript">
$(function () {
$("div").hover(
function () {
$(this).addClass("orange");
},
function () {
$(this).removeClass("orange")
})
});
</script>
4 使用toggle()方法绑定多个函数
toggle()方法可以在元素的click事件中绑定两个或两个以上的函数,同时,它还可以实现元素的隐藏与显示的切换,绑定多个函数的调用格式如下:
$(selector).toggle(fun1(),fun2(),funN(),...)
其中,fun1,fun2就是多个函数的名称
toggle()方法绑定的函数,当执行到最后一个函数时,再次点击将又返回执行第一个函数。
例如:
<body>
<h3>toggle()方法绑定多个函数</h3>
<input id="btntest" type="button" value="点一下我" />
<div>我是动态显示的</div>
<script type="text/javascript">
$(function () {
$("#btntest").bind("click", function () {
$("div").toggle(
function(){
$(this).html("苹果");
},
function(){
$(this).html("荔枝");
}
)
})
});
</script>
</body>
5 使用unbind()方法移除元素绑定的事件
$(selector).unbind(event,fun)
6 使用one()方法绑定元素的一次性事件
one()方法可以绑定元素任何有效的事件,但这种方法绑定的事件只会触发一次,它的调用格式如下:
$(selector).one(event,[data],fun)
例如:
<body>
<h3>one()方法执行一次绑定事件</h3>
<div>请点击我一下</div>
<script type="text/javascript">
$(function () {
var intI = 0;
$("div").one("click", function () {
intI++;
$(this).css("font-size", intI + "px");
})
});
</script>
</body>
7 使用trigger()方法手动触发指定的事件
rigger()方法可以直接手动触发元素指定的事件,这些事件可以是元素自带事件,也可以是自定义的事件,总之,该事件必须能执行,它的调用格式为:
$(selector).trigger(event)
<body>
<h3>trigger()手动触发事件</h3>
<input id="txtest" type="text" value="请输入您的姓名" />
<script type="text/javascript">
$(function () {
$("input").trigger("select");
});
</script>
</body>
8 文本框的focus和blur事件
focus事件在元素获取焦点时触发,如点击文本框时,触发该事件;
而blur事件则在元素丢失焦点时触发,如点击除文本框的任何元素,都会触发该事件。
例如:
<body>
<h3>表单中文本框的focus和blur事件</h3>
<input id="txtest" type="text" value="" />
<div></div>
<script type="text/javascript">
$(function () {
$("input")
.bind("focus", function () {
$("div").html("请输入您的姓名!");
})
$("input")
.bind("blur", function () {
if ($(this).val().length == 0)
$("div").html("你的名称不能为空!");
})
});
</script>
</body>
9 下拉框的change事件
当一个元素的值发生变化时,将会触发change事件,例如在选择下拉列表框中的选项时,就会触change事件
例如:
<body>
<h3>下拉列表的change事件</h3>
<select id="seltest">
<option value="葡萄">葡萄</option>
<option value="苹果">苹果</option>
<option value="荔枝">荔枝</option>
<option value="香焦">香焦</option>
</select>
<script type="text/javascript">
$(function () {
$("select").bind("change", function () {
if ($(this).val() == "苹果")
$(this).css("background-color", "red");
else
$(this).css("background-color", "green");
})
});
</script>
</body>
10 调用live()方法绑定元素的事件
与bind()方法相同,live()方法与可以绑定元素的可执行事件,除此相同功能之外,live()方法还可以绑定动态元素,即使用代码添加的元素事件,格式如下:
$(selector).live(event,[data],fun)
参数event为事件名称,data为触发事件时携带的数据,fun为触发该事件时执行的函数。
例如:
<body>
<h3>live()方法绑多个事件</h3>
<script type="text/javascript">
$(function () {
$("#btntest").live("click", function () {
$(this).attr("disabled", "true");
})
$("body").append("<input id='btntest' type='button' value='点击或移出就不可用了' />");
});
</script>
</body>
六 动画效果
1 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:
$(selector).hide(speed,[callback])和$(selector).show(speed,[callback]) 其中参数speed为淡入淡出的速度,callback参数为完成后执行的回调函数名
2 调用toggle()方法就可以很容易做到,即如果元素处于显示状态,调用该方法则隐藏该元素,反之,则显示该元素,它的调用格式是:
$(selector).toggle(speed,[callback])
3 可以使用slideUp()和slideDown()方法在页面中滑动元素,前者用于向上滑动元素,后者用于向下滑动元素,它们的调用方法分别为:
$(selector).slideUp(speed,[callback])和$(selector).slideDown(speed,[callback])
4 使用slideToggle()方法可以切换slideUp()和slideDown(),即调用该方法时,如果元素已向上滑动,则元素自动向下滑动,反之,则元素自动向上滑动,格式为:
$(selector).slideToggle(speed,[callback])
5 fadeIn()和fadeOut()方法可以实现元素的淡入淡出效果,前者淡入隐藏的元素,后者可以淡出可见的元素,它们的调用格式分别为:
$(selector).fadeIn(speed,[callback])和$(selector).fadeOut(speed,[callback])
6 调用fadeTo()方法,可以将所选择元素的不透明度以淡入淡出的效果调整为指定的值,该方法的调用格式为:
$(selector).fadeTo(speed,opacity,[callback])
7 调用animate()方法可以创建自定义动画效果,它的调用格式为:
$(selector).animate({params},speed,[callback])
其中,params参数为制作动画效果的CSS属性名与值,speed参数为动画的效果的速度,单位为毫秒,可选项callback参数为动画完成时执行的回调函数名。
8 调用animate()方法不仅可以制作简单渐渐变大的动画效果,而且还能制作移动位置的动画,在移动位置之前,必须将被移元素的“position”属性值设为“absolute”或“relative”,否则,该元素移动不了。
9 stop()方法的功能是在动画完成之前,停止当前正在执行的动画效果,这些效果包括滑动、淡入淡出和自定义的动画,它的调用格式为:
$(selector).stop([clearQueue],[goToEnd])
其中,两个可选项参数clearQueue和goToEnd都是布尔类型值,前者表示是否停止正在执行的动画,后者表示是否完成正在执行的动画,默认为false。
10 delay()方法的功能是设置一个延时值来推迟动画效果的执行,它的调用格式为:
$(selector).delay(duration)
其中参数duration为延时值,它的单位是毫秒,当超过延时值时,动画继续执行。
- 浏览: 109224 次
- 性别:
- 来自: 天津
文章分类
最新评论
发表评论
-
jquery中replaceWith()和replaceAll()
2016-02-20 20:26 696在jquery中,我们可以通过replaceWith()和 ... -
append,appendTo和prepend 区别
2016-02-20 20:20 7151.append(content) 向每个匹配的元素内部追 ... -
jquery面试题
2016-02-19 21:10 620jquery百度文库题 http://wenku.baid ... -
jquery 接受上一个jsp页面url中传过来的值
2016-02-15 16:20 446function editOrder(id,detail_i ... -
动态给select赋值
2016-02-14 21:28 14591 <select id="motorcy ... -
jquery设置disabled
2016-02-14 21:24 525设置组件disabled $("#invoice ... -
jquery中attr和prop的区别
2016-02-14 21:07 602原文:http://www.cnblogs.com/Show ... -
jquery 选中checkbox和RadioButton
2016-02-14 21:02 588一 checkbox选中 1 判断checkbox是否选中 ... -
jQuery学习笔记 三
2016-02-04 08:45 489七 jquery实现Ajax应用1 使用load()方法通 ... -
jQuery学习笔记 一
2016-02-04 08:44 532一 jquery基础选择器<script src=& ...
相关推荐
Jquery学习笔记 Jquery学习笔记 Jquery学习笔记
个人学习jquery时的笔记,比较基础。
JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记
锋利的JQuery学习笔记
jquery 学习笔记jquery 学习笔记jquery 学习笔记jquery 学习笔记
javascript jquery 学习笔记 资料
jquery的学习总结笔记 对选择器和常用方法进行总结 有实例
JQUERY学习笔记.doc JQUERY学习笔记.doc JQUERY学习笔记.doc
jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...
NULL 博文链接:https://goyourauntie.iteye.com/blog/745626
JQuery学习笔记,docx格式,记录了JQuery的一些知识要点,供大家参考。
JQuery学习笔记.txtJQuery学习笔记.txtJQuery学习笔记.txt
这个笔记是很全面的原生Ajax用法、json解释和jQuery选择器、dom操作、事件的讲解每一部分都有例子搭配,是学习熟悉jQuery的好资料!
JQuery学习笔记 详 个人学习Jquery时记下的心得笔记 详细
]_封捷_jQuery学习笔记
第1章. JQuery概述 2 1. Jquery基本作用 2 2. 优点 2 3. 引入JQuery 2 4. 代码风格 2 5. 其他 JavaScript 库 3 6. 多个库之间的冲突 3 7. jQuery对象和DOM对象 3 第2章. jQuery选择器 4 1. jQuery优点 4 2. 基本选择...
锋利的JQuery学习笔记,总结超经典!
这是关于JQuery的学习过程中的一个笔记,当中记载了很多注意事项以及技巧,值得一看