jQuery学习笔记(下)_Android, Python及开发编程讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛_联动北方技术论坛  
网站首页 | 关于我们 | 服务中心 | 经验交流 | 公司荣誉 | 成功案例 | 合作伙伴 | 联系我们 |
联动北方-国内领先的云技术服务提供商
»  游客             当前位置:  论坛首页 »  自由讨论区 »  Android, Python及开发编程讨论区 »
总帖数
1
每页帖数
101/1页1
返回列表
0
发起投票  发起投票 发新帖子
查看: 2351 | 回复: 0   主题: jQuery学习笔记(下)        下一篇 
xpisme
注册用户
等级:少校
经验:1117
发帖:65
精华:0
注册:2015-6-29
状态:离线
发送短消息息给xpisme 加好友    发送短消息息给xpisme 发消息
发表于: IP:您无权察看 2015-9-6 9:52:01 | [全部帖] [楼主帖] 楼主

五、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



赞(0)    操作        顶端 
总帖数
1
每页帖数
101/1页1
返回列表
发新帖子
请输入验证码: 点击刷新验证码
您需要登录后才可以回帖 登录 | 注册
技术讨论