day37 jQuery基础

什么是jQuery

1、jQuery是一个JavaScript函数库。
2、jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
3、jQuery库包含以下功能：HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和HTML DOM 遍历和修改。

jQuery语法

基础语法

1、美元符号定义 jQuery
2、选择符（selector）“查询"和"查找” HTML 元素
3、jQuery 的 action() 执行对元素的操作。

$(document).ready(function(){ 
// 开始写 jQuery 代码... }
);

$(function(){ 
// 开始写 jQuery 代码... 
})

$常用的几种情况：
$(function() {});//参数是function，说明是入口函数
$(“#btnSetConent”);//参数是字符串，并且以#开头，是一个标签选择，查找id=“btnSetContent”的元素
$(“div”);//查找所有的div元素
$(document).ready(funciton(){})//将document转换成jQuery对象

jQuery 入口函数与 JavaScript 入口函数的区别

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

基本选择器

ID选择器 $(“#id”); 获取指定ID的元素
类选择器 $(“.class”); 获取同一类class的元素
标签选择器 $(“div”); 获取同一类标签的所有元素
并集选择器 $(“div,p,li”); 使用逗号分隔，只要符合条件之一就可。获取所有的div、p、li元素
交集选择器（标签指定式选择器） $(“div.redClass”); 注意选择器1和选择器2之间没有空格，class为redClass的div元素，注意区分后代选择器。

层级选择器

子代选择器	$(“ul>li”);	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素

后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

过滤选择器

:eq（index）	$(“li:eq(2)”).css(“color”, ”red”);	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$(“li:odd”).css(“color”, ”red”);	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”).css(“color”, ”red”);	获取到的li元素中，选择索引号为偶数的元素

筛选选择器（方法）

children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”)，子类选择器
find(selector)	$(“ul”).find(“li”);	相当于$(“ul li”),后代选择器
siblings(selector)	$(“#first”).siblings(“li”);	查找兄弟节点，不包括自己本身。
parent()	$(“#first”).parent();	查找父亲
eq(index)	$(“li”).eq(2);	相当于$(“li:eq(2)”),index从0开始
next()	$(“li”).next()	找下一个兄弟
prev()	$(“li”).prev()	找上一次兄弟
Index()	$(“li”).index()	获取当前的位置（索引）
not()	$("p").not(".intro")	返回不带有类名 "intro" 的所有 <p> 元素

jQuery事件

事件语法
1、单击事件

$("p").click(function(){ 
// 动作触发后执行的代码!! 
});

2、双击事件

$("p").dblclick(function(){
 	$(this).hide(); 
})

3、鼠标进入

$("#p1").mouseenter(function(){ 
alert('您的鼠标移到了 id="p1" 的元素上!'); 
});

4、鼠标离开

$("#p1").mouseleave(function(){ 
alert("再见，您的鼠标离开了该段落。"); 
});

5、获取焦点

$("input").focus(function(){ 
$(this).css("background-color","#cccccc"); 
});

6、失去焦点

$("input").blur(function(){ 
$(this).css("background-color","#ffffff"); 
});

jQuery css() 方法

返回 CSS 属性
如需返回指定的 CSS 属性的值，请使用如下语法：

css("propertyname");
$("p").css("background-color");

设置CSS属性
如需设置指定的 CSS 属性，请使用如下语法：

css("propertyname","value");
$("p").css("background-color","yellow");

设置多个CSS属性
如需设置多个 CSS 属性，请使用如下语法：

css({"propertyname":"value","propertyname":"value",...});
$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery css类

addClass()
向被选元素添加一个或多个类

.important { font-weight:bold; font-size:xx-large; } 
.blue { color:blue; }
$("button").click(function(){ 
$("h1,p").addClass("blue");
 	$("div").addClass("important"); 
});

removeClass()
从被选元素删除一个或多个类

$("button").click(function(){ $("h1,h2,p").removeClass("blue"); });

toggleClass()
对被选元素进行添加/删除类的切换操作

$("button").click(function(){ $("h1,h2,p").toggleClass("blue"); });

eq()
方法返回带有被选元素的指定索引号的元素，索引号从 0 开头，所以第一个元素的索引号是 0（不是 1）。

$(selector).eq(index)

index()
index() 方法返回指定元素相对于其他同级元素的 index 位置。

$("li").click(function(){
  alert($(this).index());
});

not()
Not() 方法返回指定元素之外的元素。

$("input").not(".in1")

节点操作

document的节点类型—9

 console.log(document.nodeType);//9

标签的节点类型—1

var box1 = document.getElementById("box1");
console.log(box1.nodeType);//1

属性的节点类型—2，getAttributeNode(“属性”):获取元素的属性节点

 var attr1 = box1.getAttributeNode("class");
  console.log(attr1.nodeType);//2

文本的节点类型—3，元素的第一个子节点就是文本节点

  console.log(box1.firstChild.nodeType);//3

节点名称

document的节点名称—#document

  console.log(document.nodeName);//#document

标签的节点名称—大写的标签名

 console.log(box1.nodeName);//DIV

属性的节点名称—属性名

  console.log(attr1.nodeName);//class

文本的节点名称—#text

  console.log(box1.firstChild.nodeName);//#text

(4)、节点值
通过nodeValue可以获取元素的节点的值。
document的节点值—null

 console.log(document.nodeValue);//null

标签的节点值—null

  console.log(box1.nodeValue);//null

属性的节点值—属性值

  console.log(attr1.nodeValue);//boxCl

文本的节点值—文本的内容

  console.log(box1.firstChild.nodeValue);//我是div元素

节点之间的关系

父节点–parentNode
父元素节点–parentElement
子节点–childNodes：标签节点、文本节点、注释节点 得到的是伪数组
子元素节点–children :标签节点
第一个子节点–firstChild:文本
第一个子元素节点–firstElementChild：第一个标签
最后一个子节点–lastChild:文本
最后一个子元素节点–lastElementChild: 最后一个标签
上一个子节点–previousSibling:文本
上一个子元素节点–previousElementSibling: 上一个标签
下一个子节点 --nextSibling:文本
下一个子元素节点–nextElementSibling: 下一个标签

插入节点

insertBefore() 方法可在已有的子节点前插入一个新的子节点。
你也可以使用 insertBefore 方法来 插入/移除 已存在的元素。
node.insertBefore(newnode,existingnode) 参数newnode是要插入的节点对象，existingnode是要添加新的节点前的子节点。

创建元素的三种方式

document.write()

弊端：只能往body中添加元素

document.write('<div class="box1">我是div</div>');

innerHTML
弊端：在同级下只能添加一种元素，多个会覆盖

 document.getElementById("divObj").innerHTML = "<p>哈哈哈</p>";
document.createElement()

父元素.appendChild(子元素)：给父元素末尾添加子元素

var pObj = document.createElement("p");
  divObj1.appendChild(pObj);

事件进阶

事件三要素

事件源：是指那个元素引发的事件。比如当你点击cdsn图标的时候，会跳转到cdsn首页。那么这个cdsn图标就是事件源,再或者，可以这样理解， 当你对某个元素执行动作的时候，会触发一系列效果（动画，跳转…），那么这个元素就是事件源。
事件类型：例如，点击，鼠标划过，按下键盘，获得焦点。
事件驱动程序：事件驱动程序即执行的结果，例如，当你点击cdsn图标的时候，会跳转到cdsn首页。那么跳转到cdsn首页就是事件的处理结果。

监听事件

绑定监听事件 addEventListener(“事件的类型”,事件的处理程序)

box1.addEventListener("click", myFunc)
  function myFunc() {
    this.style.backgroundColor = "blue";
  }

解绑监听事件removeEventListener(“事件的类型”,事件的处理程序)

 box1.removeEventListener("click", myFunc);

事件对象

任何事件都有内置对象event，事件对象的兼容性写法为

事件冒泡

什么是冒泡事件
事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
如何阻止冒泡（存在兼容性）
e.stopPropagation(); 谷歌和火狐支持,
window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持

BOM的顶级对象

window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window注意：window下一个特殊的属性 window.name
对话框
alert()
prompt()
confirm()

加载事件

onload事件
onload 事件会在页面或图像加载完成后立即发生。
onload 通常用于 <body> 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。

Location对象

常用属性

// //地址栏上#及后面的内容
// console.log(window.location.hash);
// //主机名及端口号
// console.log(window.location.host);
// //主机名
// console.log(window.location.hostname);
// //文件的路径---相对路径
// console.log(window.location.pathname);
// //端口号
// console.log(window.location.port);
// //协议
// console.log(window.location.protocol);
// //搜索的内容
// console.log(window.location.search);

History对象

//跳转的
my$("btn1").onclick = function () {
window.location.href = "15test.html";
};
//前进
my$("btn2").onclick = function () {
window.history.forward();
};
//后退
my$("btn").onclick = function () {
window.history.back();
};

Navigator对象

通过userAgent可以判断用户浏览器的类型

console.log(window.navigator.userAgent);

//通过platform可以判断浏览器所在的系统平台类型.

//console.log(window.navigator.platform);

定时器

setInteval()

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
clearInteval()
clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

setTimeout()

另一个定时器定义和用法
方法用于在指定的毫秒数后调用函数或计算表达式。