jQuery 学习笔记之一

来源：互联网发布：多益网络账号解绑手机编辑：程序博客网时间：2024/06/08 11:55

1、jQuery库引用

<head><script src="jquery.js"></script></head>

2、jQuery语法使用示例

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

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

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

示例

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class="test" 的所有元素

$("#test").hide() - 隐藏所有 id="test" 的元素

3、选择元素的方法（选择器）

语法描述$(this)当前 HTML 元素$("p")所有 元素$("p.intro")所有 class="intro" 的 元素$(".intro")所有 class="intro" 的元素$("#intro")id="intro" 的元素$("ul li:first")每个 <ul> 的第一个 <li> 元素$("[href$='.jpg']")所有带有以 ".jpg" 结尾的属性值的 href 属性$("div#intro .head")id="intro" 的 <div> 元素中的所有 class="head" 的元素

$("p") 选取 元素。

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

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

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

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

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

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

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

<strong>$("p").css("background-color","red"); </strong> //<span style="font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: 18px; background-color: rgb(249, 249, 249);">所有 p 元素的背景颜色更改为红色</span>

4、事件（执行动作）
Event 函数绑定函数至$(document).ready(function)将函数绑定到文档的就绪事件（当文档完成加载时）$(selector).click(function)触发或将函数绑定到被选元素的点击事件$(selector).dblclick(function)触发或将函数绑定到被选元素的双击事件$(selector).focus(function)触发或将函数绑定到被选元素的获得焦点事件$(selector).mouseover(function)触发或将函数绑定到被选元素的鼠标悬停事件事件处理放置在单独的.js文件中：

<head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="my_jquery_functions.js"></script></head>

例子：为方便，所有事件代码均放置在head中。

<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript"><strong>$(document).ready(function(){  $("button").click(function(){    $("p").hide();  });</strong>});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button>Click me</button></body></html>

参照：http://www.w3school.com.cn/jquery/jquery_events.asp

0 0