前端jquery学习

• jquery

- jquer
见名知意是javaScript和query的意思
引入jquery文件
<script src="jquery-3.3.1.js"></script>
- $符号的含义
$是jquery的别名，$()构造了一个jquery对象，也就是构造函数
$()里面可以存放标签元素来创建元素对象，
$(function(){}) 这样就是自动加载函数

- 选择器
1 基本选择器
2 层次选择器
3 属性选择器
- 基本选择器
元素选择器  $("div").css("color","red")
id选择器  $("#id")
class选择器 $(".类名")
群组选择器 同时选择多个选择器 同时操作  $("h3,div,p,span")
- 层次选择器
通过元素之间的关系来选择 父子 后代 兄弟 相邻
$("M N") === $("M").find("N") 后代选择器
$("M>N") === $("M").children("N")子代选择器
$("M~N")  兄弟选择器
$("M+N") 响铃选择器
- 属性选择器
通过元素的标签来选择
id type value 
示例：$("div[class= nav]") 选择div标签中class属性等于nav的标签

• dom基础

 - dom文档对象模型
dom中有很多方法来操作元素标签dom操作就是元素操作，
-创建元素
$().append(html标签) 将html标签元素添加到父元素内部的子元素末尾中
 - 插入元素
$(A).prepend(B) 将b元素插入到a元素之内的后面
$(A).prependTo(B)将元素插入到a元素之内的前面
 - 删除元素
remove()删除元素标签和内容事件
detach() 不会删除事件
empty() 删除后代元素标签
 - 复制元素
clone()
 - 替换元素
replaceWith()  ab  b替换a
replaceAll()	ab a替换b
 - 属性操作
获取属性，设置属性 删除属性，prop()
1 获取属性 $().attr("属性名") $("#id").attr("src")
2 设置属性 $().attr("名","值")
3 删除属性 $().removeAttr("属性名")
4 prop()获取元素属性和设置元素属性
 - 样式
$().width() 获取
$().width(100px)设置
$().heighe()

• 内容操作

- 操作内容使用jquery来改变文本
1 .html()
2 .text()
3 .val()
- 其中html()和text()是用来操作一般元素
val()是用来操作表单元素内容
- 语法
$().html() 获取
$().html("html")设置
$().text()获取文本内容
$().text("文本内容") 设置文本内容
-表单的值
是通过value属性来设置的，
$().val() 获取值
$().val("内容")设置值

• 事件

- 一个事件包含三个部分 事件主体元素标签  事件类型   事件过程逻辑函数
js中window.onload=function(){} 表示文档加载完成后执行事件函数
jquery中 $().ready(function(){}) ready函数是指表示文档加载完之后在执行一个事件
一般写法是 $(function(){...})
- 事件
1 鼠标事件 $().click(function(){...}) 
鼠标事件还有mouseover指针进入  mouseout 指针离开 mousedown鼠标按下 mouseup鼠标离开
2 键盘事件 keydown 键盘按下  keyup 键盘松开
3 表单事件 focus和blur  select  change 
focus获取焦点 blur失去焦点
select()获取文本内容
$().prop("checked")获取表单单选框 
- 解绑和绑定
on(type,function) 绑定事件
off(type) 解除事件
-合成事件
$().hover(f1,f2)鼠标指针移入和移出
- one() 一次性事件
$().one(type,fun(){...})
- event对象
每一个事件函数对应一个事件对象event对象
event对象中的属性
1 type ：事件类型
2 target ：事件主体
3 keyCode : 获取触发事件的按键 

• 过滤方法

-选择器和方法
除了选择器可以获取标签元素，还有方法来获取元素标签
1 hasClass() 类名寻找 根据元素的class名字来过滤选择 var temp = $("div").hasClass("java") 
			 判断当前div标签元素中class名字是否存在java. 存在怎返回true
2 eq() 下标过滤 $("li").eq(0) 获取下标为0的元素，就是第一个元素， -1就是倒数第一个
3 is() 判断过滤 根据条件来获取元素标签  $().is(":checked")
4 not() 反向过滤 
5 filter(),has() 表达式过滤
filter()可以获取符合条件的元素标签 可以根据选择器过滤，$().filter(".select")
$().filter(function(){...})根据函数的返回值来获取符合条件的元素
has()和filter一样只不过是只能使用选择器来过滤

• 查找方法

-查找方法是以当前所选元素为基础找到符合条件的元素标签，过滤元素是对所选择的元素进行过滤
- 查找祖先元素
.parent() 当前元素的父元素，
.parents()获取当前元素的所有祖先元素
.parentsUnitil()是parents中的一个截取
- 查询后代元素
children() 查找当前元素的子元素 
find()查找当前元素的后代元素
- 查询兄弟元素的哥哥
prev()
prevAll()
- 查询当前元素的弟弟
next()
nextall()
- 查询当前所有兄弟
siblings()

• 函数使用

- 基本操作
$.trim()
$.param() 将数组或是对象转化成字符串
$.each() 遍历数组或是对象，
-检查操作
$.isFunction(val)判断是否为函数
$.isArray(val) 判断是否为数组