**
第一章 JQuery入门
**
目标
jQuery简介
搭建jQuery开发环境
jQuery简单入门
jquery的选择器
一、什么是jQuery
框架：半成品软件
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。
JQuery:封装好的代码库。有一些大牛（官方）嫌弃js用着不好，很多具有特殊功能的代码的集合。就把这些代码写在一个js文件中，名字就叫 jquery.js。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
优点：
1、选择器
2、 优秀的DOM操作
js操作DOM麻烦，用jq操作简化，jq过时了。
3、 完善的事件处理机制
跟js差不多
4、 动画效果
js使用定时器写动画，运动框架，现在因为css的高度发展，css3的出现，直接导致，jq动画过时了。
5、ajax 异步编程 ===》前后台交互
6、链式编程
链式操作是指对发生在同一jQuery对象上的一组动作，可以直接连写而无需重复获得对象，这是jQuery的特色，使得jQuery编码无比优雅
jquery.js框架 已经过时了，因为有了vue.js 框架，但是还是要掌握。
Jquery就是封装好的js 本质上还是js
layui 前端框架
vue 优雨溪 创始人 elementul 美籍华人
二、使用
1、环境搭建
1、
去jquery官网下载jQuery.js文件，然后引入到项目中
2、
hbuilder 里面可以直接创建js文件 然后直接script连接到里面
iQuery语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
jQuery(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询"和"查找” HTML 元素
- jQuery 的 action() 执行对元素的操作/
2、jQuery选择器
主要用来获取元素对象
3、jQuery属性操作
上述方法，如果括号中带有参数那么就表示 设置/修改属性
如果括号中不写参数：就表示获取数据
-
text() - 设置或返回所选元素的文本内容
-
html() - 设置或返回所选元素的内容（包括 HTML 标记）
-
val() - 设置或返回表单字段的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- HBuilder引用板 -->
<script src="new_file.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p><s>dfsf</s></p>
<p class="ppp" id="p">你好哈哈哈</p>
<input value="sss">
<script type="text/javascript">
//$("选择器").html();此时代表获取标签的内容
//$("选择器").html(参数);此时代表修改内容为参数
// 如果括号里面不写数据，就表示取值，如果写数据就等于赋值
alert($("p").html());//<s>dfsf</s>
alert($("p").text());//dfsf你好哈哈哈
//alert($("p")).innerHTML()
//alert($("p").eq(0).text())
//设置获取innerHtml的值
alert($("p:eq(1)").text());//你好哈哈哈
alert($("input").val())//sss
$("p").addClass("pp");//<p class="ppp pp" id="p">你好哈哈哈</p>
alert($("p").attr("class"))//获取属性值//pp
//还可以修改
// attr("参数1","参数2") 此时参数1代表要修改的属性名，参数2代表要修改的属性的值。
$("input").attr("value","attr修改")//<input value="attr修改">
//可以吧pArr的每一个标签的class都设置为aaa
/* pArr.each(function(){
$(this).attr("class","aaa");
}) */
</script>
</body>
</html>
- attr()/prop()-法也用于设置/改变属性值。
这两个方法作用一样，一般来说 可以使用attr()
来操作标签中自定义的属性，prop()一般用来操作标签中本身自带的属性例如（id,class name,value）,自定义的属性
使用prop无法操作;
-
removeProp（） 删除属性
-
addClass（） 数设置元素class属性值
-
removeClass（） 删除元素class属性值
-
hide()–隐藏 ===》display:none;
-
show()–显示 ===》display:block/inline;
-
size()/length–长度
| js | jQ |
|---|---|
| js对象.innerHTML | jq对象.html() |
| js对象.innnerText | jq对象.text() |
| js对象.value | jq对象.val() |
| js对象.setAttribute("",""); | jq对象.attr("","") |
| js对象.length | jq对象.size()/length |
| jq对象.prop(" “,” ")设置/获取，本身就有的属性 |
4、jQuery对象的遍历，。要注意js对象和jQuery对象的区别和转换
案例
$("p").each(function(i,obj){
alert("下标"+i+"的对象"+obj.innerText);
});
$("p").each(function(){
alert("对象"+this.innerText);//表示当前的js对象 可以用js方法
alert($(this).text());//表示当前的jq对象
});
jquery对象和js对象的区别
使用document对象的相关方法来获取HTML元素——js的dom对象
通过jQuery对DOM对象进行封装后产生的对象——jquery对象
js它不能调用jQuery中的html()和val()方法/相关方法和属性；
jquery它不能调用js中的innerHTML和value属性/相关方法和属性。
jquery对象和js对象的互相转换
jQuery提供了两种方式来实现jQuery对象转换成DOM对象，分别是[下标] 和get(索引)方法。
对于一个DOM对象，只需要使用 **$ ( )**把它包裹起来即可转换成jQuery对象，即 $(DOM对象)。
jq对象不能使用js对象的各种方法和属性。
js对象也不能使用jq对象的方法和属性。
var pArr1 = document.getElementsByTagName("p");//取元素集合
for(var i=0;i<pArr1.length;i++){
alert($(pArr1[i]).html());
}
5、jQuery操作css样式
| js | jq |
|---|---|
| 对象.style.属性 = “属性值” | css({“属性”:“属性值”，“属性”:“属性值”})//多属性 |
| css(“属性名”,“属性值”);//单个属性 |
//可以连续设置多个样式 比较方便
$("p").css({
"color":"blue","border":"1px solid red","font-family":"楷体"})
.html("你好嘿嘿嘿")
.attr("class","aaa")
.click(function(){
alert("qqq");
});
6、jQuery事件绑定
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例：
-
在元素上移动鼠标。
-
选取单选按钮
-
点击元素
事件的绑定三种方法：
| $(“选择器”).click(function(){ })；常用 |
|---|
| $(“选择器”).bind(“click”,function(){}) |
| $(“选择器”).on(“click”,function(){});常用 |
推荐使用on
$("p").on("click",function(){
$(this).css("background-color","red")
})
7、jQuery动画效果
</head>
<body>
<p>第一个p标签</p>
<div></div>
<button id="btn1">淡入</button>
<button id="btn2">淡出</button>
<button id="btn3">两者切换</button>
<button id="btn4">滑动展开</button>
<button id="btn5">滑动关闭</button>
<button id="btn6">改变div颜色</button>
<script>
$("div").css({
"border":"1px","background":"red","width":"200px","height":"200px"}).hide()
// fadeIn() 用于淡入已隐藏的元素。
// fadeOut() 用于淡入已隐藏的元素。
// fadeToggle() 用于在淡入和淡出切换。
// slideDown() 用于滑动。
// slideUp() 用于滑动。
$("#btn1").click(function(){
//淡入
$("div").fadeIn(1000)//毫秒值
})
$("#btn2").click(function(){
//淡出
$("div").fadeOut(1000)
})
$("btn3").click(function(){
$("div").fadeToggle(20000)
})//没有成功
$("#btn4").click(function(){
//滑动出
$("div").slideDown(1000)
})
$("#btn5").click(function(){
//滑动消失
$("div").slideUp(1000)
})
$("#btn6").click(function(){
//滑动消失
$("div").animate({
//动画效果 改变 属性值
left:'250px',
width:'250px',
height:'250px'
}).css({
"background":"green"})//注意是大括号的
})
</script>
</body>
总结
使用jq操作 css属性 选择器， 事件 动画效果 区分js和jq 不同的jq
自己百度掌握大量的jQuery选择器方式
基本选择器—掌握
层次选择器—掌握
属性选择器—掌握
表单选择器
表单属性选择器-
过滤选择器—掌握*
