jquery初学笔记

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_33701251

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/812141/blog/223286

本文介绍了jQuery的基本用法，包括如何使用jQuery选择HTML元素、使用CSS选择器改变元素样式以及绑定事件等。通过具体示例展示了如何避免在文档未加载完成时执行jQuery代码。

$(document).ready(function(){
    --- jQuery functions go here ----
    });

实例中jQuery 函数位于一个 document ready 函数中：

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

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

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

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

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

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

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

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

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：

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

语法	描述
$(this)	当前 HTML 元素
$("p")	所有<p>元素
$("p.b")	所有class="b"的<p>元素
$(".b")	所有class="b"的元素
$("#b")	所有id="b"的元素
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

Event 函数绑定函数至

$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）

$(selector).click(function) 触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件

$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

转载于:https://my.oschina.net/u/812141/blog/223286