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 遍历和修改
- AJAX
3、安装
有两个版本的 jQuery 可供下载：
- Production version - 用于实际的网站中，已被精简和压缩。 jquery-1.8.3.js
- Development version - 用于测试和开发（未压缩，是可读的代码） jquery-1.8.3.min.js
<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 元素选择器
$("p").hide(); // 所有的p标签都被隐藏1.2 #id选择器
$("#test"); //id值为test的标签1.3 .class选择器
$(".test"); //类名为test的标签1.4 *全选择器
$("*"); //所有的标签，全文档1.5 多选择器共用
var p = $("p.pc") //p标签且类名为pc的标签
var p = $("p#pid") //p标签且id为pid的标签
var p = $("div p") //div标签下的p标签
var p = $("div,p") //多个标签同时获取，用逗号分隔1.6 jQuery对象与DOM对象区别
DOM获取元素：
document.getElement...(xxx) //返回DOM对象jQuery获取元素：
$("xxx") //返回jQuery对象都是对一个或多个标签的封装，都指向一个或多个标签，只是支持的功能不一样，DOM对象和Jquery对象都有各自的方法
- jQuery对象与DOM对象相互转换
- DOM --> jQuery
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、层级选择器
2.1 后代选择器
$(“selector1 selector2”) 中间有空格
$("div .a"); //选择所有的div，其中样式类为a的后代
$("div .a input"); //选择所有的div，其中样式类为a的后代，再选择这些后代的input后代标签2.2 父子选择器
$(“selector1 > selector2”); 中间为大于号
$("span > input"); //所有的span的input子标签
$("div span>input"); //所有的div下的span的input子标签2.3 后续紧邻兄弟
$(“selector1+selector2”) 中间为加号
$("div+p") ; //紧邻div的p标签
$("div+p+input") //紧邻div的p标签紧邻的input标签2.4 后续所有兄弟
$(“selector1~selector2”) 中间为破折号
$("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 选出匹配到的标签中的最后一个标签
$("div>p:last") //div标签下的所有p标签中的第一个- ：eq(index) 选出对应index索引值的标签 index从0开始
$("div>p:eq(1)") //div下的所有p标签中 索引值为1的标签- ：gt(index) 选出索引大于index的元素
$("div>input:gt(1)"); //div下所有input子标签中索引大于1的- ：lt(index) 选出索引小于index的元素
$("div>input:lt(1)");//div下所有input子标签中索引小于1的- ：odd 选出索引值为奇数的元素
$("div>input:odd");//div下所有input子标签中索引为1,3,5..的：even 选出索引值为偶数的元素
$("div>input:odd");//div下所有input子标签中索引为2,4,6..的- ：not(selector) 选出selector不能匹配到的元素
$("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 模糊匹配 (自己含有，或后代含有)
$("div:contains('2')") div或div下内容包括2的标签- ：empty 没有内容的标签
$("p:empty") //没有内容的p标签- ：parent 包含子元素或文本内容
$("p:parent") //有文本内容或子标签的p标签- ：has(selector) 拥有某种后代的标签
$("div:has('p')") //有p标签的div标签5、属性过滤选择器
-
$("[name]")有name属性的 -
$("[name='zhj']")name属性值为zhj的 -
$("[value='male']")value属性值为male的 -
$("[type='text']")type属性值为text的
$("div[name='abc']"); //div标签且name为abc6、可见性过滤选择器
-
: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()">7、表单选择器
-
:input所有的input元素 -
:checked适用于单选按钮 和 复选框 -
:selected适用于下拉框
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的作用，用于保证代码的执行在页面加载之后
$(document).ready(function(){...});
$(function(){...}) //简写2、jQuery事件函数
鼠标事件 | 键盘事件 | 表单事件 |
click() | keypress() | submit() |
dblclick() | keydown() | change() |
mouseover() | keyup() | focus() |
mousemove() | blur() | |
mouseout() | ||
toggle() | ||
hover() |
//toggle开关 示例
$(function(){
$("#btn_1").toggle(function(){
console.log('abc')
$("#pid").hide()
},
function(){
$("#pid").show()
})
})//hover鼠标复合函数
$(function(){
$("#div_1").hover(function(){ //mouseover时触发
this.style.backgroundColor = 'blue';
},
function(){ //mouseout时触发
$(this).css({"background-color":"green"});
})
})四、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类型属性时(checkd,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、添加元素
- append() - 在被选元素最后一个位置插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
<script >
$(function(){
$("#btn").click(function(){
$("#div_1").append("<p>通过 jQuery，可以很容易地添加新元素/内容。</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":"样式属性值",..})设置多个样式属性值
$("#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() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
$(document).ready(function(){
$("p").on("click",function(){
...
});
$("button").click(function(){
$("<p>This is a new paragraph.</p>").insertAfter("button");
});
});
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
