五、jQuery操作DOM元素
1、attr()方法控制元素的属性,例:$(“#tip”).attr(“color”)格式获取元素字体颜色的值,即元素属性名的值;$(“#tip”).attr(“color”,”#ddd”)格式则是设置元素属性名的值。
2、html()方法和text()方法操作元素的内容,当两个方法的参数为空时$(“#tip”).html(),表示获取该元素的内容,而如果方法中包含参数$(“#tip”).html(“唉,我又要变胖了!”),则表示将参数值设置为元素内容。
3、removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能。name表示元素属性名,class表示元素样式名。
4、addClass()和css()方法可以方便的操作元素中的样式,addClass()用于增加元素的样式名称,$(“#tip”).addClass(“class”);css({“属性名”:”属性值”}) 将样式的属性内容写在括号里。
5、append()方法向元素内追加内容。例:$(“#tip”).append(“哎,我又变胖了!”)
6、appendTo()方法向指定元素内插入内容。例:$(“#tip”).appendTo(“div”)
7、before()和after()在元素前后插入内容。
8、clone()方法复制元素。$(“#tip”).clone()
9、替换内容,replaceWith()和replaceAll()方法都可用于替换,但格式不同:
$(“#tip”).replaceWith(“哎,我又长胖了!”) ;$(“哎,我又长胖了!”).replaceAll($(“#tip”))
10、wrap()和wrapInner()方法包裹元素和内容。$(“.red”).wrap(“<div></div>”)
11、each()方法遍历元素。例:$(“span”).each(function(index))
12、remove()和empty()方法删除元素,remove()方法删除所选元素本身和子元素,还可以通过添加过滤参数指定需要删除的某些元素$(“span”).remove(“.red”);empty()只删除子元素。
这一章即对DOM元素与属性的插入、添加、删除、复制、替换等,对象皆为元素,方法则是对元素的属性起作用。
六、jQuery事件与应用
1、ready()事件,类似与onload()事件,但前者只要页面的DOM结构加载后便触发,而后者必须在页面全部元素加载成功才触发。ready()可以写多个,按顺序执行。
$(document).ready(function(){})等价于$(function(){});
2、bind()方法绑定元素的事件。例:$("#btntest").bind("click",function (){});
3、hover()方法切换事件,当鼠标移到所选元素上时,执行方法中的第一个函数,鼠标移出时,执行方法中的第二个函数,实现事件的切实效果。
例:$("div").hover(function () {$(this).addClass("orange");},function () {
$(this).removeClass("orange")});
4、toggle()方法绑定多个函数。$(selector).toggle(fun1(),fun2(),fun3(),......)
5、unbind()方法移除元素绑定的事件。$(“div”).unbind(abclick)
6、one()方法绑定元素的一次性事件。
7、trigger()方法手动触发指定的事件,即在页面上进行一些操作时触发的事件。
8、focus()事件,在元素获取焦点时触发,如点击文本框时,触发该事件。
9、blur()事件,在元素丢失焦点时触发。$(“input”).bind(“blur”,function(){});
10、下拉列表框的change事件。当option的value值发生变化时就会触发该事件。
11、调用live()方法绑定元素的事件,与bind()方法功能相同,但live()方法还可绑定动态元素(例如this),即使用代码添加的元素事件。
七、jQuery动画特效
1、show()和hide()方法显示和隐藏元素 $(selector).show(speed(“slow/fast”或具体秒数),[callback](执行隐藏或显示动作执行完成后调用的函数名))
2、toggle()方法实现动画切换效果
例: $("ul").toggle(300,function(){
$spn.html() == "隐藏" ? $spn.html("显示") : $spn.html("隐藏");//常用选择语句
})
3、slideUp()和slideDown()方法实现滑动效果 $(selector).slideUp(speed,[callback])
4、slideToggle()方法实现图片“变脸”效果 $(selector).slideToggle(speed,[callback])
5、fadeIn()和fadeout()方法实现淡入淡出效果 $(selector).fadeIn(speed,[callback])
6、fadeTo()方法设置淡入淡出效果的不透明度 $(selector).fadeTo(speed,opacity(透明度),[callback])
7、animate()方法制作简单的动画效果 $(selector).animate({params(params参数为制作动画效果的CSS属性名与值)},speed,[callback])
8、animate()方法制作移动位置的动画
9、stop()方法停止当前所有动画效果
10、delay()方法延时执行动画效果 $(selector).delay(duration(延时值,单位是毫秒))
好了,就总结到这了,以上基本包括了jQuery所有的选择器和方法,接下来还有jQuery实现Ajax,一些常用插件,jQuery UI型插件、工具类函数等这些可以在一些实践中练习学习。
该贴被xpisme编辑于2015-9-6 9:52:41