1.JQuery封装了Javascript相关方法的调用,简化js对HTML DOM的操作,是一个js库
2.优点:代码少,容量小,兼容主流浏览器,免费,开源的js库
3.运行平台:记事本,idea,HBuilderx,vs等等
4.引入当前项目下的JQuery相对路径:<scripttype="text/javascript" src="jquery3.5.1.js"></script>
5.代码演示:<script type="text/javascript">
$(document).ready(function(){
alert("hello,JQuery");
})
</script>
$(document):$号是JQuery中的函数名称,表示将js中的document对象转换成JQuery中可使用的对象
ready:是JQuery中的函数,是准备的意思,当js中的DOM对象加载成功后执行ready函数中的内容,相当于js中的onload事件
function():自定义的表示要执行的操作
5.$(document).ready()与$(),window.jquery(),jquery()等价,后边是简写;
6.DOM对象和jQuery对象:
使用js语法创建的对象是dom对象,也叫js对象
使用jQuery语法创建的对象是jQuery对象,注意:jQuery表示的对象都是数组
例如;var jobj=$("#text1");
7.dom对象和jQuery对象可以相互转换:
DOM对象转为jQuery对象 语法:$(dom对象)
jQuery对象转为DOM对象 语法:从数组中获取第一个对象,这个对象就是DOM对象,使用[0]或get[0]
为什么要转换?可以使用对象的方法和属性,不同对象有不同的方法和属性
8.我们习惯在jQuery对象名前加上$,以区分js对象
9.jQuery选择器:
1.ID选择器; 语法:$("#id")
2.class选择器 语法:$(".class样式名")
3.标签选择器 语法:$("标签名")
4.通配符选择器 语法:$("*")
5.组合选择器 语法:$("#id,.class")-->很灵活
6.表单选择器 语法:$(":type属性值") 它通过type属性的属性值来找元素
10.过滤器:在获取到dom对象集合后,根据一些条件来筛选DOM对象,必须和选择器一起使用,语法如下;
1)$("选择器:first") :获取第一个DOM对象--》结果任然是一个jQuery对象
2)$("选择器:last") :获取最后一个对象
3)$("选择器:eq(数组下标)") :获取指定下标的对象(equal)
4)$("选择器:lt(下标)") :获取小于下标的所有对象(less than)
5)$("选择器:gt(下标)") :获取大于下标的所有对象(greate than)
11.表单对象属性过滤器:根据表单对象的状态来过滤,如文本有enabled disabled状态,复选框有 checked 状态 下拉列表有 selected 状态
语法:$("表单选择器:状态") 例如:var obj=$(":text:enabled");var obj2=$(":checkbox:checked");var obj3=$("select>option:selected");
12.如果jobj1是一个jQuery对象数组,那么jobj1[i]就是DOM对象;jquery对象获取值:val() DOM对象获取值:value
13.绑定事件:语法
$("选择器").click(function(){......})
14.on() 绑定事件
语法:$("选择器").on("要绑定的事件",function(){....}) 注意:这里的绑定事件名省去on;区别于js;
15.jQuery中的常用函数:
val 语法:$("选择器").val() 表示获取jQuery数组中的第一个DOM对象的value值
$("选择器").val("赋值") 表示给jQuery中的所有DOM对象的value赋值
text 语法:$("选择器").text() 获取所有的value
$("选择器").text("") 给所有的value赋值
attr 语法:$("选择器").attr("属性","值"); 给其他的属性设置值
remove $("选择器").remove() 将数组中所有的DOM对象及其子对象删除
empty $("选择器").empty(); 将数组中所有的DOM对象的子对象删除
append $("选择器").append("<div>我动态添加的div</div>") 为数组中所有的DOM对象添加自对象
html $("选择器").html() 获取DOM数组中第一个对象的内容
$("选择器").html(...) 设置DOM数组中所有元素的内容
16.each语法:可以对数组,json,DOM数组循环处理,每个成员都会调用一次自定义函数;
语法:$.each(循环的内容,处理函数) :表示使用jQuery中的每个成员都调用一次处理函数,可以理解为$是类名,each是其中的静态方法
处理函树: function(index,element)
语法格式二:jQuery对象.each(function(index,element){.....}) 这种方法就只能遍历jQuery对象了;
17.使用jQuery的函数来实现ajax请求的处理,没有jQuery之前,是哦用XMLRequest做ajax,有4个步骤,jQuery简化了ajax请求的处理,使用三个函数可以实现ajax请求的处理。
1>$.ajax():jQuery中实现ajax的核心函数
2>$.post():使用post方式做ajax请求
3.$.get():使用post方式做ajax请求
$.post()和$.get(),他们在内部都是调用$.ajax()
18.介绍$.ajax()的作用,函数的参数表示请求的URL,请求的方式,参数值等信息。$.ajax()参数是一个json的结构
1.例如:$.ajax({名称:值,名称:值.....})
$.ajax({asyno:true,
contentType:"application/json",
data:{name:"lisi",age:23,
dateType:"json",
error:function(){发生错误时执行},
success:function(data){//data表示responseText,是jQuery处理后的数据},
url:"/one",
type:"get"
}})
2.json 结构的参数说明:
1.async是一个Boolean类型的值,默认是TRUE,表示异步请求,可以不写;
2.contentType;一个字符串,表示从浏览器发送服务端的参数类型,可以不写;
3.data:可以是字符串,数组,json,表示请求的参数和参数值,常用的是json格式的数据
4.dataType:表示【期望】从服务器端返回的数据格式,可选的有:xml,html,text,json,当我们使用$.ajax()发送请求时,会把dataType的值发送给服务端,那我们的Servlet能够读取到dataType的值,就知道你的浏览器需要的是什么类型的数据,name服务端就可以返回你需要的数据格式
5.error:一个function,表示当请求发送错误时执行的函数。定义方式:error.function(){发生错误时执行}
6.success:一个function,请求成功了,从服务端返回了数据,会执行success指定函数,之前使用的XMLRequest对象,当readyState==4&&status==200的时候,
7.url:请求地址
8.type;请求方式,get或者post,不区分大小写,默认是get方式,