尚硅谷java web零基础入门完整版笔记
变量
什么是变量？ 变量可以存放某些值的内存的命名
JavaScript的变量类型：
数值类型： number
字符串类型： String
对象类型： Object
布尔类型： boolean
函数类型： function
JavaScript里特殊的值：
undefined 未定义，所有js变量未赋予初始值的时候，默认值都是undefined
null 空值
NAN 全称是：Not a Number 非数字，非数值
Js中的定义变量格式：
var 变量名;
var 变量名 =值;
<script type="text/javascript">
var i;
// alert(i); undefined
i = 12;
//typeof()是JavaScript语言提供的一个函数
//它可以取变量的数据类型返回
//alert(typeof(i));//number
i="abc"
//alert(typeof(i))//String
var a = 12;
var b = "abc";
alert(a*b);//NAN 非数字 非数值
</script>
数组
数值定义的方式：
格式：
var 数组名 =[]; //空数值
var 数值名 =[1,‘abc’,true]// 定义数组同时赋值元素
函数
函数的二种定义方式
第一种，可以使用function 关键字来定义函数
使用的格式如下：
function 函数名（形参列表）{
函数体
}
在javaScript语言中，如何定义带有返回值的函数？
只需要在函数体内直接使用returm语句返回值即可
//定义一个无参函数
function fun(){
alert("无参函数fun被调用了");
}
fun();
function fun2(a,b){
alert("有参函数fun2()被调用了 a=>" + a +“,b=>”+b);
}
fun2(12,"abc");
//定义带有返回值的函数
function sum(num1,num2){
var result = num1 +num2;
return result;
}
alert(sum(100,50));
函数的第二种定义方式， 格式如下：
var 函数名 = function(形参列表){函数体}
var fun = function() {
alert("无参函数");
}
fun();//无参函数
var fun2 = function(a,b){
alert("有参函数a="+a+",b="+b);
}
fun2(1,2);//有参函数a=1,b=2
var fun3= function(num1,num2){
return num1 +num2;
}
alert(fun3(100,200));//300
js中的函数不允许重载
隐形参数
函数的arguments 隐形参数（只在function函数内）
就是在function函数中不需要定义，但却可以直接用来获取所有参数的变量，我们管它叫隐形参数。
用处：
//需求 ： 要求编写一个函数 用于计算所有参数相加的和并返回
function num(sum1,sum2){
var result =0;
for(i=0;i<;i++){
if(typeof(arguments[i])=="number"){//判断是不是数组
result += arguments[i];
}
}
return result;
}
alert(num(1,2,3,4,"abc",5,6,7,8,9));//45
JS中的自定义对象
object 形式的自定义对象
对象的定义: var 变量名 = new Object(); //对象实例（空对象） 变量名.属性值 = 值; //定义一个属性 变量名.函数名 = function(){}//定义一个函数
对象的访问： 变量名.属性/函数名();
//对象的定义:
// var 变量名 = new Object(); //对象实例（空对象）
// 变量名.属性值 = 值; //定义一个属性
//变量名.函数名 = function(){}//定义一个函数
var obj = new Object();
= "彭于晏";
=18;
=function(){
alert("姓名："++",年龄："+);
}
// 对象的访问：
// 变量名.属性/函数名();
alert();
alert();
();
{}花括号形式的自定义对象
对象的定义：
var 变量名={ //空对象
属性名：值, //定义一个属性
属性名：值, //定义一个属性
函数名：function(){} //定义一个函数
}
对象的访问： 变量名.属性/函数名();
var obj ={
name:"彭于晏",
age:18,
fun: function(){
alert("姓名："+ + ",年龄：" +);
}
}
alert();
alert();
();
js中的事件
什么是事件？ 事件是电脑输入设备与页面进行交互的响应，我们称之为事件
常用的事件：
| onload 加载完成事件： | 页面加载完成之后，常用于做页面js代码初始化操作 |
|---|---|
| onclick 单击事件： | 常用于按钮的点击响应操作 |
| onblur 失去焦点事件： | 常用于输入框失去焦点后验证其输入内容是否合法 |
| onchange 内容发生改变事件: | 常用于下拉列表和输入框内容发生改变后操作 |
| onsubmit 表单提交事件: | 常用于表单提交前,验证所有表单项是否合法。 |
| onmouseover | 鼠标指针移动到指定的元素上时发生 |
| onmouseout | 用户从一个 HTML 元素上移开鼠标时发生 |
| onkeydown | 用户按下键盘按键 |
查询更多事件：HTML DOM 事件对象 |
事件的注册又分为静态注册和动态注册俩种：
什么是事件的注册（绑定）? 其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。
静态注册事件:通过 html标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。
动态注册事件:是指先通过js代码得到标签的dom对象，然后再通过dom对象.事件名=function()这种形式赋于事件响应后的代码，叫动态注册。
动态注册基本步骤: 1、获取标签对象 2、标签对象事件名= fucntion(){}
onload加载完成事件：
页面加载完成之后，常用于做页面js代码初始化操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//onload事件静态的方法
function onloadfun(){
alert("静态注册onload事件")
}
//onload事件动态的方法
= function(){
alert("动态注册onload事件")
}
</script>
</head>
<!-- <body οnlοad="onloadfun();"> -->
<body>
</body>
</html>
onclick 单击事件：
常用于按钮的点击响应操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function onclickFun(){
alert("静态注册onclick事件")
}
//动态注册onclick事件
= function(){
// 1.获取标签对象
// document 是JavaScript语言提供的一个对象（文档）
// get 获取
// Element 元素（就是标签）
// By 通过....由....经....
// Id id属性
var btnObj =("btn01");
// alert(btnObj);
// 2.通过标签对象.事件名=function(){}
= function(){
alert("动态注册的onclick事件");
}
}
</script>
</head>
<body>
<button οnclick="onclickFun();">按钮1</button>
<button >按钮2</button>
</body>
</html>
onblur 失去焦点事件：
常用于输入框失去焦点后验证其输入内容是否合法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//静态注册onblur失去焦点事件
function onblurFun(){
//console 是控制台对象，是由javaScript语言提供，专门用来向浏览器的控制器打印输出;
//log() 是打印的方法
("静态注册失去焦点事件");
}
//动态注册onblur失去焦点事件事件
= function(){
//1.获取标签对象
var passwordObj = ("password");
//alert(passwordObj);
//2.通过标签对象.事件名 = function(){};
= function(){
("动态注册失去焦点事件");
}
}
</script>
</head>
<body>
用户名：<input type="text" οnblur="onblurFun();" /><br/>
密码：<input type="text" /><br/>
</body>
</html>
onchange 内容发生改变事件:
常用于下拉列表和输入框内容发生改变后操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 静态注册onchange事件
function onchageFun(){
alert("你选择的女神已经改变");
}
//动态注册onchange事件
= function(){
//1.获取标签对象
var selObj = ("select01");
//alert(selObj);
// 2.通过标签对象.事件名 =function(){}
= function(){
alert("你选择的男神已经改变")
}
}
</script>
</head>
<body>
请选择你心目中的女神：
<!-- 静态注册onchange事件 -->
<select name="" οnchange="onchageFun();">
<option>--女神--</option>
<option>迪丽热巴</option>
<option>古力娜扎</option>
<option>小黑</option>
</select>
<br/>
请选择你心目中的男神：
<!-- 动态注册onchange事件 -->
<select >
<option>--男神--</option>
<option>Dexter</option>
<option>彭于晏</option>
<option>张艺兴</option>
<option>林一</option>
</select>
</body>
</html>
onsubmit 表单提交事件:
常用于表单提交前,验证所有表单项是否合法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 静态注册表单提交事件
function onsubmitFun(){
//要验证所有表单项是否合法，如果有一个不合法就阻止表单提交
alert("静态注册表单提交事件----发现不合法");
return false;
}
//动态注册表单提交事件
= function(){
// 1.获取标签事件
var formObj = ("form01");
//alert(formObj);
= function(){
//要验证所有表单项是否合法，如果有一个不合法就阻止表单提交
alert("动态注册表单提交事件----发现不合法");
return false;
}
}
</script>
</head>
<!-- return false 可以阻止表单提交 -->
<form action="http://localhost:8080" method="get" οnsubmit="return onsubmitFun();">
<input type="submit" value="静态注册" />
</form>
<form action="http://localhost:8080" method="get" >
<input type="submit" value="动态注册" />
</form>
</body>
</html>
DOM 模型
DOM 全称是 Document Object Model 文档对象模型 大白话，就是把文档中的标签，属性，文本，转换成为对象来管理。 那么 它们是如何实现把标签，属性，文本转换成为对象来管理呢。这就是我们马上要学习的重点。
Document 对象（*重点）
Document 对象的理解：
第一点：Document 它管理了所有的 HTML 文档内容。 第二点：document 它是一种树结构的文档。有层级关系。 第三点：它让我们把所有的标签 都 对象化 第四点：我们可以通过 document 访问所有的标签对象。
什么是对象化？？
举例： 有一个人有年龄：18 岁，性别：女，名字：张某某 我们要把这个人的信息对象化怎么办！ Class Person { private int age; private String sex; private String name; } 那么 html 标签 要 对象化 怎么办？
<body>
<div >div01</div>
</body>
模拟对象化，相当于：
class Dom{ private String id; // id 属性 private String tagName; //表示标签名 private Dom parentNode; //父亲 private List<Dom> children; // 孩子结点 private String innerHTML; // 起始标签和结束标签中间的内容 }
Document 对象中的方法介绍（*重点）
(elementId)
通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值
(elementName)
通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值
(tagname)
通过标签名查找标签 dom 对象。tagname 是标签名
( tagName)
方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名 注：
document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询 如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询 如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName 以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象
getElementsByid方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 需求:当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。<br/>
// 验证的规则是:必须由字母，数字。下划线组成。并且长度是5到12位。
function onclickFun(){
// 1.当我们要操作一个标签的时候,一定要先获取标签对象
var usernameObj = ("username");
//alert(usernameObj);//[ object HTMLInputELement]
//[ object HTMLInputELement]它就是dom对象
var usernameText =;
//如何验证字符串，符合某个规则，需要使用正则表达式技术
var patt = /^\w{5,12}$/;
var userSpanObj =("userspan");
//innerHTML表示起始标签和结束标签中间的内容
//="彭于晏"
//test()方法用于测试某个字符串，是不是匹配我的规则，
if((usernameText)){
//alert("用户名合法!");
="<img src='images/' width='16px' height='16px'/>";
}else{
//alert("用户名不合法");
="<img src='images/' width='16px' height='16px'/>"
}
}
</script>
</head>
<body>
用户名:<input type="text" value="abc123"/>
<span ></span>
<button οnclick="onclickFun();">检验</button>
</body>
</html>
getElementsName方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function onclickAll(){
//让所有复选框都选中
// document. getELementsByName( );是根据指定的name属性查询返回多个标签对象集合
//这个集合的操作跟数组一样
//集合中每个元紊都是dom对象
//这个集合中的元紊顺序是他们在htmL页面中从上到下的顺序
var boxObj = ("box");
//checked表示复选框的选中状态。如果选中是true，不选中是faLsel
//checked这个属性可读，可写
for(var i=0; i<;i++){
boxObj[i].checked = true;
}
}
function onclickNo(){
var boxObj =("box");
for(var i=0; i<;i++){
boxObj[i].checked = false;
}
}
function onclickF(){
var boxObj = ("box");
for(var i=0; i<;i++){
boxObj[i].checked = ! boxObj[i].checked;
}
}
</script>
</head>
<body>
兴趣爱好：
<input type="checkbox" name="box" value="c++" />c++
<input type="checkbox" name="box" value="java" />java
<input type="checkbox"name="box" value="js" />js
<br />
<button οnclick="onclickAll()">全选</button>
<button οnclick="onclickNo()">全不选</button>
<button οnclick="onclickF()">反选</button>
</body>
</html>
getElementsByTagName方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function onclickAll(){
var inputs =("input");
for(var i =0;i<;i++){
inputs[i].checked = true;
}
}
</script>
</head>
<body>
兴趣爱好：
<input type="checkbox" name="box" value="c++" />c++
<input type="checkbox" name="box" value="java" />java
<input type="checkbox"name="box" value="js" />js
<br />
<button οnclick="onclickAll()">全选</button>
<button οnclick="onclickNo()">全不选</button>
<button οnclick="onclickF()">反选</button>
</body>
</html>
createElement方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript"
= function () {
// 现在需要我们使用 js 代码来创建 html 标签，并显示在页面上
// 标签的内容就是：<div>彭于晏，你好</div>
var divObj = ("div"); // 在内存中 <div></div>
var textNodeObj = ("彭于晏，你好"); // 有一个文本节点对象 彭于晏，你好
//文本添加子节点
(textNodeObj); // <div>彭于晏，你好</div>
// = "彭于晏，你好"; // <div>彭于晏，你好</div>,但，还只是在内存中
// 添加子元素
(divObj);//要在加载完成事件里面才可以用
}
</script>
</head>
<body>
</body>
</html>
节点的常用属性和方法
节点就是标签对象
方法：
通过具体的元素节点调用 getElementsByTagName() 方法，获取当前节点的指定标签名孩子节点 appendChild( oChildNode ) 方法，可以添加一个子节点，oChildNode 是要添加的孩子节点
属性：
childNodes 属性，获取当前节点的所有子节点 firstChild 属性，获取当前节点的第一个子节点 lastChild 属性，获取当前节点的最后一个子节点 parentNode 属性，获取当前节点的父节点 nextSibling 属性，获取当前节点的下一个节点 previousSibling 属性，获取当前节点的上一个节点 className 用于获取或设置标签的 class 属性值 innerHTML 属性，表示获取/设置起始标签和结束标签中的内容 innerText 属性，表示获取/设置起始标签和结束标签中的文本
DOM练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
= function() {
//1.查找#bj 节点
var btn01Ele = ("btn01");
= function(){
var bjObj = ("bj");
alert();
}
//2.查找所有 li 节点
var btn02Ele = ("btn02");
btn02Ele.οnclick=function(){
var liObj =("li");
alert();
}
//3.查找 name=gender 的所有节点
var btn03Ele = ("btn03");
= function() {
var genderObj =("gender");
alert();
};
//4.查找#city 下所有 li 节点
var btn04Ele = ("btn04");
= function() {
//1 获取 id 为 city 的节点
var cityObj = ("city").getElementsByTagName("li");
//2 通过 city 节点.getElementsByTagName 按标签名查子节点
alert();
};
//5.返回#city 的所有子节点
var btn05Ele = ("btn05");
= function() {
//1 获取 id 为 city 的节点
//2 通过 city 获取所有子节点
alert(("city").);
};
//6.返回#phone 的第一个子节点
var btn06Ele = ("btn06");
= function(){
// 查询 id 为 phone 的节点
alert( ("phone"). );
};
//7.返回#bj 的父节点
var btn07Ele = ("btn07");
= function() {
//1 查询 id 为 bj 的节点
var bjObj = ("bj");
//2 bj 节点获取父节点
alert();
};
//8.返回#android 的前一个兄弟节点
var btn08Ele = ("btn08");
= function() {
// 获取 id 为 android 的节点
// 通过 android 节点获取前面兄弟节点
alert( ("android"). );
};
//9.读取#username 的 value 属性值
var btn09Ele = ("btn09");
= function() {
alert(("username").value);
};
//10.设置#username 的 value 属性值
var btn10Ele = ("btn10");
= function() {
("username").value = "彭于晏 你好";
};
//11.返回#bj 的文本值
var btn11Ele = ("btn11");
= function() {
//alert(("city").innerHTML);
alert(("city").innerText);
};
};
</script>
</head>
<body>
<div >
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul >
<li >北京</li>
<li>上海</li>
<li>深圳</li>
<li>首尔</li>
</ul>
<br>
<br>
<p>
你喜欢哪款游戏?
</p>
<ul >
<li >CF</li>
<li>CSGO</li>
<li>LOL</li>
<li>Steam</li>
</ul>
<br />
<br />
<p>
你手机的操作系统是?
</p>
<ul ><li>IOS</li><li >Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input type="radio" name="gender" value="male" />
Male
<input type="radio" name="gender" value="female" />
Female
<br>
<br>
name:
<input type="text" name="name" value="abcde" />
</div>
</div>
<div >
<div><button >查找#bj 节点</button></div>
<div><button >查找所有 li 节点</button></div>
<div><button >查找 name=gender 的所有节点</button></div>
<div><button >查找#city 下所有 li 节点</button></div>
<div><button >返回#city 的所有子节点</button></div>
<div><button >返回#phone 的第一个子节点</button></div>
<div><button >返回#bj 的父节点</button></div>
<div><button >返回#android 的前一个兄弟节点</button></div>
<div><button >返回#username 的 value 属性值</button></div>
<div><button >设置#username 的 value 属性值</button></div>
<div><button >返回#bj 的文本值</button></div>
</div>
</body>
</html>
RegExp 对象
RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。
修饰符
| 修饰符 | 描述 |
|---|---|
| i | 执行对大小写不敏感的匹配。 |
| g | 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 |
| m | 执行多行匹配。 |
方括号
方括号用于查找某个范围内的字符：
| 表达式 | 描述 |
|---|---|
| [abc] | 查找方括号之间的任何字符。 |
| [^abc] | 查找任何不在方括号之间的字符。 |
| [0-9] | 查找任何从 0 至 9 的数字。 |
| [a-z] | 查找任何从小写 a 到小写 z 的字符。 |
| [A-Z] | 查找任何从大写 A 到大写 Z 的字符。 |
| [A-z] | 查找任何从大写 A 到小写 z 的字符。 |
| [adgk] | 查找给定集合内的任何字符。 |
| [^adgk] | 查找给定集合外的任何字符。 |
| (red|blue|green) | 查找任何指定的选项。 |
元字符
元字符（Metacharacter）是拥有特殊含义的字符：
| 元字符 | 描述 |
|---|---|
| . | 查找单个字符，除了换行和行结束符。 |
| \w | 查找单词字符。单词字符包括:a-z、A-Z、0-9，以及下划线,包含_(下划线)字符。 |
| \W | 查找非单词字符。 |
| \d | 查找数字。 |
| \D | 查找非数字字符。 |
| \s | 查找空白字符。 |
| \S | 查找非空白字符。 |
| \b | 匹配单词边界。 |
| \B | 匹配非单词边界。 |
| \0 | 查找 NUL 字符。 |
| \n | 查找换行符。 |
| \f | 查找换页符。 |
| \r | 查找回车符。 |
| \t | 查找制表符。 |
| \v | 查找垂直制表符。 |
| \xxx | 查找以八进制数 xxx 规定的字符。 |
| \xdd | 查找以十六进制数 dd 规定的字符。 |
| \uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符。 |
量词
| 量词 | 描述 |
|---|---|
| n+ | 匹配任何包含至少一个 n 的字符串。 |
| n* | 匹配任何包含零个或多个 n 的字符串 |
| n? | 匹配任何包含零个或一个 n 的字符串。 |
| n{X} | 匹配包含 X 个 n 的序列的字符串。 |
| n{X,Y} | 匹配包含 X 至 Y 个 n 的序列的字符串。 |
| n{X,} | 匹配包含至少 X 个 n 的序列的字符串。 |
| n$ | 匹配任何结尾为 n 的字符串。 |
| ^n | 匹配任何开头为 n 的字符串。 |
| ?=n | 匹配任何其后紧接指定字符串 n 的字符串。 |
| ?!n | 匹配任何其后没有紧接指定字符串 n 的字符串。 |
<script type="text/javascript">
//要求字符串，从头到尾都必须完全匹配
var patt =/^a{3,5}$/;
var str = "aaaaa";
alert((str));//true
</script>
RegExp 对象属性
| 属性 | 描述 | FF | IE |
|---|---|---|---|
| global | RegExp 对象是否具有标志 g。 | 1 | 4 |
| ignoreCase | RegExp 对象是否具有标志 i。 | 1 | 4 |
| lastIndex | 一个整数，标示开始下一次匹配的字符位置。 | 1 | 4 |
| multiline | RegExp 对象是否具有标志 m。 | 1 | 4 |
| source | 正则表达式的源文本。 | 1 | 4 |
RegExp 对象方法
| 方法 | 描述 | FF | IE |
|---|---|---|---|
| compile | 编译正则表达式。 | 1 | 4 |
| exec | 检索字符串中指定的值。返回找到的值，并确定其位置。 | 1 | 4 |
| test | 检索字符串中指定的值。返回 true 或 false。 | 1 | 4 |
支持正则表达式的 String 对象的方法
| 方法 | 描述 | FF | IE |
|---|---|---|---|
| search | 检索与正则表达式相匹配的值。 | 1 | 4 |
| match | 找到一个或多个正则表达式的匹配。 | 1 | 4 |
| replace | 替换与正则表达式匹配的子串。 | 1 | 4 |
| split | 把字符串分割为字符串数组。 | 1 | 4 |
jQuery 介绍
什么是 jQuery ?
jQuery，顾名思义，也就是 JavaScript 和查询（Query），它就是辅助 JavaScript 开发的 js 类库。
jQuery 核心思想！！！
它的核心思想是 write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。
jQuery 流行程度
jQuery 现在已经成为最流行的 JavaScript 库，在世界前 10000 个访问最多的网站中，有超过 55%在使用jQuery。
jQuery 好处！！！
jQuery 是免费、开源的，jQuery 的语法设计可以使开发更加便捷，例如操作文档对象、选择 DOM 元素、制作动画效果、事件处理、使用 Ajax以及其他功能。
jQuery 的初体验
需求：使用 jQuery 给一个按钮绑定单击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../script/jquery-1.7."></script>
<script type="text/javascript">
$(function(){//表示页面加载完成之后，相当于window.οnlοad=function(){}
var $btn01Obj = $("#btn01");//表示按id查询标签对象
$(function(){//绑定单击事件
alert("jQuery的单击事件");
});
});
</script>
</head>
<body>
<button >SayHello</button>
</body>
</html>
常见问题？
1、使用 jQuery 一定要引入 jQuery 库吗？ 答案： 是，必须
2、jQuery 中的$到底是什么？ 答案： 它是一个函数
3、怎么为按钮添加点击响应函数的？
答案： 1、使用 jQuery 查询到标签对象 2、使用标签对象.click(function(){});
jQuery 核心函数
$ 是 jQuery 的核心函数，能完成 jQuery 的很多功能。$()就是调用$这个函数
1、传入参数为 [ 函数 ] 时：
表示页面加载完成之后。相当于 = function(){}
2、传入参数为 [ HTML 字符串 ] 时：
会对我们创建这个 html 标签对象
3、传入参数为 [ 选择器字符串 ] 时：
$(“#id 属性值”); id 选择器，根据 id 查询标签对象
$(“标签名”); 标签名选择器，根据指定的标签名查询标签对象
$(“.class 属性值”); 类型选择器，可以根据 class 属性查询标签对象
4、传入参数为 [ DOM 对象 ] 时：
会把这个 dom 对象转换为 jQuery 对象
jQuery 对象和 dom 对象区分
Dom 对象
1.通过 getElementById()查询出来的标签对象是 Dom 对象 2.通过 getElementsByName()查询出来的标签对象是 Dom 对象 3.通过 getElementsByTagName()查询出来的标签对象是 Dom 对象 4.通过 createElement() 方法创建的对象，是 Dom 对象 DOM 对象 Alert 出来的效果是：[object HTML 标签名 Element]
jQuery 对象
5.通过 JQuery 提供的 API 创建的对象，是 JQuery 对象
<script>
$(function(){
alert($("<h1><h1>"));
});
</script>
6.通过 JQuery 包装的 Dom 对象，也是 JQuery 对象
<script type="text/javascript">
$(function(){
var btnobj = ("btn01");
alert($(btnobj));
});
</script>
7.通过 JQuery 提供的 API 查询到的对象，是 JQuery 对象
<script type="text/javascript">
$(function(){
alert($("#btn01")); id查询
alert($("button")); 标签名查询
});
</script>
<body>
<button >按钮</button>
</body>
jQuery 对象 Alert 出来的效果是：[object Object]
Dom 对象和 jQuery 对象互转
dom 对象转化为 jQuery 对象（*重点）
1、先有 DOM 对象 2、$( DOM 对象 ) 就可以转换成为 jQuery 对象
alert($(("btn01")));
jQuery 对象转为 dom 对象（*重点）
1、先有 jQuery 对象 2、jQuery 对象[下标]取出相应的 DOM 对象
alert($(("btn01"))[0]);
JQuery选择器
基本选择器
-
#ID 选择器：根据 id 查找标签对象
-
.class 选择器：根据 class 查找标签对象
-
element 选择器：根据标签名查找标签对象
-
*选择器：表示任意的，所有的元素
-
selector1，selector2 组合选择器：合并选择器 1，选择器2的结果并反回
#表示标签名必须是 p 标签，而且 class 类型还要是 myClass
层级选择器
| 层级 | 解释 |
|---|---|
| ancestor descendant | 后代选择器 ：在给定的祖先元素下匹配所有的后代元素 |
| parent > child | 子元素选择器：在给定的父元素下匹配所有的子元素 |
| prev + next | 相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素 |
| prev ~ sibings | 之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素 |
过滤选择器
基本过滤器
| :first | 获取第一个元素 |
|---|---|
| :last | 获取最后个元素 |
| :not(selector) | 去除所有与给定选择器匹配的元素 |
| :even | 匹配所有索引值为偶数的元素，从 0 开始计数 查找表格的1、3、5...行（即索引值0、2、4...） |
| :odd | 匹配所有索引值为奇数的元素，从 0 开始计数 查找表格的2、4、6行（即索引值1、3、5...） |
| :eq(index) | 匹配一个给定索引值的元素 |
| :gt(index) | 匹配所有大于给定索引值的元素 |
| :lt(index) | 匹配所有小于给定索引值的元素 |
| :header | 匹配如 h1, h2, h3 之类的标题元素 |
| :animated | 匹配所有正在执行动画效果的元素 |
内容过滤器：
| :contains(text) | 匹配包含给定文本的元素 |
|---|---|
| :empty | 匹配所有不包含子元素或者文本的空元素 |
| :parent | 匹配含有子元素或者文本的元素 |
| :has(selector) | 匹配含有选择器所匹配的元素的元素 |
属性过滤器：
| [attribute] | 匹配包含给定属性的元素。 |
|---|---|
| [attribute=value] | 匹配给定的属性是某个特定值的元素 |
| [attribute!=value] | 匹配所有不含有指定的属性，或者属性不等于特定值的元素。 |
| [attribute^=value] | 匹配给定的属性是以某些值开始的元素 |
| [attribute$=value] | 匹配给定的属性是以某些值结尾的元素 |
| [attribute*=value] | 匹配给定的属性是以包含某些值的元素 |
| attrSel1[attrSelN] | 复合属性选择器，需要同时满足多个条件时使用。 |
表单过滤器:
| :input | 匹配所有 input, textarea, select 和 button 元素 |
|---|---|
| :text | 匹配所有 文本输入框 |
| :password | 匹配所有的密码输入框 |
| :radio | 匹配所有的单选框 |
| :checkbox | 匹配所有的复选框 |
| :submit | 匹配所有提交按钮 |
| :image | 匹配所有 img 标签 |
| :reset | 匹配所有重置按钮 |
| :button | 匹配所有 input type=button <button>按钮 |
| :file | 匹配所有 input type=file 文件上传 |
| :hidden | 匹配所有不可见元素 display:none 或 input type=hidden |
表单对象属性过滤器：
| :enabled | 匹配所有可用元素 |
|---|---|
| :disabled | 匹配所有不可用元素 |
| :checked | 匹配所有选中的单选，复选，和下拉列表中选中的 option 标签对象 |
| :selected | 匹配所有选中的 option |
jQuery 元素筛选
| eq() | 获取给定索引的元素 功能跟 :eq() 一样 |
|---|---|
| first() | 获取第一个元素 功能跟 :first 一样 |
| last() | 获取最后一个元素 功能跟 :last 一样 |
| filter(exp) | 留下匹配的元素 |
| is(exp) | 判断是否匹配给定的选择器，只要有一个匹配就返回，true |
| has(exp) | 返回包含有匹配选择器的元素的元素 功能跟 :has 一样 |
| not(exp) | 删除匹配选择器的元素 功能跟 :not 一样 |
| children(exp) | 返回匹配给定选择器的子元素 功能跟 parent>child 一样 |
| find(exp) | 返回匹配给定选择器的后代元素 功能跟 ancestor descendant 一样 |