文章目录
- 简介
- 简单例子
- DOM对象和JQuery对象
- DOM对象和JQuery对象相互的转换
- 选择器
- 表单选择器
- 过滤器
- 表单属性过滤器
- jquery中给dom对象绑定事件
- 函数
- val
- text
- attr
- remove
- empty
- append
- html
- each
- each单讲
- on()绑定事件
- Ajax的处理
- 参数说明:
- $.get()
- 思维导图
简介
JQuery封装了Javascript相关方法的调用,简化javascript对HTML DOM的操作
- JQuery是js库
库:相当于java的工具类,库是UC能放东西的,Jquery是存放代码的地发放,放的是js代码
简单例子
<!--指定jq库的位置,使用相对路径,当前项目的js目录下的指定文件-->
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
/*
1. $(document) , $是jQuery中的函数名称 , document是函数的参数
作用是document对象变成了 jQuery函数库可以使用的对象
2. ready是jQuery中的函数,是准备的意思,当界面的dom对象加载成功后,
会执行ready函数的内容,ready相当于js中的onLoad事件
3.function()自定义的内容表示onLoad后要执行的内容
*/
$(document).ready(function() {
//自定义功能代码
alert("hello jQuery");
})
</script>快捷定义函数:
$(function(){
//代码内容
})DOM对象和JQuery对象
dom对象,使用javascript的语法创建的对象叫做dom对象,也就是js对象.
var obj = document.getElementById(“txt1”); obj就是一个dom对象,也叫作js对象
JQuery对象:使用jquery语法表示对象叫做jquery对象,注意:jquery表示的对象都是数组.
例如: var jobj = $("#txt1"),jobj就是使用jquery语法所表示的对象.也就是jquery对象.他是一个数组,现在数组中就一个值.
DOM对象和JQuery对象相互的转换
dom对象可以转为jquery,语法: $(dom对象)
jquery对象也可以转为dom对象,语法:从数组中获取第一个对象,第一个对象就是dom对象,使用[0]或者get(0);
比如: var obj = $("#txt")[0]; 或者: var obj = $("#txt").get(0);
为什么要进行dom对象和jquery的转换:目的是要使用对象的党发,或者方法.
dom对象可以使用dom对象的属性和方法,如果你想要使用jq提供的函数没必须是jq的对象才行
一般情况下**,命名jq对象时,为了与dom对象进行区分,习惯以$开头**
选择器
就是一个字符串,用来定位dom对象的.定位了dom对象,就可以通过jquery的函数操作dom
常用的选择器:
- ID选择器:语法 $("#dom对象id值")
通过dom对象的id值定位dom对象,通过id找对象,id在当前界面中是唯一值 - class选择器: 语法 $(".class样式名")
class表示css中的样式,使用样式的名称定位dom对象 - 标签选择器: 语法 $(“标签名称”)
使用标签名称定位dom对象的 - 所有选择器: 语法 $("*")
能够获取所有 - 组合选择器: 语法 $("#one,span")
选择轻的组合,能够控制多个元素
表单选择器
使用标签的type属性值,定位dom对象的方式.
语法:$(":type属性值")
例如:$(":text"),选择的是所有的单行文本框
$(“button”),选择的是所有的按钮
如果一个type有多个,我们可以使用循环读取数组中的值
过滤器
在定位了dom对象后,根据一些条件筛选dom对象
过滤器也是一个字符串,用来筛选dom对象的,过滤器不能单独使用,必须和选择器一起使用
- $(“选择器:first”):第一个dom对象
- $(“选择器:last”):数组中的最后一个dom对象
- $(“选择器:eq(数组的下标)”):获取指定下标的dom对象
- $(“选择器:lt(下标)”):获取小于下标的所有dom对象
- $(“选择器:gt(下标)”):获取大于下标的所有dom对象
表单属性过滤器
根据表单中dom对象的状态的情况,定位dom对象的
- 启用状态:enabled
- 不可用状态:disable
- 选择状态:checked,例如 radio,checkbox
例子:
- 选择可用文本框
$(":text:enable") - 选择不可用的文本框
$(":text:disabled") - 复选框中的元素
$(":checkbox:checked") - 选择指定下拉列表的被选中元素
选择器>option:selected
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
var obj = $(":text:enabled");
//设置jquery数组中所有的dom对和value值
obj.val("hello");
})
$("#btn2").click(function(){
//获取选中的checkbox
var obj = $(":checkbox:checked");
for(var i =0;i<obj.length;i++){
// alert(obj[i].value);
alert($(obj[i]).val());
}
})
$("#btn3").click(function(){
//获取选中的select
var obj = $("#yuyan>option:selected");
alert(obj[0].value);
})
})
</script>
</head>
<body>
<input type="text" id = "txt1" value="text1"/><br>
<input type="text" id = "txt2" value="text2" disabled="true"/><br>
<input type="text" id = "txt3" value="text3"/><br>
<input type="text" id = "txt4" value="text4" disabled="true"/><br>
<input type="checkbox" value="游泳" />游泳<br>
<input type="checkbox" value="健身" checked ="true"/>健身<br>
<input type="checkbox" value="游戏" checked="true" />游戏<br>
<select id = "yuyan">
<option value="java">java</option>
<option value="go" selected="true">go</option>
<option value="python">python</option>
</select><br>
<input type="button" id="btn1" value="设置可用得txt的value是hello" />
<button id="btn2">显示被选中的复选框的值</button><br>
<button id="btn3">显示下拉列表框的值</button><br>jquery中给dom对象绑定事件
- $(选择器).事件名称(事件的处理函数)
$(选择器):定位dom对象,dom对象可以有多个,这些dom对象都绑定事件了
事件名称:就是js中事件去掉on的部分,例如:js中的单击事件onclick,在jquery中的事件名称就是click,都是小写的.
事件的处理函数,就是一个function,当事件发生时,执行这个函数的内容
例如给id是btn的按钮绑定单击事件
$("#btn").click(function(){
alert(“btn按钮单击了”)
})
函数
val
操作DOM对象的value属性
$(选择器).val():无参数调用形式,读取数组中第一个DOM对象的value属性值
$(选择器).val(值):有参形式调用;对数组中所有DOM对象的value属性值进行统一赋值
text
相当于innerText
操作数组中所有dom对象的[文字显示内容属性]
$(选择器).text():无参调用,读取数组中所有DOM对象的文字显示内容,将得到的内容拼接为一个字符串返回
$(选择器).text(值):有参数方式:对数组中所有的DOM对象的文字显示内容进行统一赋值
attr
对val,text之外的其他属性操作
$(选择器).attr(“属性名”):获取DOM数组第一个对象的属性值
$(选择器).attr(“属性名”,“值”):对数组中所有DOM对象的属性都设置为新值
remove
$(选择器).remove():将数组中所有DOm对象及其子对象一并删除(包括界面上的)
empty
$(选择器).empty():将数组中所有DOM对象的子对象删除
append
为数组中所有DOM对象添加子对象
$(选择器).append(“
我动态添加的div
”)
html
设置或返回被选元素的内容(相当于innerHTML);
$(选择器).html():无参数调用方法,获取DOM数组第一个元素的内容
$(选择器).html(值):有参数调用:用于DOM数组中所有元素的内容
innerHTML可获取或设置指定元素标签内的 html内容，从该元素标签的起始位置到终止位置的全部内容(包含html标签)
innerText可获取或设置指定元素标签内的文本值，从该元素标签的起始位置到终止位置的全部文本内容(不包含html标签)
each
each是对数组,json和dom数组等的遍历,对每个元素调用一次函数
语法1:$each(要遍历的对象,function(index,element){处理程序})
语法2:jQuery对象.each(function(index,element){处理程序})
index:数组的下标
element:数组的对象
each单讲
- each可以对数组,json,dom数组循环处理,数组,json中的每个成员都会调用一次处理函数
var arr = {1,2,3}//数组
var json = {“name”:“lisi”,“age”:20}
var obj = $(":text")
语法:$.each(循环内容,处理函数):表示使用jquery的each,循环数组,每个数组成员,都会执行后面的"处理函数"一次.
$:相当于java中的一个类名
each:就是类中的静态方法
静态方法调用:可以使用类名.方法名称
处理函数:function(index,element):
index,element都是自定义的形参,名称自定义.
index:循环的索引
element:数组中的成员
综合代码:
<style type="text/css">
div{
background-color: yellow;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//使用remove:删除所有标签
$("select").remove()
})
$("#btn2").click(function(){
$("select").empty();
})
$("#btn3").click(function(){
$("#fatchar").append("<input type = 'button' value = '我是增加的按钮'>");
})
$("#btn4").click(function(){
//使用html,获取数组中的第一个dom对象的文本值(innerHTML)的内容
alert($("span").html());
})
$("#btn5").click(function(){
$("span").html("你好,我是你<b>父亲</b>");
})
$("#btn6").click(function(){
//循环普通数组,非dom数组
var arr = [1,2,3,4];
$.each(arr,function(index,element){
alert("====")
})
})
$("#btn7").click(function(){
var json = {"姓名":"尹朝阳","sex":'男'};
$.each(json,function(i,n){
alert("i是k="+i+",n是值="+n);
})
})
$("#btn8").click(function(){
//循环dom数组
var domArray =$(":text");
$.each(domArray,function(i,n){
//n是数组中的dom对象
alert("i="+i+" ,n="+n.value);
})
})
})
</script>
</head>
<body>
<input type="text" id = "txt1" value="关羽"/><br>
<input type="text" id = "txt2" value="刘备" /><br>
<input type="text" id = "txt3" value="张飞"/><br>
<select>
<option value="老虎">老虎</option>
<option value="狮子">狮子</option>
<option value="豹子">豹子</option>
</select>
<br>
<select>
<option value="亚洲">亚洲</option>
<option value="欧洲">欧洲</option>
<option value="美洲">美洲</option>
</select>
<br>
<span>我是mysql<b>数据库</b></span>
<br>
<span>我是jdbc</span>
<br>
<div id = "fatchar">我是一个div</div>
<input type="button" value="使用remove删除所有对象" id = "btn1"/><br>
<input type="button" value="使用empty 删除所有对象" id = "btn2"/><br>
<input type="button" value="增加一个dom对象" id = "btn3"/><br>
<input type="button" value="获取第一个dom的文本值" id = "btn4"/><br>
<input type="button" value="设置span的所有dom值" id = "btn5"/><br>
<input type="button" value="循环普通数组" id = "btn6"/><br>
<input type="button" value="循环JSON" id = "btn7"/><br>
<input type="button" value="循环text" id = "btn8"/><br>on()绑定事件
$(选择器).on(事件名称,事件的处理函数)
事件名称:就是js事件中去掉用的部分
事件的处理函数:function定义…
例如:$("#btn").on(“click”,function(){处理按钮单击事件})
Ajax的处理
在没有jquery之前,使用XMLHttpRequest做ajax,有四个步骤
jquery优化了ajax请求的处理,使用三个函数可以实现ajax请求的处理
- $.ajax():jquery中实现ajax的核心函数
- $.post():使用post方式做aja请求.
- $.get();使用get方式发送ajax请求
.get()他们在内部都是调用的&.ajax()
介绍$.ajax函数的使用,函数的参数表示请求url,请求的方式,参数值等信息
$.ajax()参数是一个json结构.
例如:$.ajax({名称:值,名称1:值1…})
$.ajax()是jquery中ajax请求的和新方法,所有的其他方法 都是在内部使用此方法.
语法:$.ajax({name:value,name:value,…})
参数说明:
$.ajax({async:true,
contentType:"application/json",
data:{name:"lisi",age:20,
dataType:"json",
error:function(){ 请求出现错误,执行函数 },
success:function(){
// data就是responseText,是jquery处理后的数据 },
url:"bmiAjax",
type:"get"
} )- async:布尔值,表示请求是否异步处理,默认为true.可以不写这个配置项
- contentType:发送数据到服务器所使用的数据类型,可以不写,例如 application/json
- data:规定要发送到服务器的数据,可以是:字符串,数组,多数是json
- dataType:期望从服务器响应的数据类型,Jquery从xml,json,text,html这些中测试最有可能的类型.
当我们使用$.ajax()发送请求时,会把dataType的值发给服务器,那我们的servlet能够读取dataType的值,就知道你的浏览器需要的是json或者xml的数据,那么服务器就可以返回你需要的数据格式. - error:一个function,表示当请求发生错误时,执行的函数
error:function(){发生错误时执行} - success:一个function,请求成功了,从服务器端返回了数据,会执行success制定的函数
之前使用的XMLHttpRequest对象,当readyState == 4&&status==200的时候 - url:请求地址
- type:请求方式,get或者post,不区分大小写
主要使用:urldata,dataType,success
例:
$.ajax({
url: "queryjson",
data: {
"proid":obj
},
dataType:"json",
success:function (resp){
alert(resp.name)
$("#proname").val(resp.name);
$("#projiancheng").val(resp.jiancheng);
$("#proshenghui").val(resp.shenghui);
}
})$.get()
语法:$.get(url,data,function(resp),dataType)
思维导图
