JQuery学习
一、JQuery入门
1、JQuery定义
它是一门Javascript 函数库，提供了大量的对基础js方法的封装，它可以简化js的操作，其目的是“写的少，做的多” ，替代一部分繁琐的js代码
2、JQuery作用
JQuery是几乎所有前端框架的基础，例如 Bootstrap 、LayUI ，JQuery UI 等
JQuery还提供了大量的插件，例如表单验证插件，时间控件插件等
JQuery 可以选取元素，操作元素
JQuery 可以操作css
JQuery可以操作动画和特效
JQuery与Ajax 完美结合
3、JQuery的安装
方法一： 在页面上导入 jquery的文件 版本
jquery-1.9.1.min.js (压缩版，可以减少内存)
jquery.js
方式二： 在线引入外部的cdn导入方式
写一个jquery程序
<!-- 1 jquery的页面加载事件 -->
$(document).ready(function(){
// 所有的jquery代码写在这里
alert("这是我的第一个jquery程序");
});
它等价于 window.onload= function(){
}
$(document).ready() 和 window.onload 的区别?
4、JQuery的基础语法
语法： $(选择器).处理事件 ()
或者 jQuery(选择器).处理事件()
问题 由于 jquery的方法 和 js很相似， 容易混淆 ，需要区别对待他们的方法和属性
1、jquery对象 与js原生对象（后续称为 dom对象）的区别 和转换
dom对象转jquery ： $(dom)
jquery对象转dom ： jqueryObj.get(0) 或 jqueryObj[0]
$(function(){
// alert("jquery简写方式");
// jquery对象 $()
var jqueryObj = $("p");
//jquery对象的方法
jqueryObj.css("background-color","red");
// dom对象 加样式
var domObj = document.getElementsByTagName("p")[0];
domObj.style.backgroundColor="yellow";
// jquery对象 转成 dom对象
//var domObj2 = jqueryObj.get(0);
var domObj2 = jqueryObj[0];
domObj2.style.backgroundColor="#990099";
// dom对象 转成jquery对象 $(dom)
var jqueryObj2 = $(domObj2).css("font-size","20px");
});
二、选择器
1、基础选择器
id选择器： #id
标签元素选择器： element \
类样式选择器 ：.cls
并集选择器： selected1,selected2
交集选择器： 无任何符号
//基础 选择器
$("#mydiv").css("border","1px solid red");
//标签选择器
$("div").css("font-size","20px");
// 类样式选择器
$(".cls").css("background-color","yellow");
// *选择器
$("*").css("font-weight","700");
//并集选择器
$("p,div").css("color","red");
2、层级选择器
后代关系 [ancestor descendant] 孙子元素
父子关系 [parent > child] parent的 儿子元素
相邻关系 [prev + next] ： prev 的下一个元素
兄弟关系 [prev ~ siblings] prev之后的同辈的所有元素
// 2 层级选择器
// 后代选择器
$("#parent div").css("color","blue");
//子选择器
$("#parent>div").css("color","green");
// 相邻选择器 下一个相邻 +
// 表示下一个相邻的div
$("#parent+div").css("color","gray");
// 表示下一个任意元素
$("#parent").next().css("color","gray");
// #parent之后的同辈所有元素
$("#parent~").css("background-color","pink");
3、基本筛选
1、:first 选取第一个元素 :last 选取最后一个元素
2：：not(selector):选中不是这个选择器的其他
3、：even () 选择偶数项
4、：odd() 选择奇数项
5、：eq(index) 按索引选中
6、：gt(index) 大于索引的项
7、：lt(index)小于索引的项
8 :focus() 获取焦点的项目
内容选择器
9、：contains(text) 包含指定内容的项
10 、 ：empty 数据为空的项
11、 has(selected) 包含有什么选择器的
12、 ：parent 匹配含有子元素或者文本的元素
可见性
：hidden 选择隐藏的元素
：visible 选择显示的元素
属性选择器 （与css完全一样 ）
-
- [attribute] 包含指定属性的元素
- [attribute=value] 属性等于某value的元素
- [attribute!=value] 属性不等于某value的元素
- [attribute^=value] 以value开头的属性的元素
- [attribute$=value] 以value结尾 的属性的元素
- [attribute*=value] 包含value的属性的元素
- [attrSel1][attrSel2][attrSelN] 交集多个属性
attr和 prop 的区别
attr 表示设置或获取 节点的属性
prop 表示设置或获取 js对象的属性
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();（如'checked','selected','disabled'等）
3.其他则使用attr();
4、 操作属性、文本、值、样式
1、属性
attr（“属性名”,值） 、 removeAttr （“属性名”）
prop（“属性名”，值）、removeProp("属性名")
2、获取和设置值
val([值]);
3、获取和设置 html内容
html([内容])
4、获取和设置 纯文本内容
text([内容]) ;
5、获取和设置 css样式
addClass(样式名)
removeClass(样式名)
5、 文档处理
1、追加文档
append（内容） ： 在元素的内部追加
appendTo(元素) ： 在元素内部追加 （被字句）
// $("p").append("<b>追加的内容</b>");
//也可以这样 节点b标签被添加到p标签中
$("<b>追加的内容</b>").appendTo("p");
prepend(内部)： 在元素的内部最前面追加
after(内容) ： 在元素的后面追加
before(内容) ：在元素的前面追加
三、JQuery的常用事件
1、ready（） 加载事件
2、click （）：单击事件
3、dbclick() : 双击事件
4、hover(fn1,fn2); 鼠标悬停事件 相当于 mouseover 和 mouseout
5、toggle（fn1,fn2,fn3...） 连续点击
toggle() 切换函数
6、鼠标事件 mouseover mouseout mouseleave 等
7、键盘事件 keydown keyup keypress 等
8、提交时间 submit
9、selected 选中事件
10、 blur 失去焦点
11 、 focus 获取焦点
下拉框实现 二级别联动
