jQuery(上)

jQuery 简介

1、jQuery 介绍

jQuery 是一个优秀的 Javascript 框架。
jQuery 是轻量级的 JS 库，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
jQuery 是免费、开源的。
jQuery 是一个兼容多浏览器的 Javascript 库，核心理念是 write less，do more（写得更少，做得更多）。

2、jQuery 能干什么

jQuery 使用户能更方便地处理 HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供 AJAX 交互。
jQuery 的语法设计可以使开发者更加便捷，例如操作文档对象、选择 DOM 元素、制作动画效果、事件处理、使用 AJAX 以及其他功能。

3、jQuery的下载和引入

jQuery官网(jquery.com)

引入

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

验证是否引入 jQuery

若控制台出现 ReferenceError:$ is not defined 这样的错误，证明引入 jQuery 失败。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="/js/jquery/jquery.js"></script>
    <script>
        alert($);
    </script>
</head>
<body>
</body>
</html>

PS: $ 与 jQuery 是同一个对象

jQuery 的使用

常用方法

方法	作用
jQuery对象.size()	获取 jQuery 中包含元素的个数
jQuery对象.html([参数])	获取html值, 若`[]`有值则设置html值
jQuery对象.text([参数])	操作元素内的文本，忽略 HTML 标签若`[]`有值则设置text值
jQuery对象.css()	操作元素的 style 属性
jQuery对象.append(子元素)	给元素添加子元素，且是最小的子元素
jQuery对象.after(弟弟元素)	给元素添加弟弟元素
jQuery对象.empty()	删除标签下的所有元素
jQuery对象.remove\|detach()	remove(删除) 和 detach(自杀)
jQuery对象.addClass(“值”)	增加class值
jQuery对象.removeClass(“值”)	删除class值
jQuery对象.prop(“checked/selected”[,true/false])	获取`checked/selected`是否存在, 若`[]`有值则设置值`true/false`(设置或返回被选元素的属性和值)
jQuery对象.css(‘样式名’[, 样式值])	获取css值, 若`[]`有值则设置css值
jQuery对象.val([值])	获取value值, 若`[]`有值则设置value值
jQuery对象.data(‘data-开头属性名’)	获取以data-开头属性名的值
jQuery对象.attr(‘属性名’[,属性值])	获取指定的属性值, 若`[]`有值则设置属性值
jQuery对象.next()	返回下一个兄弟节点
jQuery对象.prev()	返回上一个兄弟节点
jQuery对象.parent([expr])	获取父节点值, 可以根据条件过滤
jQuery对象.each(函数)	函数在遍历找元素，每遍历一个元素执行一次函数
$.inArray(value, 数组对象)	若值存在数组中返回对应的索引，若不存在返回 -1

prop()和attr()的区别

prop()设置/返回的是DOM对象
attr()设置/返回的是html对象

jQuery 选择器

1、作用

jQuery 选择器是 jQuery 类库最重要功能之一，jQuery 提供获取页面元素一种语法。这些选择器的用法和 CSS 的语法非常相似，结合 jQuery 类库的方法你可以很方便快速地定位页面中任何元素，并为其添加响应的行为。

2、选择器的组成

选择器一般由“特殊符号”+“字符串”组成。比如:“#”代表 id，“mydiv”是一个字符串，那么整体 #mydiv 代表的是 id 为 mydiv 的元素对象。

3、如何使用选择器获取元素

语法：$(“选择器”) ，如 $ (“#xiaowen”)。
注意：如果通过 jQuery 方法获取页面中元素，没有查找到，返回值不是 null，返回值为一个空数组 []，所以判断是否获取到元素，通过 jQuery.size() != 0 来判断。

基本选择器

用处

jQuery 最常用，最简单选择器，通过元素的 id、class 或标签等查找元素。在网页中，每个 id 名称只能使用一次[0, 1]，class 允许重复使用 [0, n]

1、id 选择器

#id，用法：**$(“#xiaowen”)** 返回值单个元素的组成的集合。
说明：这个就是直接选择 html 中的 id=“xiaowen”。

2、元素选择器

Element，用法：**$(“div”)** 返回值元素集合。
说明：element 的英文翻译过来是“元素”，所以 element 其实就是 HTML 已经定义的标签元素，例如 div，input，a 等等。

3、类选择器

class，用法：**$(”.myClass“)** 返回值元素集合。
说明：这个标签是直接选择 HTML 代码中 class=”myClass” 的元素或元素组（因为在同一 HTML 页面中 class 是可以存在多个同样值的元素）。

层次选择器

用处

若想通过 DOM 元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素，兄弟元素等，则需要使用层次选择器。

1、ancestor descendant

用法：**$(“form input”) **
说明：在给定的祖先元素下匹配所有后代元素。

2、parent > child

用法：**$(“form > input”)**
说明：在给定的父元素下匹配所有子元素。

3、prev + next

用法：**$(”label + input“)**
说明：匹配所有紧接在 prev 元素后的 next 元素。

4、prev ~ siblings

用法：**$(“form ~ input”)**
说明：匹配 prev 元素之后的所有 siblings 元素。
注意：是匹配之后的元素，不包含该元素在内，并且 siblings 匹配的是和 prev 同辈的元素，其后辈元素不被匹配。

过滤选择器

定义

过滤选择器：通过特定的过滤规则来筛选所需要的 DOM 元素，过滤规则与 CSS 中的伪类选择器语法相同。
该选择器一般以一个冒号（:）开头，按照不同的过滤规则，可分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤，表单对象属性过滤选择器。

用法：**$('input[name=id]')**
说明：匹配input标签且name=id的元素。

用法：**$('option:selected')**
说明：匹配option标签且为selected状态的元素。