jquery

通过jQuery，您可以选取（查询，query）HTML元素，并对它们执行“操作”（actions）。

jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。

$(this).hide()

演示 jQuery hide() 函数，隐藏当前的 HTML 元素。

$("#test").hide()

演示 jQuery hide() 函数，隐藏 id="test" 的元素。

$("p").hide()

演示 jQuery hide() 函数，隐藏所有 <p> 元素。

$(".test").hide()

演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。

jQuery 元素选择器

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

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

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

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

jQuery 属性选择器

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

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

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

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

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

jQuery CSS 选择器

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

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

$("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" 的元素

jQuery 事件

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

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

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

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

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

<html>

<head>

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

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("p").hide();

  });

});

</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>

jQuery 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。

某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。

jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

JQuery初探的更多相关文章

  1. jQuery初探 jQuery选取和操纵元素的特点

    jQuery初探 jQuery选取和操纵元素的特点 JavaScript选取元素 先来看看不用jQuery的时候我们是怎么处理元素选取的. JavaScript选取元素的时候,可以根据id获取元素,当 ...

  2. JQuery 初探

    放暑假了,终于有时间能学点前端的东西了.JQuery就是我第一个选择,锋利的JQuery.这本书真的很好.下面以一个ToggleButton形式的小例子开场吧. 引入JQuery库 在网页上引用JQu ...

  3. 第二章：jQuery初探

    一.引入jQuery XXXX.js文件 <script>标签 1.版本选择 当前jQuery有两个分支 1.x 支持ie6.7.8 jquery-1.11.2.js:未经过压缩,适合同学 ...

  4. [Web 前端] 026 jQuery 初探

    目录 1. jQuery 简介 2. jQuery 的简单操作 2.1 jQuery 选择器 2.1.1 简介 2.1.2 基础选择器 2.2 过滤获取 2.3 父子关系获取 3. jQuery 元素 ...

  5. jQuery入门、jQuery选择器、jQuery操作

    一.什么是jQuery及如何使用 1.1 jQuery 简介 jQuery是一个兼容多浏览器的javascript函数库(把我们常用的一些功能进行了封装,方便我们来调用,提高我们的开发效率.),核心理 ...

  6. 初探jquery.slimscroll.js和iscroll5.js

    网上关于实现各种滚动效果的插件不胜枚举,这里,我简单介绍一下自己用过的两款比较有代表性的插件: 1.jquery.slimscroll.js,需要先引入jquery类库,主要用于模拟传统的浏览器滚动条 ...

  7. 【初探移动前端开发05】jQuery Mobile (整合版)

    前言 为了方便大家看的方便,我这里将这几天的东西整合一下发出. 里面的例子请使用手机浏览器查看. 什么是jQuery Mobile? jquery mobile是jquery在移动设备上的版本,他是基 ...

  8. 【初探移动前端开发05】jQuery Mobile (下)

    前言 继续我们移动端的学习,今天到了List相关了. 本文例子请使用手机查看 List列表 在移动设备平台下,由于移动设备屏幕比较小,我们又是用手在上面点击的触屏方式,传统的列表模式在手机上就不太友好 ...

  9. 【初探移动前端开发04】jQuery Mobile (中)

    前言 昨天我们一起学习了一部分jquery mobile的知识,今天我们继续. 这些是些很基础的东西,有朋友觉得这个没有其它的好,但是学习下不吃亏嘛,我反正也不会一起学习基础啦. 例子请使用手机查看哦 ...

随机推荐

  1. C++ 代码头注释模板

    /********************************************************************************* *Copyright(C),You ...

  2. SharePoint2010母版页想要的定制

    查找<div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle"用style="disp ...

  3. CEF3开发者系列之CEF3入门

    CEF全称Chromium Embedded Framework,是一个基于Google Chromium 的开源项目.Google Chromium项目主要是为Google Chrome应用开发的, ...

  4. Zlib 在windows上的编译

    1.下载http://www.zlib.net 下载,最新版本1.2.8 2.解压后,实际已提供了在vc下编译的工程,目录为:zlib-1.2.8\contrib\vstudio. 其中的zlibst ...

  5. Enum:Game of Lines(POJ 3668)

    画直线 题目大意:给定一些点集,要你找两点之间的连线不平行的有多少条 数据量比较少,直接暴力枚举,然后放到set查找即可 #include <iostream> #include < ...

  6. js正则表达式替换空格

    str.replace(/^\s+|\s+$/g, '')   解析: str:要替换的字符串 \s : 表示 space ,空格+: 一个或多个^: 开始,^\s,以空格开始$: 结束,\s$,以空 ...

  7. 【XLL API 函数】xlGetBinaryName

    用于返回由 xlDefineBinaryName 函数定义的名称数据句柄.定义的名称和工作簿一起保存,我们可以在任意时间访问这个名称. 原型 Excel12(xlGetBinaryName, LPXL ...

  8. Struts2防止表单重复提交

    1.说明 系统拦截器的应用. 表单重复提交:当使用请求转化进行跳转的时候,存在着表单重复提交的问题. 2.在表单中加入s:token 如果页面加入了struts2的标签,页面的请求必须进入struts ...

  9. oc弹出框显示提示消息

    - (void)ShowHUDTitle:(NSString *)title andDelay:(NSTimeInterval)delayTime { if (HUD) { [HUD removeFr ...

  10. mongochef如何链接有权限的mongodb3.x数据库

    废话不多说,直接上图: 1.打开mongochef 2.打开的界面是这样的: 3.点击connect,上图红色框中的按钮,不要点下拉三角 4.点击New Connection按钮 5.1:上图标注1, ...