您现在的位置是：首页 > 文章详情

jQuery学习笔记--选择器和事件

日期：2018-05-16点击：310收藏

以下内容参考

W3school

简书

你要是问我什么是jQuery 那可以这么两句话概括：

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

要学jQuery最好有点javaScript的基础

有人对jQuery对象和javaScript对象之间的还是有点混淆

也是很简单理解你可以理解为

jQuery对象是对javaScript对象的包装

做的读书笔记如有纰漏一起学习,一起进步

jQuery 库包含以下特性：

1. HTML 元素选取 2. HTML 元素操作 3. CSS 操作 4. HTML 事件函数 5. JavaScript 特效和动画 6. HTML DOM 遍历和修改 7. AJAX 8. Utilities

如何引用jQuery呢？

jquery下载所有版本及使用

常用的在线使用jQuery

使用 Google 的 CDN

<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /jquery/1.4.0/jquery.min.js"></script> </head>

使用 Microsoft 的 CDN

<head> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery /jquery-1.4.min.js"></script> </head>

这样子在你的网页中就可以引用jQuery了

请注意，

jQuery 语法

基础语法是：$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

用hide()来了解下jQuery语法吧

1.隐藏当前的 HTML 元素

实现单击p标签的文字隐藏当前文字

 <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script>

注意：hide() 函数，隐藏了 HTML 文档中所有的

元素。

this代表当前对象

2.隐藏 id=”test” 的元素

实现单击button按钮隐藏id为test的文字

<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }) }) </script>

3.隐藏所有

元素

<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script>

4.隐藏所有 class=”test” 的元素

$(document).ready(function() { $("button").click(function() { $(".test").hide(); }); }); </script>

总结：

$(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $(".test").hide() - 隐藏所有 class="test" 的所有元素 $("#test").hide() - 隐藏所有 id="test" 的元素

注意：

文档就绪函数

(document).ready(function(){ ----------内容--------------  });

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

试图隐藏一个不存在的元素
获得未完全加载的图像的大小

看完上面的应该大致知道怎么通过jQuery来操作html元素了吧

是不是比javaScript中的getElementById()之类的简单很多

所以说点题一下 jQuery是javaScript的封装大部分网站都用到了jQuery

接下来看一下jQuery选择器：

选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

Query 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$(“p”) 选取

元素。

$(“p.intro”) 选取所有 class=”intro” 的

元素。

$(“p#demo”) 选取所有 id=”demo” 的

元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$(“[href]”) 选取所有带有 href 属性的元素。

$(“[href=’#’]”) 选取所有带有 href 值等于 “#” 的元素。

$(“[href!=’#’]”) 选取所有带有 href 值不等于 “#” 的元素。

$(“[href\$=’.jpg’]”) 选取所有 href 值以 “.jpg” 结尾的元素。

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

$(“div[id=’two’]”)选取id属性为two的div元素

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。举个栗子：

$("p").css("background-color","red");

这里只是介绍通用的选择器

$(this) 当前 HTML 元素 $("p") 所有 <p> 元素 $("p.intro") 所有 class="intro" 的 <p> 元素 $(".intro") 所有 class="intro" 的元素 $("#intro") id="intro" 的元素 $("ul li:first") 每个 <ul> 的第一个 <li> 元素 $("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性 $("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素 $("body div:odd") 选择body中的奇数的div $("body div:even") 选择body中的偶数的div

关于jQuery函数

如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。

然后再引用该js

<head> <script type="text/javascript" src="jquery的位置.js"></script> <script type="text/javascript" src="jQuery函数存放的位置.js"></script> </head>

有时候吧当你引用多个javaScript库的时候$这个标识符会重复

而jQuery又使用$符号作为简写方式那怎么办？

jQuery使用noConflict()的方法找其他变量替代$

<script> var xx=$.noConflict(); xx(document).ready(function(){ xx("button").click(function(){ xx("p").text("jQuery 仍在运行！"); }); }); </script>

注意：

把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库

jQuery 常用事件：

$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时） $(selector).click(function) 触发或将函数绑定到被选元素的点击事件 $(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件 $(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件 $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件