Jquery选择器 $(document).ready(function(){}) $(function(){}) 如果获取的对象是jQuery对象，那么在变量前面加上$,例如：var $variable=jQuery对象 [b]选择器[/b] 1， 判断页面是否存在某元素：if($(“#tt”).length>0){} 或者if($(“#tt”)[0]){}; [b]2， [/b][b]基本选择器[/b]

$(“#test”) 选择id为test的元素

$(“.test”)选择class为test的所有元素

$(“p”)选择所有的<p>标签

$(“*”)选择页面上的所有元素

$(“span ,#two”)选择页面上所有的<span>标签和id为two的元素

[b]3， [/b][b]层次选择器[/b]

$(“div span”)表示选取div中的所有的span元素

$(“parent>children”)选取parent下所有children的子元素

$(‘.one+span')选取class为one的下一个span元素

$(‘.one~div')选取class为one的后面的所有的div兄弟元素

$(‘.one+span')等价于$(“.one”).next(“span”) $(‘one~div')等价于$(“.one”).nextAll(“div”) $(“.one”).siblings(“div”) 选取class为one的所有的兄弟元素div，无论前后 [b]4， [/b][b]过滤选择器[/b] （1）基本的过滤器

$(“div:first”)选取所有div元素中第一个div元素

$(“div:last”)选取所有div元素最后一个div元素

$(“input:not(.myClass)”)选取class不是myClass的input元素

$(“input:even”)选取索引是偶数的input元素

$(“input:odd”)选取索引时奇数的input元素

$(“input:eq(1)”)选取索引等于1的input元素

$(“input:gt(1)”)选取索引大于1的input元素（大于1不包括1）

$(“input:lt(1)”)选取索引小于1的input元素 （小于1不包括1）

$(“:header”)选取网页中所有的h1、h2……

$(“div:animated”)选取正在执行动画的div元素

（2）内容过滤器

$(“div:contains(‘我')”)选取含有文字“我”的div元素

$(“div:empty”)选取不包含子元素（包含文本元素）的div空元素

$(“div:has(p)”)选取含有p元素的div元素

$(“div:parent”)选取拥有子元素（包含文本元素）的div元素

（3）可见性过滤选择器

$(“:hidden”)选取所有不可见的元素。包括<input type=”hidden”/>,<div style=”display:none;”>和<div style=”visibility:hidden;”>等元素。如果只想选取<input>元素，可以使用$(“input:hidden”)

$(“div:visible”)选取所有可见的<div>元素

 （4）属性过滤选择器

$(“div[id]”)选取拥有属性id的元素

$(“div[title=test]”)选取属性title为test的div元素

$(“div[title!=test]”)选取属性title不是test的div元素（没有属性title的div也会被选取）

$(“div[title^=test]”)选取属性title以test开始的div元素

$(“div[title$=test]”)选取属性title以test结束的div元素

$(“div[title*=test]”)选取属性title包含test的div元素

$(“div[id][title$='test']”)选取拥有属性id，并且属性title以test结束的div元素

（5）子元素过滤选择器

:eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)的index是从1开始的，而:eq(index)是从0算起的

:first只返回单个元素，而:first-child选择符将为每个父元素匹配第一个子元素。 例如$(“ul li:first-child”)选取每个ul中第一个li元素

:last只返回单个元素，而:last-child选择符将为每个父元素匹配最后一个子元素

$(“ul li:only-child”)在ul中选取是唯一子元素的li元素

:nth-child()选择器是很常用的子元素过滤选择器，详细功能如下： 1.:nth-child(even)能选取每个父元素下的索引值是偶数的元素 2. :nth-child(odd)能选取每个父元素下的索引值的奇数的元素 3.:nth-child(2)能选取每个父元素下索引值等于2的元素 4.nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素(n从0开始) 5.nth-child(3n+1)能选取每个父元素下的索引值是（3n+1）的元素（n从0开始） （6）表单对象属性过滤选择器

$(“#form1 :enabled”)选取id为form1的表单内的所有可用元素

$(“#form2 :disabled”)选取id为“form2”的表单内的所有不可用元素

$(“input:checked”)选取所有被选中的input元素

$(“select :selected”.text())选取所有被选中的选项元素

[b]5[/b][b]．表单选择器[/b]

$(“:input”)选取所有input、textarea、select和button元素

$(“:text”)选取所有的单行文本框

$(“:password”)选取所有的密码框

$(“:radio”)选取所有的单选框

$(“:checkbox”)选取所有的复选框

$(“:submit”)选取所有的提交按钮

$(“:image”)选取所有的图像按钮

$(“:reset”)选取所有的重置按钮

$(“:button”)选取所有的按钮

$(“:file”)选取所有的上传域

$(“:hidden”)选取所有不可见元素

[b]Dom[/b][b]操作[/b][b][/b] Dom core（核心）、HTML-DOM和CSS-DOM [b]1.       [/b][b]插入节点的方法[/b]

append()	$(“p”).append(“<b>你</b>”) <p>test <b>你</b></p>
appendTo()	$(“<b>你</b>”).appendTo(“p”) <p>test <b>你</b></p>
prepend()	$(“p”). prepend ( “<b>你</b>”) <p><b>你</b>test </p>
prependTo()	$(“p”). prependTo ( “<b>你</b>”) <p><b>你</b>test </p>
After()	$(“p”). after ( “<b>你</b>”) <p>test </p><b>你</b>
insertAfter()	$( “<b>你</b>”). insertAfter (“p”) <p>test </p><b>你</b>
Before()	$(“p”). before ( “<b>你</b>”) <b>你</b><p>test </p>
insertBefore()	$( “<b>你</b>”). insertBefore (“p”) <b>你</b><p>test </p>

[b]2.       [/b][b]删除节点[/b] Remove()方法    empty()清空节点 [b]3.       [/b][b]复制节点[/b] Clone()           $(this).clone(true).appendTo(“body”) 复制元素的同时复制元素中所绑定的事件 [b]4.       [/b][b]替换节点[/b] replaceWith():$(“p”).replaceWith(“<a>test</a>”); replaceAll():$(“<a>test</a>”). replaceAll (“p”); [b]5.       [/b][b]包裹节点[/b]

Wrap()	$(“strong”).wrap(“<b></b>”);<b><strong>ssss</strong></b>
wrapAll()	$(“strong”). wrapAll (“<b></b>”);<b><strong>ssss</strong> <strong>ssss</strong></b>
wrapInner()	$(“strong”).wrapInner (<b></b>”);<strong><b>ssss</b></strong>

  [b]6.       [/b][b]属性操作[/b] Attr();    设置多个$(“p”).attr({“title”:”dd”,”name”:”myp”}) removeAttr()移除属性 [b]7.       [/b][b]样式操作[/b]

获取和设置样式	Attr()
追加样式	addClass()
移除样式	removeClass()    removeClass(“one two”)
切换样式	toggle()主要控制行为上的重复切换 toggleClass()样式上的重复切换

判断是否含有某个样式

hasClass()等价于is(“.one”)

[b]8.[/b][b]设置和获取html[/b][b]、文本和值[/b]

html()	读取或者设置某个元素中的HTML内容
text()	读取或者设置某个元素中文本内容
val()	设置和获取元素的值defaultValue初始值

[b]9.[/b][b]遍历节点[/b]

Children()	取得匹配元素的子元素的集合，只考虑子元素不考虑后代元素
Next()	取得匹配元素后面紧邻的同辈元素
Prev()	取得匹配元素前面紧邻的同辈元素
Siblings()	取得匹配元素前后所有的同辈元素
Closest()	取得最近的匹配元素
还有很多遍历方法：find(),filter(),nextAll(),prevAll(),parent(),parents()等

[b][/b]  [b]CSS-DOM[/b][b]操作[/b][b][/b]

获取样式	$(“.one”).css(“color”)
设置样式	$(“.one”).css(“color”,”red”) $(“.one”).css({“opacity”:”0.5”,”background-color”:”blue”})
Height()	$(“.one”).height(),设置：$(“.one”).height(“20px”)
Width()	$(“.one”).width(),设置：$(“.one”).width(“200px”)
Offset()	获取元素在当前视窗的相对偏移，包括top和left
Position()	获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，它返回的对象也包括两个属性，即top和left
ScrollTop()	获取和设置元素的滚动条距顶端的距离
ScrollLeft()	获取和设置元素的滚动条距左侧的距离

[b]事件和动画[/b][b][/b] [b]事件[/b][b][/b] （1）       绑定事件 bind(type[,data],fn); 参数：type：事件类型，也可以自定义名称       data:作为event.data属性值传递给事件对象的额外数据对象       fn：用来绑定的处理函数 绑定多个事件类型 Ex：$(“div”).bind(“mouseover mouseout”,function(){ $(this).toggleClass(“over”); }) （2）       合成事件 Hover(enter,leave); 用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数（enter）；当光标移除这个元素时，会触发指定的第二个函数（leave） toggle(fn1,fn2,….fnN); 用户模拟鼠标连续单击事件。第一次单击元素，触发指定的第一个函数；当在次单击同一个元素时，则触发指定的第二个函数（fn2）；如果有更多的函数，则依次触发，知道最后一个。 （3）       冒泡事件 假设网页上有2个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，同时body元素也绑定了click事件，当点击最里面元素的事件时，同时其它事件也会触发。从内向外 停止事件冒泡的方法：stopPropagation() Ex:$(‘span').bind(“click”,function(event){ Var txt=$().html()+”<p>内层span元素被单击</p>”; $(‘#msg').html(txt); Event.stopPropagation(); 停止事件冒泡 })   停止表单默认提交：event.preventDefault()==return false; （4）       移除事件 Unbind([type][,data]); Type:事件类型 Data：将要移除的函数 （5）       触发一次函数 One（type，[data],fn）; 事件触发后立即解除 [b]动画[/b]

Show()

Slow:600毫秒、normal：400毫秒、fast：200毫秒

全部评论(0) [展开所有评论] 上一篇：jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果 下一篇：DOM基础教程之事件对象 商品推荐 机械节能产品生产企业官网模板... ￥20.00 大气智能家居家具装修装饰类企业通用网站模板... ￥20.00 礼品公司网站模板 ￥25.00 宽屏简约大气婚纱摄影影楼模板... ￥25.00 蓝白WAP手机综合医院类整站源码（独立后台）... ￥25.00 资讯排行榜 更多>> 1 docker kubernetes dashboard安装部署详细介绍 2 ubuntu14.04+docker的安装及使用 3 Docker 清理命令集锦 4 如何在Docker容器内外互相拷贝数据 5 Docker创建MySQL容器的方法 6 详解Docker源码编译安装 7 在windows下的安装Docker的教程 8 Docker在CentOS7下不能下载镜像timeout的解决办法(图解) 9 Docker高级教程之智能添加与修改防火墙规则 10 docker容器如何优雅的终止详解 关于我们 | 广告合作 | 联系我们 | 隐私条款 | 免责声明 | 网站地图 苏ICP备2024110244号-2      苏公网安备32050702011978号      增值电信业务经营许可证编号：苏B2-20251499   |  Copyright 2018 - 2025   源码网商城 (www.ymwmall.com) 版权所有 联系客服 客服电话： 400-000-3129 微信版 扫一扫进微信版 返回顶部