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

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”)选择所有的<p>标签

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

$(“span ,#two”)选择页面上所有的<span>标签和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”) 选取class为one的所有的兄弟元素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 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())选取所有被选中的选项元素

5.表单选择器

























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

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

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

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

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

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

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

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

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

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

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

Dom操作

Dom core(核心)、HTML-DOM和CSS-DOM

1.       插入节点的方法



























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>

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(“<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>

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

One(type,[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:在动画完成时执行的函数,可选

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

(0)

相关推荐

  • jQuery事件与动画基础详解

    今天我们就谈谈jquery中的事件和简单动画吧,它们毕竟基础是进阶华丽的根本!! 1.事件 1.window事件 ready   准备就绪 2.鼠标事件 方法                        执行时机 click(fn)                单击鼠标 $(document).ready(function(){ $("dd>img").click(function(){ $("dt>img").show(); }); mouseov

  • 锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)

    一.事件 1 加载DOM 复制代码 代码如下: $(document).ready(function(){//...}) DOM加载完毕后执行,在可重复使用上区别于window.onload=function(){//...} $(window).load(function(){//...}) window内所有对象加载完毕后执行,几等同window.onload=function(){//...}.也可针对selector使用此方法 另:$(document).ready(function()

  • 一款基jquery超炫的动画导航菜单可响应单击事件

    今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 源码下载 html代码: <ul> <li><a href="http://www.w2bc.com">First</a></li> <li><a href="http://www.w2bc.com"&g

  • 深入理解JQuery中的事件与动画

    首先,使用JQuery事件与动画的效果比使用原生js来的方便得多,当然,最重要的是考虑到了浏览器的兼容性. 事件: 基于原生js,常用事件有blur,focus,hover,mouseout,mouseover,mouseleave,ready,change,select,submit等等,不再赘述. 事件绑定: 在文档加载完成后,使用bind(type,[data],func())方法绑定事件. 合成事件: hover(enter-func,leave-func)相当于bind("mouseo

  • jQuery中animate动画第二次点击事件没反应

    用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page").stop().animate({top:"-300px"}, 800, 'easeInOutExpo'); 第二次点击事件动画没反应的原因:top是page元素顶部相与其父元素顶部的距离,第一次点击后,page元素顶部已经移动到距其父元素顶部-300px的位置,第二次点击时的并不是page在移动后的位置继续t移动-300px,

  • 锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)

    二.动画 1 show()方法和hide()方法 复制代码 代码如下: $("selector").show() 从display:none还原元素默认或已设置的display属性 $("selector").hide() 设置元素的display样式为none,等于$("selector").css("display","none") (注:传入参数后,.show()和.hide()方法同时动画改变元素的

  • jQuery中事件与动画的总结分享

    1.加载DOM 1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行 $(function(){}) --:只是等待标签完毕,即可执行 区别:前者在HTML页面中只能解析最后一个,二后者是N个 window.onload() = function () { } $(function () { $("li").bind("click", function () { $(this).css("

  • JQuery中的事件及动画用法实例

    本文实例讲述了JQuery中的事件及动画用法.分享给大家供大家参考.具体分析如下: 1.bind事件 复制代码 代码如下: <script src="script/jquery-1.7.1.min.js"></script> <script> $(function () { $("#divid h5.head").bind("click", function () {  //bind事件,其中包含三个参数,第一

  • 分享一些常用的jQuery动画事件和动画函数

    部分jQuery常用的动画函数,整理了一下,在做交互式页面的时候挺有用的 .css('a','12px'); .css({ a:'12px', b:'#fff' }); .show(); .hide(); .toggle(); .fadeIn(); .fadeOut(); .fadeToggle(); .slideDown(); .slideUp(); .slideToggle(); .text('string'); .animate({ a:'40px', b:'ccc' },200) .fa

  • jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果

    但感觉这样写很没意思. jquery的优势就是简单的代码就能带来更好的用户体验. 所以就找几个我感觉实用的例子,拿出来介绍下.顺带把其中用到的操作和事件介绍下. html代码: <input type="text" id="address" value="请输入邮箱地址"/> jquery代码: 复制代码 代码如下: $(document).ready(function(){ $('#address').focus(function(

  • jQuery中DOM操作实例分析

    本文实例讲述了jQuery中DOM操作的方法.分享给大家供大家参考.具体分析如下: 这里主要设计的dom操作包括:dom对象的创建(JS方式和jquery方式).属性的修改.样式的修改.动态绑定事件 代码如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="jquery-1.3.

  • jQuery中DOM操作原则实例分析

    本文实例讲述了jQuery中DOM操作原则.分享给大家供大家参考,具体如下: 一丶Get and Set in One(读写一体) 原则 为了更加易于使用,jQuery提供了简洁的DOM操作API,其方法往往是读写一体的.也就是说,某个方法既可用于读取操作,也可用于设置操作.如果没有为其传入表示值的参数,则表示获取操作,将返回获取到的数据:如果为其传入了表示值的参数,则表示设置操作,它将设置DOM元素指定属性的值. 示例代码 // 没有传入value参数,返回第一个匹配元素的value元素 va

  • JQuery中DOM实现事件移除的方法

    本文实例讲述了JQuery中DOM实现事件移除的方法.分享给大家供大家参考.具体如下: 可以为同一个元素绑定多个事件,也可以为多个元素绑定同一个事件.假设网页上有一个<button>元素,使用以下代码为该元素绑定多个相同的事件. $(function(){ $('#btn').bind("click", function(){ $('#test').append("<p>我的绑定函数1</p>"); }).bind("c

  • jquery中dom操作和事件的实例学习-表单验证

    很显然,这样做能提升更好的用户体验. html代码: 复制代码 代码如下: <form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <input type="text" id="username" class="r

  • jQuery 中DOM 操作详解

    jQuery 中的 DOM 操作 DOM(Document Object Model-文档对象模型):一种与浏览器,平台, 语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件 DOM 操作的分类: DOM Core: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM的程序设计语言都可以使用它. 它的用途并非仅限于处理网页,也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML HTML DOM: 使用 JavaScript和 DOM 为 HTML文

  • jQuery中用dom操作替代正则表达式

    在B/S结构客户端越来越"胖"的今天,作为一名全端程序员,您很可能会在前端操作html字符串,注意,是操作html字符串,不是操作当前页面的html. 举个例子,百度推出的在线HTML富文本编辑器Ueditor,可以在线制作富文本文档,功能堪比精简版的Microsoft Word.虽然Ueditor身披百度的光环,但实际效果不太让人满意,我们需要二次处理一下它生成的html字符串,比如把所有图片的宽度设成90%. 通过某个方法,我们可以拿到文本编辑器中的html字符串,假设字符串如下:

  • jquery中dom操作和事件的实例学习 下拉框应用

    今天这个demo是有关下拉框的. 复制代码 代码如下: <div class="centent"> <select multiple="multiple" id="select1" style="width:100px;height:160px;"> <option value="1">选项1</option> <option value="2

  • jQuery的DOM操作之删除节点示例

    如果文档中某一个元素多余,那么应将其删除.jQuery提供了两种删除节点的方法,remove()方法和empty()方法. 1. remove(): <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content=&quo

  • jQuery学习笔记之jQuery的DOM操作

    一.节点的操作 1.查找节点: var $var_1=$("htmltype");   //这句话就是获取所有htmltype节点 如:var $ul_1=$("ul"); 2.创建并追加节点: var $var_1=$("<htmltype>");//这句话是创建一个节点 $("htmltype2").append($var_1) ; //这句话是把节点插入所有htmltype2节点中 例子:var $li_1=

随机推荐