JQuery选择器,动画,事件和DOM操作

JQuery是由JS封装的一些方法,供我们调用,可以快速的实现某些JS功能,实际是JS编写的方法包

将JQuery文件放到JS文件夹下,然后引用到<head></head>中

一、选择器

1、Id选择器

$("#div1")

2、Class选择器

$(".div")

用class选择器选出一堆对象给他们附事件,不用像Js一样遍历。直接附加事件,取到的所有对象都会附上事件。

注意:Js中的this,在Jquery中变为$(this)。

3、标签选择器

$("div")

4、并列选择器

用,隔开

$("#div1,#div2")

5、后代选择器

用空格隔开

6、过滤选择器

第一个:$(".div:first")

最后一个:$(".div:last")

任意个:$(".div:eq(索引号)")

$(".div").eq(索引号)

大于:$(".div:gt(索引号)")     取到的是索引号以后的

小于:$(".div:lt(索引号)")     取到的是索引号之前的

排除:$(".div:not(选择器)")     取到的是排除掉选择的剩下的

$(".div:not(.div:eq(2))")  取到的是排除掉第三个剩下的

奇数个:$(".div:odd")   索引奇数个

偶数个:$(".div:even")  索引偶数个,包含0

属性名过滤:$(".div[属性名]")

属性名+值过滤:$(".div[属性名=值]")    $(".div[属性名!=值]")

内容过滤:$(".div:contains(‘字符串‘)")

包含子元素:$(".div:has(‘选择器‘)")

二、动画

1、show(),hide()    显示、隐藏

2、slideDown(),slideUp()   下拉显示,上拉隐藏

3、fadeIn(),fadeOut()  淡入淡出

4、自定义动画    animate({目标效果},时间,回调函数)  3个参数

animate({left:"300px",top:"300px"},3000,function(){回调函数})

停止动画,防止动画积累: .stop()

动画颜色渐变,需要另引Jquery.color。放在之前引用的Jquery下面。

时间: 2024-10-20 00:52:08

JQuery选择器,动画,事件和DOM操作的相关文章

JQuery基本知识、选择器、事件、DOM操作、动画

1:基本选择器 <title></title> <script src="js/jquery-1.7.2.min.js"></script> </head> <body> <form id="form1" runat="server"> <div id="div1"> <a>aaaaa</a> <%--

Webform——JQuery基础(选择器、事件、DOM操作)

一.选择器 1.基本选择器 ①id选择器:#       ②class选择器:.       ③标签名选择:标签名 ④并列选择:用,隔开          ⑤后代选择:用空格隔开 代码用法展示:   2.过滤选择器 (1).基本过滤 ①首个::first        ②尾个::last       ③任意个::eq(索引号)        ④大于::gt(索引号) ⑤小于::lt(索引号)         ⑥排除::not(选择器)         ⑦奇数:odd           ⑧偶数:

JQuery基本知识、选择器、事件、DOM操作、动画--2017年2月10日

$(对象)可以将JS对象转换为JQuery对象  .get(0)可以将JQuery对象转换为JS对象 并无太大区别,灵活点出即可

JQuery选择器和事件的学习小记

一.前言与基础 JQuery是JavaScript的一个拓展库,能够比原生JavaScript代码更简便地进行HTML页面的DOM操作.要想使用JQuery,必须要在HTML页面引入JQuery的源代码文件. JQuery的源代码文件有两种: compressed&production,编译过并且进行压缩的JQuery文件,用于实际网站开发,编译和压缩能够加快代码加载.文件名一般为jquery-1.10.2.min.js,1.10.2是版本号. uncompressed&developme

认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法

(一)认识JQuery  JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法    JQuery的主旨:以更少的代码,实现更多的功能 (二)JQuery的优势 1)可以像CSS一样访问和操作DOM 2)修改CSS控制页面外观 3)简化JS代码操作 4)事件代理更加容易 5)动画效果使用方便 6) Ajax技术更加完美 7)大量的基于Jquery的插件 8)可以自定义扩展功能插件 (三)JQuery的语法 格式:$(selector).actio

jquery学习(二)-DOM操作

来自锋利的jquery第二版 一.DOM分类 DOM分为3类DOM Core(核心).HTML-DOM.CSS-DOM 1.DOM Core:其并不专属于javascript,任何一种支持DOM程序设计的语言都可以使用它.如javascript中的getElementById.getElementByTagName.getAttibute和setAttribute等方法,就是DOM Core的组成部分. 2.HTML-DOM:其比DOM Core出现的还要早,它提供了一些更简明的记号来描述各种H

jQuery 选择器 与 事件

jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作. jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作. jQuery 选择器基于元素的 id.类.类型.属性.属性值等"查找"(或选择)HTML 元素. 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器. jQuery 中所有选择器都以美元符号开头:$(). 元素选择器 jQuery 元素选择器基于元素名选取元素. 在页面中选取所有 <p

jQuery 选择器与事件

jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作. jQuery 选择器基于元素的 id.类.类型.属性.属性值等"查找"(或选择)HTML 元素. 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器. jQuery 中所有选择器都以美元符号开头:$(). 元素选择器 jQuery 元素选择器基于元素名选取元素. 在页面中选取所有 <p> 元素: $("p") #id 选择器 jQuery #id

jQuery选择器和事件

一.jQuery选择器    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.10.1.min.js"></script> <script src="Selector.js"></script>