Jquery学习总结（一）_jquery.jquery是一个兼容了多个浏览器的javascript框架,它核心理念是write -CSDN博客

本文链接：https://blog.csdn.net/u011955534/article/details/15098197

jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript框架，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

一、Jquery简介

Jquery库可以通过一行简单的标记被添加到网页中

Jquery是一个javascript函数库

Jquery库包含以下特性：

Ø HTML 元素选取

Ø HTML 元素操作

Ø CSS 操作

Ø HTML 事件函数

Ø JavaScript 特效和动画

Ø HTML DOM 遍历和修改

Ø AJAX

Ø Utilities

如何向您的页面添加jquery库：

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

注意：<script>标签应该位于页面的<head>部分

二、jquery语法

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

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

1、美元符号定义jquery

2、选择符(selector).“查询” 和“查找” HTML元素

3、Jquery的action()执行对元素的操作

示例：

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

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $(this).hide();
});
});
</script>
</head>
<body>
<button type="button">隐藏</button>
</body>
</html>

$("#idtest").hide()---隐藏id="idtest"的元素

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>
<body>
<h2>hhh</h2>
<p>ppp</p>
<p id="test">要隐藏的内容</p>
<button type="button">隐藏</button>
</body>

$(".classtest").hide()---隐藏class="classtest"的元素

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
  $("button").click(function()
  {
  $(".test").hide();
  });
});
</script>
</head>
<body>
<h2 class="test">hhh</h2>
<p class="test">classtest</p>
<button type="button">隐藏</button>
</body>

$("p").hide()---隐藏所有<p>元素

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<p>p1</p>
<p>p2</p>
<button type="button">隐藏</button>
</body>

注意：以上例子所有jquery函数都位于document ready函数中，这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
三、jquery选择器

1、jquery选择器

jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。

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

在 HTML DOM 术语中：选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

2、jquery元素选择器

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

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

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

$("p#demo") 选取 id="demo" 的第一个 <p> 元素。

3、jquery属性选择器

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

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

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

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

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

4、jquery CSS选择器

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

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

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

下面给出一些常用的选择器实例：

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	所有 class="intro" 的元素
element	$("p")	所有 <p> 元素
.class.class	$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素

:first	$("p:first")	第一个 <p> 元素
:last	$("p:last")	最后一个 <p> 元素
:even	$("tr:even")	所有偶数 <tr> 元素
:odd	$("tr:odd")	所有奇数 <tr> 元素

:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
:gt(no)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列出 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的 input 元素

:header	$(":header")	所有标题元素 <h1> - <h6>
:animated		所有动画元素

:contains(text)	$(":contains('13')")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的 <p> 元素
:visible	$("table:visible")	所有可见的表格

s1,s2,s3	$("th,td,.intro")	所有带有匹配选择的元素

[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='#']")	所有 href 属性的值等于 "#" 的元素
[attribute!=value]	$("[href!='#']")	所有 href 属性的值不等于 "#" 的元素
[attribute$=value]	$("[href$='.jpg']")	所有 href 属性的值包含 ".jpg" 的元素

:input	$(":input")	所有 <input> 元素
:text	$(":text")	所有 type="text" 的 <input> 元素
:password	$(":password")	所有 type="password" 的 <input> 元素
:radio	$(":radio")	所有 type="radio" 的 <input> 元素
:checkbox	$(":checkbox")	所有 type="checkbox" 的 <input> 元素
:submit	$(":submit")	所有 type="submit" 的 <input> 元素
:reset	$(":reset")	所有 type="reset" 的 <input> 元素
:button	$(":button")	所有 type="button" 的 <input> 元素
:image	$(":image")	所有 type="image" 的 <input> 元素
:file	$(":file")	所有 type="file" 的 <input> 元素

:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素