jQuery

一、简介

1、什么是jQuery

JavaScript的框架，是一套工具库。简化了JavaScript的功能实现。可以使得开发者写更少的代码，却做更多的事-write less do more。

可以兼容不同的浏览器

JQuery是一个工具库，是对JS的代码进行了一次封装

JS代码和JQuery代码对比：

JS：
	通过js来获取页面上的一个div:
		document.getElementById("d1")
JQuery:
	通过JQ来获取页面上的一个div:
		$("#d1")

2、jQuery功能

jQuery库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改

3、安装

有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。 jquery-1.8.3.js
Development version - 用于测试和开发（未压缩，是可读的代码） jquery-1.8.3.min.js

1
2
3

<head> 
	<script src="jquery-1.10.2.min.js"></script>    <!--引用jquery库-->
</head>

4、初识jQuery

<head>
	<title>初识jQuery</title>
	<meta charset="utf-8">
	<script src="jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
        function myclick()
        {
            $("#pid").hide()   //获取id为pid的标签，并将其隐藏
        }
	</script>
</head>

<body>
	<p id="pid">做一个决定，并不难，难的是付诸行动，并且坚持到底。</p>
	<input type="button" name="" value="点击" onclick="myclick()">
</body>

二、jQuery选择器

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

jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素。

jQuery 中所有选择器都以美元符号开头：$()。

1、基本选择器

1.1 元素选择器

1	$("p").hide(); // 所有的p标签都被隐藏

1.2 #id选择器

1	$("#test"); //id值为test的标签

1.3 .class选择器

1	$(".test"); //类名为test的标签

1.4 *全选择器

1	$("*"); //所有的标签，全文档

1.5 多选择器共用

var p = $("p.pc")        //p标签且类名为pc的标签

var p = $("p#pid")        //p标签且id为pid的标签


var p = $("div,p")         //多个标签同时获取，用逗号分隔

1.6 jQuery对象与DOM对象区别

DOM获取元素：

1	document.getElement...(xxx) //返回DOM对象

jQuery获取元素：

1	$("xxx") //返回jQuery对象

都是对一个或多个标签的封装，都指向一个或多个标签，只是支持的功能不一样，DOM对象和Jquery对象都有各自的方法

jQuery对象与DOM对象相互转换

DOM –> jQuery

1
2
3

var div = document.getElementById("div_1");   //DOM对象

var div_jq = $(div)        //jquery对象

jQuery –> DOM

var div = $(div)        //jquery对象

var div = div.get(0)      //DOM对象

var div  = div[0]          //DOM对象

2、层级选择器

最好select1使用id选择

2.1 后代选择器派生选择器

$(“selector1 selector2”) 中间有空格

1 2	$("div .a"); //选择所有的div，其中样式类为a的后代 $("div .a input"); //选择所有的div，其中样式类为a的后代，再选择这些后代的input后代标签

2.2 儿子选择器

$(“selector1 > selector2”); 中间为大于号

1
2
3

$("span > input");   //所有的span的input子标签

$("div span>input"); //所有的div下的span的input子标签

2.3 毗邻

$(“selector1+selector2”) 中间为加号

1
2
3

$("div+p") ;  //紧邻div的p标签

$("div+p+input")  //紧邻div的p标签紧邻的input标签

2.4 弟弟

$(“selector1~selector2”) 中间为破折号

1	$("div~p") ; //紧邻div后的所有p标签

3、基本过滤选择器

：first 选出匹配到的标签中的第一个标签

var p = $("div>b>p:first")
p.hide()                       //将div下的b标签下的第一个p标签隐藏


<div>
	<b >
		<p id="pid" class="a">1.做一个决定，并不难，难的是付诸行动，并且坚持到底。</p>
		<p id="pid2">2.做一个决定，并不难，难的是付诸行动，并且坚持到底。</p>
	</b>
</div>

：last 选出匹配到的标签中的最后一个标签

1	$("div>p:last") //div标签下的所有p标签中的第一个

：eq(index) 选出对应index索引值的标签 index从0开始

1	$("div>p:eq(1)") //div下的所有p标签中索引值为1的标签

：gt(index) 选出索引大于index的元素

1	$("div>input:gt(1)"); //div下所有input子标签中索引大于1的

：lt(index) 选出索引小于index的元素

1	$("div>input:lt(1)");//div下所有input子标签中索引小于1的

