jQuery

最新推荐文章于 2022-07-18 10:57:37 发布

Koite

最新推荐文章于 2022-07-18 10:57:37 发布

阅读量446

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/Koite/article/details/123354725

版权

这篇博客详细介绍了jQuery的基本概念、下载方式、使用方法以及核心功能，包括DOM对象转换、选择器、过滤器、事件绑定和AJAX操作。通过实例展示了如何使用jQuery进行DOM操作，如选择、过滤、添加元素及处理事件，同时也讲解了$.ajax()函数的使用。

摘要由CSDN通过智能技术生成

jQuery概念

jQuery就是js函数库，里面有大量的js函数，我们可以使用这些函数操作dom对象，做事件、动画、ajax处理

jQuery下载

进入jQuery官网：jQuery
点击下载jQuery
在jQuery中点击下载未压缩的、开发的 jQuery

jQuery使用

jQuery是一个js文件，将文件引入
在官网查阅API文档，在js中调用即可

对象的分类

dom对象和jQuery对象。在一个文件中同时存在两个对象

dom对象：使用js获取、创建的对象。html中的对象都是dom对象

jQuery对象：使用jQuery获取的对象

对象转换

dom转换jQuery

dom对象和jQuery对象是可以相互转换的

语法：$(dom对象) ——把dom对象转换为jQuery对象，可以调用jQuery中提供的函数

<input type="text" id="t1"/>
<script>
    //通过js函数，获取dom对象
    var ipt = document.getElementById('t1');
    //把dom转为jQuery
    var jQueryObj = $(ipt);
    //调用jQuery中的函数
    jqueryObject.val();//获取dom对象的value值
</script>

为了区分dom对象和jquery对象，可以在jquery对象变量名上加$

jQuery转换dom

jQuery对象是一个数组，数组成员是dom对象。使用[]或get()

<input type="text" id="txt1"/>
<script>
    $('#txt1')//获取id是txt1的dom对象
    var obj = $('#txt1');//obj是一个jQuery对象，是一个包含了一个成员的dom数组。obj[0]就是dom对象
    var dom = obj[0];
    obj.get[0];
</script>

选择器

基本选择器

id选择器:$('#id')
class（样式）选择器:$('.class')
标签选择器:$('标签名称')
所有选择器:$('*')
组合选择器:$('#id,.class,标签名称')

组合选择器使用id或者class名称或者标签名称定位dom对象，id、class、标签名称可以任意组合。可以同时选取多个

表单选择器

表单选择器使用dom对象的type属性值定位dom对象的，和form标签无关

语法：$(':type值')

<input type="text"/>
<input type="password"/>
<script>
    var text = $(':text')//获取type值为text的input标签
</script>

过滤器

过滤器是一个字符串，用来筛选dom对象，过滤器是和选择器一起使用的。在选择了dom对象后，再进行过滤筛选

基本过滤器

使用dom对象在数组中的位置，作为过滤条件

选择数组中第一个dom成员

语法：$('选择器:first')
选择数组中的最后一个成员

语法:$('选择器:last')
选择指定下标的dom成员

语法：$('选择器:eq(下标)')
选择大于某个下标的所有成员

语法：$('选择器:gt(下标)')
选择小于某个下标的所有成员

语法：$('选择器: lt(下标)')

表单对象过滤器

根据对象的状态作为条件，筛选dom对象

选择可用的文本框

语法：$(':text:enabled')

<input type="text" disabled/><!-- 不可用的 -->
<input type="text" disabled/>
<script>
    $('text:enabled')//选中第二个文本框
    $(':text:disabled')//选中第一个文本框
</script>

选择不可用的文本框

语法：$(':text:disabled')

获取选中的复选框

语法：$(':checkbox:checked')

<input type="checkbox" value="游泳"/>
<input type="checkbox" value="健身"/>
<input type="checkbox" value="游戏" checked/><!-- checked默认选中 -->
<script>
    $('：checkbox:checked')//选中带有checked属性的复选框——游戏复选框
</script>

获取选中下拉列表框

语法：$('选择器>option:selected')

<select id="lang">
    <option value="java" selected>java</option><!-- selected默认显示 -->
    <option value="go">go</option>
    <option value="python">python</option>
</select>
<script>
    $('#lang>option:selected')//选中带有selected属性的下拉菜单——选中java
</script>

函数

val():操作dom对象的value值

val()没有参数：获取dom数组中的第一个dom对象的value值

val(参数)有参数：给dom数组中的所有dom对象的value属性赋值为()中的参数

<input type="text" value="1"/>
<input type="text" value="2"/>
<input type="text" value="3"/>
<script>
    console.log($(':text').val());//输出第一个type属性值为text的value值
    console.log($(':text').val('数字'));//将所有type属性值为text的value值修改为数字
</script>

text():操作标签的文本内容

text()没有参数：把dom数组中所有dom对象的文本内容连接起来，形成一个字符串并返回这个字符串

text(参数)有参数：给dom数组中的所有成员统一赋予新的文本
```
<div>1</div>
<div>2</div>
<div>3</div>
<script>
    console.log($('div').text());//输出123
    console.log($('div').text(数字));//将所有的div内容修改为数字，输出数字 数字 数字
</script>
```
attr():操作value，文本以外的属性

attr('属性名')：获取dom数组中第一个dom成员的该属性名的属性值

attr('属性名'，’属性值‘)：给dom数组中所有dom成员此属性赋值
```
<img id="img1" src="xxx.jpg"/>
<script>
    $('#img1').attr('src');//获得id为img1的src属性值——xxx.jpg
    $('#img1').attr('src','XXX.jpg')//将id为img1的src属性值修改为XXX.jpg
</script>
```

