手记

JQuery入门总结【选择器、方法应用】

         1、$(document).ready(function(){
 
 })
 dom加载完成后触发
 window.onload
 只能注册一个方法
 页面所有内容加载完成后触发(图片,css,js都加
 缩写
 $(function(){
 })
 2、jQuery对象(包装集)  dom对象
 var div = document.getElementById("id") dom对象
 var div = $(".class") 包装集,对dom对象包装,返回的是很多个dom对象
 3、jQeury选择器
 $("#id")
 $(".class")
 $("input")
 复合选择器 $("#id,.class,input")
 4 $(who).when(what)  $("#btn").click(function(){})
 5、层次选择器
 $("div p") 包含选择器 div中所有的p 子元素 子子元素..
 $("div > p")  子后代选择器 div中直接子后代
 6、常用的方法html()  text()  val()  attr()  css() removeAttr()
 addClass()   removeClass()  toggleClass()
 7、简单选择器
 :first 选取第一个元素   $("div:first") 
 :last 选取最后一个元素
 :not(选择器) 选取不满足“选择器”条件的元素$("div:not(#id)")
 :even、:odd,选取索引是奇数、偶数的元素
 :eq(索引序号)、:gt(索引序号)、:lt(索引序号) 
 8、设置样式
 addClass("myclass")(不影响其他样式)
 removeClass("myclass")移除样式
 toggleClass("myclass")如果存在样式则去掉样式,如果没有样式则添加样式
 hasClass("myclass")判断是否存在样式
 9、链式编程 
 $(this).css("background-color", "red").siblings().css("background-color", "white");
 10、属性过滤选择器
 $("div[id]")选取有id属性
 $("div[title=test]")选取title属性为test的元素
 $("div[title!=test]")选取title属性不为test的元素
 etc....查看帮助
 11、表单选择器
 $(表单有的input标签
 $(":input")匹配所有 input, textarea, select 和 button 元素
 $(":text")匹配所有 匹配所有的单行文本框
 $(":checkbox")匹配所有复选框
 etc.....查看帮助
 11.5、表单属性选择器
 $(":checkbox:checked")  所有选中的checkbox
 12、动态创建Dom
 var link = $("<a href='http://www.baidu.com'>百度</a>");动态创建jquery对象,只是在内存中
 $("div:first").append(link);  把动态创建的jquery对象,加到第一个div中
 动态创建dom注意:
 var some = $("<div id='d1'>a<p></p>c</div>")
 $("#d1").text() 不可以,因为$("#d1")在窗体上去找对象了,但是some现在在内存中,还没加载到窗体
 当把动态创建的节点添加到窗体前,不能通过$("#d1")访问到它
 必须先把some追加到窗体
 $("div:first").append(some);
 才可以通过$("#d1") 中找到它
 append   把link元素追加到哪$("div:first").append(link);  
 appendTo  link.appendTo("div:first")
 在结束标签之前添加元素 加子节点
 直接把元素移动过去,并且包含所有事件
 prepend
 prependTo
 在开始标签之后添加元素  加子节点
 after
 afterTo
 在结束标签外添加元素  加兄弟节点
 before
 beforeTo
 在开始标签前添加元素 加兄弟节点
 13、删除节点
 remove()  删除当前节点
 empty() 清空当前节点之间的内容,节点保留
 14、*替换节点
 $(“br”).replaceWith(“<hr/>”);  
 15、*包裹节点
 wrap()将所有元素逐个用指定标签包裹
 16、绑定事件
 绑定事件 $("#id").bind("click",function(){})
 解除绑定 $("#id").unbind("click",function(){})
 让事件只执行一次 $("#id").one("click",function(){})
 合成事件hover  toggle
 hover(enterfn,leavefn)  当鼠标放上时执行enterfn,当鼠标离开时执行leavefn  封装mouseover,mouseout
 toggle(fn1,fn2) 当鼠标第一次点击时执行fn1,第二次点击执行fn2,以后依次执行  封装click
 17、事件冒泡
 mouseover、mouseenter   mouseover会事件冒泡,mouseenter不会
 mouseout、mouseleavemouseleave会阻止事件冒泡
 
 阻止事件冒泡 
 $("#d1").click(function(e){ e.stopPropagation();})
 18、*事件参数
 pageX、pageY
 target 获得触发事件的元素(事件冒泡的起始) 相当于event.srcElement
 altKey、shiftKey、ctrlKey
 当键盘按下 keyCode 键盘码、which  ascii码
 当鼠标按下的时候which可以获取鼠标左右键(1,3)
 19、动画
 show()、hide()
 toggle()  切换显示隐藏
 slideDown、slideUp、 fadeOut、fadeIn
 animate 复杂动画
 
 
 
 
 
 

0人推荐
随时随地看视频
慕课网APP

相关阅读

jQuery使用