：odd 选出索引值为奇数的元素

1	$("div>input:odd");//div下所有input子标签中索引为1,3,5..的

：even 选出索引值为偶数的元素

1	$("div>input:odd");//div下所有input子标签中索引为2,4,6..的

：not(selector) 选出selector不能匹配到的元素

1
2
3

$("div>input:not(.a)");  //div下所有input子标签中样式类名不是a的 
$("#abc>li:not(#a)");    //id为abc的标签下的li子标签中id不是a的
$("#abc>li:not(:eq(2))");//id为abc的标签下的li子标签中索引不是2的

4、内容过滤选择器（了解）

：contains 模糊匹配 (自己含有，或后代含有)

1	$("div:contains('2')") div或div下内容包括2的标签

：empty 没有内容的标签

1	$("p:empty") //没有内容的p标签

：parent 包含子元素或文本内容

1	$("p:parent") //有文本内容或子标签的p标签

：has(selector) 拥有某种后代的标签

1	$("div:has('p')") //有p标签的div标签

5、属性过滤选择器

$("[name]") 有name属性的
$("[name='zhj']") name属性值为zhj的
$("[value='male']") value属性值为male的
$("[type='text']") type属性值为text的

1	$("div[name='abc']"); //div标签且name为abc

6、可见性过滤选择器

:visible 可见元素
:hidden 隐藏元素

<script type="text/javascript">
    function myclick()
    {
	    $("div p:empty").hide();
	    console.log($("div p:visible")); 
    }
</script>

<div>
	<p id="pid" class="a">1.做一个决定，并不难，难的是付诸行动，并且坚持到底。</p>
	<p id="pid2">2.做一个决定，并不难，难的是付诸行动，并且坚持到底。</p>
	<p></p>
</div>

<input type="button" name="" value="点击" onclick="myclick()">

jQuery对象遍历

var plist = $(":input");
for(var i = 0; i<plist.size();i++)
{
    var pd = plist.get(i);      //DOM对象
    var pq = plist.eq(i);       //jquery对象
    console.log($(pd).val());
    console.log(pq.val());
}

或者

var ps = $("div p");
ps.each(function(i){    //i为循环变量 0，1，2...
 	console.log(this)   //this为当前遍历到的每一个DOM对象
});

三、jQuery事件

1、事件注册的方式

基于标签：和之前JS中使用方式一致,Jquery未加干涉
基于编程：Jquery提供了全新的API

$(document).ready(function(){
	$("#btn_1").click(function(event){        
		console.log($(this).val());           //this为当前触发事件的标签的DOM对象
		console.log(this.value);
	})
})

Ready事件

等价于onload的作用，用于保证代码的执行在页面加载之后

1 2	$(document).ready(function(){...}); $(function(){...}) //简写

2、jQuery事件函数

鼠标事件	键盘事件	表单事件
click()	keypress()	change()
dblclick()	keydown()	focus()
mouseover()	keyup()	blur()
mousemove()
mouseout()

四、jQuery DOM

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

1、获取内容

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

<script >
	$(function(){
		$("#btn").click(function(){
			var pe = $("div");
			var text = pe.text();         //获得标签文本内容
			console.log(text);    

			var html = pe.html();          //获取标签内容（包括HTML标记）
			console.log(html);

			console.log($(this).val());     //表单value
            
            $(this).val("不要点我");    //修改value值  -- 通过参数  上同
	})
})

</script>

<div>abc
	<p id="pid" class="a">
		1.做一个决定，并不难，难的是付诸行动，并且坚持到底。
	</p>
</div>

<input type="button" value="点我" id="btn">

2、获取属性

jQuery attr() 方法用于获取属性值。

attr("属性名") 获取属性名
attr("属性名","属性值") 设置属性值
attr({属性名1:属性值, 属性名2:属性值,...}) 一次设置多个属性值
removeAttr("属性名") 删除标签的属性
prop 和attr使用一致，作用一致；但prop在获取bool类型属性时(checked,selected)更友好

$(function(){
	 $(":input").click(function(){
	 	var attr =  $("a").attr("href");   //获取href属性值
	 	console.log(attr);

 	 $("a").attr("href","http://www.baidu.com"); //修改href属性值
 })

})

<a href="http://www.baizhiedu.com" style="text-decoration: none" target="_blank">百知教育</a>
<input type="button" value="点我">

