jQuery 选择器、DOM操作、事件、动画


Posted in Javascript onNovember 25, 2010

Jquery选择器

$(document).ready(function(){})

$(function(){})

如果获取的对象是jQuery对象,那么在变量前面加上$,例如:var $variable=jQuery对象

选择器

1, 判断页面是否存在某元素:if($(“#tt”).length>0){} 或者if($(“#tt”)[0]){};

2, 基本选择器

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

标签

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

3, 层次选择器

$(“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”) 选取classone的所有的兄弟元素div,无论前后

4, 过滤选择器

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:hidden”)
$(“div:visible”)选取所有可见的
元素

 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的倍数的元素(n0开始)

5.nth-child(3n+1)能选取每个父元素下的索引值是(3n+1)的元素(n0开始)

6表单对象属性过滤选择器

$(“#form1 :enabled”)选取id为form1的表单内的所有可用元素
$(“#form2 :disabled”)选取id为“form2”的表单内的所有不可用元素
$(“input:checked”)选取所有被选中的input元素
$(“select :selected”.text())选取所有被选中的选项元素

5.表单选择器

$(“:input”)选取所有input、textarea、select和button元素
$(“:text”)选取所有的单行文本框
$(“:password”)选取所有的密码框
$(“:radio”)选取所有的单选框
$(“:checkbox”)选取所有的复选框
$(“:submit”)选取所有的提交按钮
$(“:image”)选取所有的图像按钮
$(“:reset”)选取所有的重置按钮
$(“:button”)选取所有的按钮
$(“:file”)选取所有的上传域
$(“:hidden”)选取所有不可见元素

Dom操作

Dom core(核心)、HTML-DOMCSS-DOM

1.       插入节点的方法

append() $(“p”).append(“”)

test

appendTo() $(“”).appendTo(“p”)

test

prepend() $(“p”). prepend ( “”)

test

prependTo() $(“p”). prependTo ( “”)

test

After() $(“p”). after ( “”)

test

insertAfter() $( “”). insertAfter (“p”)

test

Before() $(“p”). before ( “”)

test

insertBefore() $( “”). insertBefore (“p”)

test

2.       删除节点

Remove()方法    empty()清空节点

3.       复制节点

Clone()           $(this).clone(true).appendTo(“body”)

复制元素的同时复制元素中所绑定的事件

4.       替换节点

replaceWith():$(“p”).replaceWith(“<a>test</a>”);

replaceAll():$(“<a>test</a>”). replaceAll (“p”);

5.       包裹节点

Wrap() $(“strong”).wrap(“”);ssss
wrapAll() $(“strong”). wrapAll (“”);ssss ssss
wrapInner() $(“strong”).wrapInner (”);ssss

 

6.       属性操作

Attr();    设置多个$(“p”).attr({“title”:”dd”,”name”:”myp”})

removeAttr()移除属性

7.       样式操作

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

判断是否含有某个样式 hasClass()等价于is(“.one”)

8.设置和获取html、文本和值

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

9.遍历节点

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

 

CSS-DOM操作

获取样式 $(“.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() 获取和设置元素的滚动条距左侧的距离

事件和动画

事件

(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)       触发一次函数

Onetype[data],fn;

事件触发后立即解除

动画

Show() Slow:600毫秒、normal:400毫秒、fast:200毫秒
Hide()
Fadeln() 在指定的一段时间内降低元素的不透明度,直到元素完全消失
fadeout() 和上相反
slideUp() 与下相反
slideDown() 元素将由上之下延伸显示

自定义动画animate

语法结构:animate(params,speed,callback);

参数说明如下:

1. Params:一个包含样式属性及值的映射,比如{property1:“value1”,property2:”value2”,….}

2. Speed:速度参数,可选。

Callback:在动画完成时执行的函数,可选

     就暂时先添加这点吧,以后再慢慢完善吧!

Javascript 相关文章推荐
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
替代window.event.srcElement效果的可兼容性的函数
Dec 18 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
js模拟微博发布消息
Feb 23 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
React组件中的this的具体使用
Feb 28 Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
JS执行控制之节流模式实例分析
Dec 21 Javascript
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
jQuery学习基础知识小结
Nov 25 #Javascript
javascript预览上传图片发现的问题的解决方法
Nov 25 #Javascript
juqery 学习之三 选择器 子元素与表单
Nov 25 #Javascript
juqery 学习之三 选择器 可见性 元素属性
Nov 25 #Javascript
juqery 学习之三 选择器 简单 内容
Nov 25 #Javascript
juqery 学习之三 选择器 层级 基本
Nov 25 #Javascript
jquery 学习之二 属性 文本与值(text,val)
Nov 25 #Javascript
You might like
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
业余方法DIY电子管FM收音机
2021/03/02 无线电
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
详解Nodejs内存治理
2018/05/13 NodeJs
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
原生js实现购物车
2020/09/23 Javascript
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
工作经历证明书范文
2014/11/02 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
大学生读书笔记大全
2015/07/01 职场文书
2019年妇科护士的自我鉴定(3篇)
2019/09/26 职场文书
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers
排查MySQL生产环境索引没有效果
2022/04/11 MySQL