jQuery -- 知识点回顾篇（一）：初见jQuery -- 基本用法，语法，选择器
1. 使用方法
jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。
网页需要使用到 jQuery 时，需要先在网页中引入 jQuery 的 js文件。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>My Test JQuery</title> ???<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script></head><body></body></html>
2. jQuery 语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法形式： $(selector).action()
例： $("p").hide() - 隐藏所有 <p> 元素
$("#myInfo").hide() - 隐藏所有 id="myInfo" 的元素
写法：
所有 jQuery 函数位于一个 document.ready 的函数中。如下图。
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前就运行函数，操作可能失败。
???$(document).ready(function(){ ???????????// 代码部分写在这里 ????????});也可以简写成下面这样：
??$(function(){ ??????????????// 这里写代码 ???????????});举例：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>My Test JQuery</title> ???<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> ???<script type="text/javascript" > ???????????$(function(){ ??????????$("button").click(function(){ ???????????????$("#myDiv1").html("Hello JQuery World"); ???????????????$("#myDiv1").css("background-color","green"); ???????????}); ???????}); ???</script></head><body> ???<button type="button">点击</button> ???<div id="myDiv1">Hello</div></body></html>
3. 基本选择器
(1) 元素选择器: jQuery 元素选择器基于元素名选取元素。
举例：使用元素选择器选择所有<p>元素，将其隐藏。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>My Test JQuery</title> ???<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> ???<script type="text/javascript" > ???????????$(function(){ ??????????$("button").click(function(){ ???????????????$("p").hide(); ???????????}); ????????????????}); ???</script></head><body> ???<button type="button">点击</button> ???<p>p元素1</p> ???<p>p元素2</p> ???<div id="myDiv1">Hello</div></body></html>
(2) #id 选择器: jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器
举例：使用 #id 选择器选择 id="myDiv1"的元素，将其隐藏。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>My Test JQuery</title> ???<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> ???<script type="text/javascript" > ???????????$(function(){ ??????????$("button").click(function(){ ???????????????$("#myDiv1").hide(); ???????????}); ???????}); ???</script></head><body> ???<button type="button">点击</button> ???<p>p元素1</p> ???<p>p元素2</p> ???<div id="myDiv1">Hello</div></body></html>
(3) .class 选择器: jQuery 类选择器可以通过指定的 class 查找元素。
举例：使用类选择器选择Class=“myClass1”的元素，将其隐藏。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>My Test JQuery</title> ???<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> ???<script type="text/javascript" > ???????????$(function(){ ??????????$("button").click(function(){ ???????????????$(".myClass1").hide(); ???????????}); ???????}); ???</script></head><body> ???<button type="button">点击</button> ???<p>p元素1</p> ???<p>p元素2</p> ???<div id="myDiv1">Hello</div> ???<div Class="myClass1">你好</div></body></html>
jQuery -- 光阴似箭（一）：初见 jQuery -- 基本用法，语法，选择器
原文地址：https://www.cnblogs.com/ChengWenHao/p/JQueryPart1.html