3、添加元素

创建标签

1	$('<p>沙河</p>')-->jq标签对象

append() - 在被选元素最后一个位置插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

<script >
$(function(){
	 $("#btn").click(function(){
	 	 $("#div_1").append("<p>通过 jQuery，可以很容易地添加新元素/内容。</p>")
	 })
})
//简便写法:在div内部的最前面加一个p标签
$('#d1').prepend('<p>沙河</p>')
</script>

<div id="div_1">
	abc
</div>
<input type="button" value="添加" id="btn">

4、删除元素

remove() - 删除被选元素（及其子元素）
empty() - 清空元素内容

5、jQuery CSS类

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类

通过添加class实现当点击button时将div的文本颜色改为blue，字体改为120px。

<!--样式表-->
<style type="text/css">
	.blue{
		color: blue;
		font-size: 120px;
	}
</style>

<!--jquery代码-->
<script>
$(function(){
	 $("#btn").click(function(){
	 	 $("#div_1").addClass("blue")
	 })
})
</script>

<!--HTML-->
<div id="div_1">
	这是一个文本
</div>
<input type="button" value="添加" id="btn">

6、css( )方法

css() 方法设置或返回被选元素的一个或多个样式属性。

css("样式属性名") 获取样式属性值
css("样式属性名"，"样式属性值") 设置样式属性值
css({"样式属性名1":"样式属性值","样式属性名2":"样式属性值",..}) 设置多个样式属性值

1
2
3

$("#div_1").css("color","blue");          //设置css样式属性值
console.log($("#div_1").css("color"));    //获取css样式属性值
$("#div_1").css({"background-color":"blue","color":"white","font-size":"50px"}); //一次设置多个属性

补充(了解)：

使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

//ul 给所有的内部li加点击事件     
$('#u1').on('click','li',function () {
         console.log(this)
  })

1	<script src="https://code.jquery.com/color/jquery.color-2.2.0.min.js" integrity="sha256-aSe2ZC5QeunlL/w/7PsVKmV+fa0eDbmybn/ptsKHR6I=" crossorigin="anonymous"></script>

动画(了解)：

//$('div').hide(3000)
        // $('div').toggle(3000)
        // $('div').slideUp(3000)
        // $('div').slideToggle(3000)
        // $('div').fadeIn(3000,0.1)
        // $('div').fadeToggle(3000,function () {
        //     alert('hehe')
        // })

获取上一个兄弟 prev()
获取下一个兄弟 next()
获取父标签 parent()
获取子标签 children()
.eq(index)选择索引为index的jquery对象

Hexo

jQuery

一、简介

1、什么是jQuery

2、jQuery功能

3、安装

4、初识jQuery

二、jQuery选择器

1、基本选择器

1.1 元素选择器

1.2 #id选择器

1.3 .class选择器

1.4 *全选择器

1.5 多选择器共用

1.6 jQuery对象与DOM对象区别

2、层级选择器

2.1 后代选择器派生选择器

2.2 儿子选择器

2.3 毗邻

2.4 弟弟

3、基本过滤选择器

4、内容过滤选择器（了解）

5、属性过滤选择器

6、可见性过滤选择器

三、jQuery事件

1、事件注册的方式

2、jQuery事件函数

四、jQuery DOM

1、获取内容

2、获取属性

3、添加元素

4、删除元素

5、jQuery CSS类

6、css( )方法

你的赏识是我前进的动力

jQuery

一、简介

1、什么是jQuery

2、jQuery功能

3、安装

4、初识jQuery

二、jQuery选择器

1、基本选择器

1.1 元素选择器

1.2 #id选择器

1.3 .class选择器

1.4 *全选择器

1.5 多选择器共用

1.6 jQuery对象与DOM对象区别

2、层级选择器

2.1 后代选择器 派生选择器

2.2 儿子选择器

2.3 毗邻

2.4 弟弟

3、基本过滤选择器

4、内容过滤选择器 （了解）

5、属性过滤选择器

6、可见性过滤选择器

三、jQuery事件

1、事件注册的方式

2、jQuery事件函数

四、jQuery DOM

1、获取内容

2、获取属性

3、添加元素

4、删除元素

5、jQuery CSS类

6、css( )方法

你的赏识是我前进的动力

2.1 后代选择器派生选择器

4、内容过滤选择器（了解）