remove():删除选择的dom对象和它的子对象

语法：$('选择器').remove()

<select>
    <option value="老虎">老虎</option>
    <option value="狮子">狮子</option>
    <option value="老鼠">老鼠</option>
</select>
<script>
    $('select').remove();//将select元素及其子元素全部删除
</script>

empty():删除dom对象的子对象

语法：$('选择器').empty()

<select>
    <option value="亚洲">亚洲</option></option>
    <option value="欧洲">欧洲</option>
    <option value="非洲">非洲</option>
</select>
<script>
    $('select').empty();//将select元素中的所有子元素删除
</script>

append():给dom对象后面增加新dom对象

语法：$('选择器').append(子dom对象)

<div id="mydiv"></div>
<script>
    $('#mydiv').addend('<button id="newbtn">我是新加的按钮</button>');//给div后面增加一个button元素
    $('#mydiv').addend('<button>我是第二次加的按钮</button>');//第二次添加的按钮会在第一个按钮后面
</script>

html():

html():获取dom数组中第一个dom对象的文本值(返回结果相当于innerHTML)

html(参数)：给dom数组中的所有成员设置新的文本内容
```
<span>我是1</span>
<span>我是2</span>
<script>
    $('span').html();//我是1
    $('span').html(我是3);//两个span的内容全部改为我是3
</script>
```
clone()

复制（克隆节点）：克隆匹配的dom元素，返回值为克隆后的副本，但此时复制的新节点不具有任何行为。

clone(true):复制元素的同时也复制元素中的事件

replaceWith()和replaceAll()

replaceWith():将所有匹配的元素都替换为指定的html或dom元素

replaceAll()：颠倒了的replaceWith()方法

注意：若在替换之前，已经在元素上绑定了事件，替换后原先绑定的事件会与原先元素一起消失

<ul id="city">
    <li>青岛</li>
    <li>北京</li>
    <li>上海</li>
</ul>
<script>
    $('<li>建德<li/>').replaceAll($('#city li:last'));//将id为city的元素中的最后一个li替换为建德
    $('#city li:ep(1)').replaceWith($('<li>杭州<li/>'));//将id为city元素中下标为1的li替换为杭州
</script>

each()

是一个循环函数，可以循环数组、json、dom对象数组

语法：

$.each(要循环的内容,fuction(index,element){})

要循环的内容：可以是数组、json、dom对象数组

index：循环变量

element：和index对应的成员

//循环数组
var arr = [1,2,3];
    $.each(arr,fuction(index,element){
           console.log(index,element);
           });//输出为0 1;1 2;2 3;index输出下标，element输出下标对应的内容

//循环json对象
var json = {'name':'张三',
            'age':18,
            'sex':'男'};
$.each(json,fuction(i,n){
       //i是属性名(key)，n是属性值(value)。i是name，n是张三
       console.log(i,n);
       });

<input type="text" value="刘备"/>
<input type="text" value="关羽"/>
<input type="text" value="张飞"/>
<script>
//循环dom对象数组
    var ipt = $(':text');
    $.each(ipt,fuction(i,n){
           //i是循环变量，n是dom对象
           console.log(i,n.value);//输出0 刘备；1 关羽；2 张飞
           });
</script>

$('选择器').each(fuction(index,element){})

可以对jQuery对象进行循环处理，jQuery对象就是dom数组

<input type="text" value="刘备"/>
<input type="text" value="关羽"/>
<input type="text" value="张飞"/>
<script>
	$(':text').each(fuction(i,n){
               console.log(i,n.value);// 输出0 刘备；1 关羽；2 张飞
    //或：
    		   console.log(i,$(n).val());
                });
</script>

事件

jQuery可以给dom对象绑定事件，在程序执行期间动态的处理事件

绑定事件

语法：$('选择器').事件名称(事件处理函数)

$('选择器')：选择0或多个dom对象，给他们绑定事件

事件名称：就是js中去掉on的部分。例如单击事件onclick，这里的事件名称就是click

事件处理函数:函数定义，当事件发生时，执行这个函数
```
<input type="button" id="btn"/>
<script>
    $('#btn').click(fuction(){
                    
                    });
</script>
```
$(fuction(){}):页面dom对象加载完后执行，相当于onload事件

语法：$('选择器').on(event,fuction(){ })

event:事件一个或多个，多个之间空格隔开。就是js中去掉on的部分

<input type="button" id="btn" value="绑定事件" />
<script>
    $('#btn').on(click,fuction(){
                 
                 });
</script>

函数ajax三个参数

使用jQuery提供的函数，实现ajax请求的处理。代替直接使用XMLHttpRequest。但是jQuery实际还是使用的异步对象

$.ajax()

语法：$.ajax({json格式的参数})

$.ajax({
    url:'queryProvinceServlet',
    type:'get',
    data:{'name':'张三','age':18}
});

json格式的参数：key是定义好的，需要开发人员给key赋值。key是用来表示ajax请求必须的函数。例如：请求的url地址，是不是异步请求，请求的方式等

url：服务器的地址，例如某个servlet的访问地址。queryProvinceServlet

type：表示请求的方式。get、post，默认为get

data：表示提交的请求参数。可以是string、数组、json类型的。推荐使用json格式（例如：data:{'name':'张三','age':18}。jquery在发送请求时，会把json中的key作为请求的参数使用，key对应的值作为参数数据。转化的结果为：http://localhost:8080/myweb/queryProvinceServlet?name=张三&age=18）

dataType:数据格式，可以是html、text、xml、json等。表示发起请求后，希望服务器端返回的数据格式。jquery可以尝试使用对应格式处理返回的数据，比如指定了dataType：json，表示希望服务器返回的是json格式数据。然后jquery把json数据转为json对象。