JQuery--基础_jquery监听划入-CSDN博客

本文链接：https://blog.csdn.net/weixin_39461487/article/details/110055016

JQuery
一、概述
封装好的JavaScript库

john resig 2008

JQuery宗旨
writeless,do more.

二、安装
1、获取库
www.jquery.com
production（生产环境版本）- 线上（压缩）
development（开发环境版本）- 开发和学习（未被压缩）

2、引入JQuery库
<script src="jquery库地址"></script>

三、JQuery的应用
1、$(document).ready();
或
$();
2、$(selector).action();
selector:选择器
action ：完成的功能。

3、 selector 选择器
- 通配选择器
$("*").css("color","red")
- 元素选择器
$(HTML tag).css("color","red")
- id选择器
$(HTML id的值).css("color","red")
#id
- 类选择器
$(HTML class的值).css("color","red")
.class
- 群组选择器
$(选择器1,选择器2..).css("color","red")

- 子选择器
$(父选择器>子选择器).css("color","red")

- 后代选择器
$(父选择器后代选择器).css("color","red")

- 兄弟选择器(next 1)
$(选择器+兄弟选择器).css("color","red")

- 范兄弟选择器（next all）
$(选择器~兄弟选择器).css("color","red")

- 过滤选择器
$("p:first").css("color","red");   //第一
$("tr:last").css("color","red");   //最后
$("a:eq(n)").css("color","red");   //等于
$("p:odd").css("color","red")   //奇数
$("p:even").css("color","red")   //偶数
$("p:not(排除在外的选择器)).css("color","red")   //排他

四、JQuery操作HTML元素的属性
<a href="http://www.baidu.com">百度</a>
1、获取
$(selector).attr(属性名称);
$("a").attr("href");
2、设置
$(selector).attr(属性名称,属性值);
$(selector).attr({属性名称:属性值[,属性名称:属性值]});
$("a").attr({"href":"index.php","target":"_blank"});
3、删除
$(selector).removeAttr(属性名称);

五、JQuery操作HTML元素的样式
1、获取
$(selector).css(css属性名称)
css属性名称：backgroundColor
background-color
两者都支持。
2、设置
$(selector).css(css属性名称，css属性值)
$(selector).css({属性名称：属性值[,属性名称:属性值]})

六、JQuery操作HTML元素的文本
1、获取
$(selector).html()
$(selector).text()
2、设置
$(selector).html(设置的文本内容)
$(selector).text(设置的文本内容)

html是可以解析HTML标签，但是text是不能解析HTML标签的。

七、JQuery的遍历
父级：
$(selector).parent() //直接父
$(selector).parents() //所有父
$(selector).parentsUntil(父级节点)

子级
$(selector).children()
$(selector).find(子节点) 当子节点为通配符号“*”,找到全部向下子节点。

同胞节点
$(selector).siblings() 所有同胞

$(selector).next() 下一个同胞
$(selector).nextAll() 向下所有的同胞
$(selector).nextUntil(向下同胞节点) 当前选择器到向下同胞节点之间的节点，不含向下同胞节点

$(selector).prev() 上一个同胞
$(selector).prevAll() 向上所有同胞节点
$(selector).prevUntil(向上同胞节点)
当前选择器到向上同胞节点之间的节点，不包括指定的向上同胞节点。

八、JQuery元素的添加
$(selector).append(添加的内容)
在selector原有内容的后面添加。添加的内容在selector里面

$(selector).prepend(添加的内容)
在selector原有内容的前面添加。添加的内容在selector里面

$(selector).before("添加的内容")
在selector选择器的外面前面添加内容

$(selector).after("添加的内容")
在selector选择器的外面后面添加内容

九、JQuery元素的删除
$(selector).remove()
$(selector).empty()
remove和empty的区别：remove删除，empty清空

day02

JQuery
一、JQuery事件处理
click、dblclick、mouserover、mouseout、keypress、keydown、keyup、load、unload、submit、focus、blur、change。
1、事件绑定
$(selector).bind(type[,data],fn)
功能：事件绑定
参数：
type 绑定的事件。事件以字符串形式体现。
data 绑定的数据
fn 事件的处理程序。事件处理程序可以是匿名函数。也可以是自定义函数的名称。

对两个不同的事件，有不同的处理程序
$(selector).bind({
type:fn,type:fn
});

2、简写事件
$(selector).type(fn)
功能：简写事件形式
参数：
type 事件
fn 事件处理程序

3、hover事件
$(selector).hover(fn1,fn2);
功能：鼠标划入划出事件进行了封装
参数：
fn1 响应鼠标划入事件处理程序
fn2 响应鼠标划出事件处理程序

二、JQuery特效
1、hide和show
$(selector).hide([speed])
功能：隐藏选择器
参数：
speed 速度。字符串格式：fast、slow
数值类型，单位是毫秒：例如 1000

$(selector).show([speed])
功能：显示选择器
参数：
speed 速度。字符串格式：fast、slow
数值类型，单位是毫秒：例如 1000

2、淡入和淡出
$(selector).fadeIn([speed])
功能：淡入
参数：
speed 速度。字符串格式：fast、slow
数值类型，单位是毫秒：例如 1000

$(selector).fadeOut([speed])
功能：淡出
参数：
speed 速度。字符串格式：fast、slow
数值类型，单位是毫秒：例如 1000

$(selector).fadeTo([speed],capicaty)
功能：淡出到指定的透明度
speed 速度。字符串格式：fast、slow
数值类型，单位是毫秒：例如 1000

capicaty 淡出的透明度。0~1值越小透明度越高

3、slideUp和slideDown
$(selector).slideUp([speed])
功能：选择器滑上
speed 速度。字符串格式：fast、slow
数值类型，单位是毫秒：例如 1000

$(selector).slideDown([speed])
功能：选择器滑下
speed 速度。字符串格式：fast、slow
数值类型，单位是毫秒：例如 1000

4、动画效果
$(selector).animate({属性名：属性值[,属性名：属性值]})
功能：对选择器产生动画效果
参数：
属性名 css样式的属性名称
属性值 css样式的属性值，要求是数值类型
left:150

5、$(selector).stop()
功能：停止选择器上的特效

三、AJAX
Asynchronous JavaScript And Xml
JavaScript、xmlHttpRequest

优点：
1、提升用户体验
2、节约服务器资源

缺点：
1、对搜索引擎不友好。
2、破坏前进后退按钮。
3、xmlHttpRequest 各种浏览器支持程度不一致。

异步：在发送请求时，可以接收到响应例如：发短信

同步：在发送请求时。不能接收响应。例如：打电话

$(selector).load(url[,data][,fn])
功能：load向url发送ajax请求
参数：
url ajax请求的地址
若后面有参数，则以get形式发送数据

data 发送请求的数据。
以字符串形式给出，则是以get形式发送数据
例如：id=1&username=tom

以POST形式请求数据：
{"id":10,"username":"tom"}

fn 匿名函数。
function(response,status,xhr){
}
response 请求收到的响应
status 请求响应的状态
xhr xmlHttpRequest对象
xhr 内置了response,status
xhr.responseText 响应的文本
xhr.statusText 响应的状态

$.get()和$.post()
$.get(url[,data][,fn])
功能：以异步形式发送ajax请求。请求的数据是以get形式发送。
参数：
url 请求的url地址
data 请求发送的数据，无论何种格式发送数据，
都是以get形式发送数据。
fn 请求的回调函数
匿名函数。
function(response,status,xhr){
}
response 请求收到的响应
status 请求响应的状态
xhr xmlHttpRequest对象
xhr 内置了response,status
xhr.responseText 响应的文本
xhr.statusText 响应的状态

$.post(url[,data][,fn])
功能：以异步形式发送ajax请求。请求的数据是以post形式发送。
参数：
url 异步请求的地址，若发送的请求数据以参数形式体现在url上。则是以get形式发送数据。
data 请求发送的数据,两种格式都叫以post形式发送数据。
fn 请求的回调函数
匿名函数。
function(response,status,xhr){
}
response 请求收到的响应
status 请求响应的状态
xhr xmlHttpRequest对象
xhr 内置了response,status
xhr.responseText 响应的文本
xhr.statusText 响应的状态

$.ajax({
"url":"", //ajax发送请求的地址
"type":"post"/"get" //是以何种方式发送数据。若type没有给出默认是以get形式发送数据
"data": 发送请求的数据。
"success":function(response,status,xhr){
}
response 请求的响应
status 请求的状态
xhr xmlHttpRequest对象

})

获取form表单的值
$(selector).val();

$("form").serialize()
功能：将表单数据序列化
　　例如：username=tom&password=123

四、工具函数
$.trim(string str)
功能：去掉字符串str左右两边的空格

$.each(array,function(key,value){})
功能：遍历数组
参数：
array 准备遍历的数组
key 数组下标
value 数组的值

day03

JQuery
四、工具函数
$.grep(array,function(value,key))
功能：数组元素进行过滤
参数：
array 要进行过滤的数组
value 数组的元素
key 数组的下标（键名称）
返回：
过滤后的数组

$.map(array,function(value,key))
功能：数组元素进行过滤并计算
参数：
array 要进行过滤的数组
value 数组的元素
key 数组的下标（键名称）
返回：
过滤或计算后的数组

$.isArray
$.isNumeric
$.isFunction
功能：对变量类型进行判断
返回：布尔值

$.type(变量)
功能：返回变量的类型
参数：
要进行判断的变量
返回：变量的类型

五、特殊的选择器this
当前发生事件的选择器

六、插件
validate 表单验证插件

$("form").validate();

插件应用的步骤：
1、获取插件
2、引入插件
注意：引入在jQuery库后面引入，也就是先引入jQuery库。
3、插件的应用
参考官网说明。
插件代码
4、引入插件汉化包、或者样式。

前端验证和后端验证的区别
前端验证：
1、优化用户体验
2、减轻服务器负载