文章目录
jQuery
//获取、获取dom对象,普通js方式
document.getElementById('idname').value
//代码量大、比较复杂
什么是JQuery？
答：是一款JavaScript库，封装了JavaScript相关方法调用，简化了JavaScript对html DOM操作。
js方式操作dom
<scrpit typr='text/javascript'>
//单击按钮获取文本框的value值
function fun1(){
//通过js中的id获取dom对象
var obj = document.getElementById('txt1');
alert(obj.value);
}
</scrpit>
<input type="text" id="text1" value="我是txt1"/> <br/>
<input type="text" id="text2" value="我是txt2"/> <br/>
<input type="button" value="单击按钮" onclick="fun1()" />
// 获取Dom封装成为一个方法：
function getDomobj(domid){
var obj = document.getElementById(domid);
return obj
}
// 更简化一些的话，把方法名为$ 更长用一些，简化对Dom的操作处理
一：开始JQuery
JQuery网址：https://jquery.com/ compressed:压缩版本
min版本：去掉无效的空格字符等等： 线上部署。
普通版本：保留空格等等方便光看，调试： 线下开发。
1、DOM对象
通过dom对html页面额即系，可以讲页面元素解析为元素节点，睡醒节点和文本节点，这些解析出的节点对象，就是ＤＯＭ对象，ＤＯＭ对象可以使用javascript方法。
2、jquery小试牛刀
<script type='text/javascript' src="juqery-3.5.1.js"></script>
<script type='text/javascript'>
//1. $(document) $是JQuery中的函数名称，document是函数的参数
// 作用是document对象编程 JQuery函数库可以使用的对象
//2. ready 是JQuery中的函数，是准备额意思，当页面的dom对象加载成功后会执行ready函数的内容，相当于js中的onload 事件。
//3. function()自动表示onload之后要执行的功能。
$(document).ready(function(){
alert("Hello")
//简写方式，作用同上，当页面都没对象加载完成之后
$(function()
{
alert("hellp");
}
)
})
3、dom对象和jquery对象
- dom对象，使用JavaScript与床创建的的对象。也就是js对象。
var obj = document.getElementById(‘text’); obj时dom对象。
2. JQuery对象： 使用JQuery语法创建的对象，jquery对象都是数组。
var jobj = $(“text”)
- dom对象和jquery对象可以相互转换。
dom对象可以**转**为JQuery对象： 语法：**$(dom对象)**
jquery对象转为DOM对象，语法：[0]
4. **为什么要进行dom和jquery转换？**
**要使用对象的方法，或者属性**。
```javascript
//dom 转jquery
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'
function butClick(){
//获取dom对象
var obj = document.getElementByID('btn');
//使用dom的value属性，获取值
alert("obj.value")
//dom对象转为jquery，使用jquery中的函数
var $obj = $(obj);
//调用jquery中的函数，获取value值
alert($obj.val())
}
</script>
```
```javascript
//jquery转dom
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
function btnclick(){
//使用jquery获取页面的dom对象 #txt: 获取id=txt的dom对象
var obj = $("#txt")[0]; //从数组中获取下标是0的dom对象
var obj = $("#txt").get(0); //作用同上
var num = obj.value;
obj.value = num * num;
}
</script>
```
二：选择器
1.基本选择器
选择器就是一个字符串，定位dom的，定位之后，就可以通过jquery的函数操作dom
-
id选择器： $("#dom对象的id") id在当前页面中是唯一值
-
class选择器：$(".class样式名") class用来表示css中的样式，使用样式的名称定位dom对象
-
标签选择器：$(“标签名称”)
-
所有选择器：$("*")选择页面中的所有的dom对象
-
组合选择器：**$("#id, .class, 标签名")**混用
2.表单选择器
表单选择器与是否有form组件无关，使用标签的type属性值
- $(":text") 选取所有的单行文本框
- $(":password") 选择所有的密码框
- $(":radio") 选择所有的单选框
- $(":checkbox") 选择所有的多选框
- $(":button") 选择所有的按钮
function but(){
//定位radio
var obj = $(":radion"); //数组，目前是两个jquery对象
//循环数组。数组中的成员是 dom对象，可以dom的属性或者函数
for(var i=0; i<obj.length; i++){
//从数组值获取成员，获取value值
var dom = obj[i];
//使用dom对象的属性，获取value值
alert(dom.value);
//value是dom的一个属性，val()是jquery的一个函数
}
}
三：过滤器
过滤器：在定位了dom对象后，根据一些条件筛选dom对象。也是一个字符串，不能单独使用，必须和选择器一块使用。
1、基本过滤器
- 选择第一个first，只保留数组中第一个DOM对象： $(“选择器: first”)
- 选择最后一个last，只保留数组中最后一个DOM对象： $(“选择器: last”)
- 选择数组中指定对象： $(“选择器: eq(数组索引)”)
- 选择数组中小于索引的所有dom对象： $(“选择器: lt(数组索引)”)
- 选择数组中大于索引的所有dom对象： $(“选择器: gt(数组索引)”)
2、表单属性过滤器
根据表单中dom对象的状态情况，定位dom对象。
启用状态，enable；
不可用状态。disabled;
选择状态：check， 例如radio，checkbox;
- 选择可用的文本框 ：$(":text:enable")
- 选择不可用的文本框：$(":text:disable")
- 复选框选中的元素： $(":checkboc: checked")
- 选择指定下拉列表框中选中的值：选择器>option:selecte
//页面内容
<input type="text" id="txt1" value="text1"><br/>
<input type="text" id="txt2" value="text2" disable="true"><br/>
<input type="text" id="txt3" value="text3"><br/>
<input type="text" id="txt4" value="text4" disable="true"><br/>
//复选框
<input type="checkbox" value="游泳">游泳<br/>
<input type="checkbox" value="健身" checked>健身<br/>
<input type="checkbox" value="电子游戏">电子游戏<br/>
//下拉列表框
<select id="yuyan">
<option value="java">java语言</option>
<option value="go" selected>go语言</option>
<option value="python">python语言</option>
</select>
<button id="btn1">
所有可用text文本值为：
</button>
//js
//相当于onLoad()
$(function(){
$("#btn1").click(function(){
//获取所有的可用text
//设置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); //js方式
alert($obj[i].val()); //jquery方式
}
})
$("#btn3").click(function(){
//获取select选择的值
//var obj = $("select>option:selected");
//或者
var obj = $("#yuyan>option:selected");
alert(obj.val());
})
})
四：函数
1.val()
- $(选择器)val : 无参调用形式，读取数组中第一个DOM对象的value属性值
- $(选择器).val(值) ：有参调用。对数组中所有DOM对象的value属性进行统一赋值。
2.text()
- $(选择器).text(): 无参调用方试。读取数组中所有DOM对象的文字显示内容，将得到的内容拼接成一个字符串返回
- $(选择器).text(值) ：有参方式，对数组中所有DOM对象的文字显示内容进行统一赋值。
3.attr()
对val ,text之外的其他属性操作
- $(选择器).attr(“属性名”): 获取DOM数组第一个对象的属性值
- $(选择器).attr(“属性名”, “值”)： 对数组中所有DOM对象的属性设为新值
val text attr 例子
<input type='text' value="刘备" />
<input type='text' value="关羽" />
<input type='text' value="张飞" />
<div>
我是第一个div
</div>
<div>
我是第二个div
</div>
<img src="img.jpg" id="img1" />
<input type="button" value='获取第一个文本框的值' id='btn1'>
$(function(){
$("#btn1").click(function(){
//val() 获取dom数组中第一个对象的value值
//$(":text") 文本框选择器
var text = $(":text").val();
alert(text)
})
$("#btn2").click(function(){
//设置所有的text的value为新值
$(":text").value("三国");
})
$("#btn3").click(function(){
//读取指定属性的值（读图片的src值）
var text = $("img").attr("src");
})
$("#btn4").click(function(){
//设置指定的属性值
$("img").attr("src", "img路径")；
})
})
4. remove
$(选择器).remove(): 将数组中所有DOM对象及其子对象一并删除
5.empty
$(选择器).empty(): 将数组所有Dom对象的子对象删除
6.append
为数组中所有DOM对象添加子对象
$(选择器).append(“
7.html
设置或返回元素的内容（相当于innerHTML）
$(选择器).html(): 无参调用。获取ＤＯＭ数组第一个元素的内容。
$(选择器).html(值)： 设置DOM数组中所有元素的值。
例子
$(function(){
$("#btn1").click(function(){
//使用remove删除父和子所有dom对象
$("select").remove() // $("select")标签选择器
})
$("#btn2").click(function(){
//使用empty删除子dom对象
$("select").empty()
})
$("#btn3").click(function(){
//使用append，动态增加dom对象
$("#fatcher").append("<input type='button' value='我是按钮' />")
})
$("#btn4").click(function(){
//使用html()函数，获取树祖宗第一个DOM对象的文本
var txt = $("#span").text();
})
})
8.each
-
可以对 数组， json, dom数组循环处理。 数组，json中的每个成员都会调用一次处理函数。
var arr = {1,2,3}； //数组
var json = {“name”:“list”, “age”: 20}
var obj = $(":text");
-
$.each(循环的内容， 处理函数) ： 使用jquery中的each，来循环数组，每个数组成员，都会执行后面的 “处理函数”一次。
**$ ** :相当于java 中的一个类名， .each ：相当于类中的静态方法。
处理函数： function(index, emelent):
index.element 都是自定义的形参，名称自定义
index : 循环的索引
element： 数组中的成员
//js循环数组： for(var i=0; i<arr.length; i++){ var item = arr[i]; //数组成员 //操作数组成员 //print(item); shuchu(i, item); } function shuchu(index, element){ 输出index, element }//jquery循环数组 $("#btn6").click(function(){ //循环普通数组，非dom数组 var arr = [11, 22, 330]; $.each(arr, function(index, element){ alert("循环变量"+index + "数组成员"+element); }) })//jquery循环json $("#btn7").click(function(){ //循环json var json = {"name":"张三", "age": "20"}; $.each(json, function(i,n){ alert(i+n); }) })''//jquery循环dom数组 $("#btn8").click(function(){ var domArray = $(":text"), //表单选择器获取所有的文本框 $.each(domArray, function(i,n){ //n 是数组中的dom对象 alert("i="+i, "n="+n.value); }) })'' -
jquery对象.each(function(index, element){ }) : 循环JQuery对象，jquery对象就送dom数组。
$("#:text").each(function(i, dom){ alert(i+ n.value); })
五：事件
1.定义元素监听事件
jquery中给dom对象绑定事件：
-
$(选择器).事件名称（事件处理函数），
$(选择器)： 定位dom对象，dom对象可以有多个，这些dom对象都绑定事件了。
事件名称： 就是js中事件去掉On的部分，例如js中的单击事件 onclick(),
jquery中事件名称就是click() ,都是小写。
事件处理函数： 就是一个function，当时间发生时，执行这个函数的内容。
例如：id是btn的按钮绑定单击事件
$("btn").click( function(){ alert("按钮单击"); }) //$(document).ready(事件函数): 当页面中dom对象加载成功之后，就执行ready(),相当于onLoad() $(function(){ //当页面dom对象加载后，给对象绑定事件，因此此时button对象已经在内存中创建好了，才能使用。 $("#btn1").click(function(){ //过滤器，先定义dom对象 var obj = $("div:first"); obj.css("backgroud":"red"); }) //绑定事件 $("#btn2").click(function(){ var obj = $("div:last"); obj.css("backgroud":"red"); }) //过滤下表等于三 $("#btn3").click(function(){ var obj = $("div:eq(3)"); obj.css("backgr oud":"red"); }) })
2. on()绑定事件
$(选择器).on(事件名称， 事件处理函数)
事件名称：js事件中去掉on的部分，例如js中的onclick，就是click
事件处理函数：function定义。
例如：
$("#btn").on(“click”, function( ) { 处理按钮单击 } )
$("#btn").on("click", function(){
alert("按钮被单击")；
})
六：Ajax
使用jquery的函数，实现ajax请求的处理。
没有jquery之前，使用XMLHttpRequest做ajax. jquery简化了ajax的请求
- $.ajax() : jquery使用ajax的核心函数。
- $.post() : 使用post方法发送ajax.
- $.get() : 使用get方法发送ajax.
$.post() 和 $.get() 在内部都是调用的 $.ajax()
1. $.ajax()
函数的参数表示请求的url， 请求方式，参数值等信息。 其中参数是一个json的结构
例如： $.ajax( {名称：值，名称：值 })
2.json结构的参数说明：
-
async : boolean类型的值，默认是true, 表示是异步请求，可以不写。
-
contentType: 一个字符串，表示从浏览器发送服务器的参数类型。可以不写。
例如你想表示气你去的参数是json格式的，可以写application/json
-
data: 可以是字符串，数组，json。表示请求的参数，常用json。
-
dataType : 期望从服务器端返回的数据格式，可选 xml, html, text, json.
-
error: 一个function，表示请求发生错误时， 执行的函数。
error:function(){ 发生错误时执行 }
-
success： 一个function，请求成功了，从服务器端返回了数据，会执行success指定的函数
success:function(data) { //data是服务端返回的数据 （jquery处理后的数据）}
-
url :请求地址。
-
type: 请求方式， get或者post, 不区分大小写，默认get.
$(function(){ //初始化函数，相当于onLoad
$("btn").click(function(){
//获取dom的value值
var proid = $("#proird").val();
//发起ajax请求
$.ajax({
url:"queryjson",
method:"get",
data:{
"proid": proid
},
dataType: "json",
success:function(resp){
alert(resp);
//动态赋值
$("#proname").val(resp);
}
})
})
})
175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
