jQuery的简单使用

一、jQuery

在这里插入图片描述

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

jQuery官网:https://jquery.com/

jQuery版本区别:

  • Production:精简压缩版本,适用于产品正式上线
  • Development:未压缩版本,适用于开发环境

jQuery的使用:

只需要在html用引用就行<script src="js/jquery-3.4.1.js"></script>

二、jQuery选择器

在js中操作DOM是一个很繁琐的操作。但是在jQuery中,提供了更简单方便的方式查找或者定位元素。

1、基础选择器

名称选择器例子
#idID选择器$("#ul"),id为ul的元素
element标签选择器$(“li”),标签为li的所有元素
.class类选择器$(".boy"),class为boy的所有元素
*通配符选择器$("*"),所有的元素
selector1,selector2…组合选择器$("#ul,.boy,.div"),id为ul的和class为boy的和div
<ul id="ul">
    <li class="boy">张三</li>
    <li>李四</li>
    <li class="boy">王二</li>
    <li>麻子</li>
</ul>
<div></div>

1、ID选择器

console.log($("#ul"));

2、标签选择器

console.log($("li"));

3、类选择器

console.log($(".boy"));

4、通配符选择器

console.log($("*"));

5、组合选择器

console.log($("#ul,.boy,.div"));

2、属性选择器

名称选择器例子
$("[class]")属性选择器$("[class]"),有class属性的的标签
<body>
    <div class="ahh">啊哈哈1</div>
    <div class="hha">啊哈哈2</div>
    <p class="ahh"></p>
    <span></span>
    <script>
        // 所有存在class属性的选择器
        console.log($("[class]"));

        //带有class属性的div
        console.log($("div[class]"));

        // 所有的class属性为ahh的
        console.log($("[class='ahh']"));

        // 所有的class属性为ahh的div
        console.log($("div[class='ahh']"))

    </script>
</body>

3、层次选择器

名称选择器举例
ancestor descendant后代选择器$(“div ul”),div下的所有ul元素
parent > child子代选择器$(“div>ul”),div的直接ul子元素
prev + next相邻选择器$(“ul+p”),ul的下一个p元素
prev ~ sibling同辈选择器$(“ul~ol”),ul的同级别的ol元素
<div>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>
            <ul>
                <li>列表5_1</li>
                <li>列表5_2</li>
                <li>列表5_3</li>
                <li>列表5_4</li>
            </ul>
        </li>
    </ul>
    <ol>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
    </ol>
    <p>啊哈哈</p>
    <ol>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ol>
</div>

1、后代选择器

// 后代选择器 所有子元素
console.log($("div ul"));// div的所有ul子元素

2、子代选择器

// 子代选择器,直接子元素
console.log($("div>ul"));// div的直接ul子元素

3、相邻选择器

如果每日有相邻的元素,返回0长度的数组

// 相邻选择器
console.log($("ul+p"));// ul的下一个ol元素,如果ul的下一个元素不是ol,则返回0长度数组

4、同辈选择器

// 同辈选择器
console.log($("ul~ol")) // ul同辈的所有ol元素

4、表单选择器

表单选择器,就是单单用来获取表单的

名称选择器例子
:input表单选择器$(":input"),所有的表单元素
:text文本框选择器$(":text"),所有的文本框
:password密码框选择器$(":password"),所有的密码框
:radio单选框选择器$(":radio"),所有的单选框
:checkbox复选框选择器$(":checkbox"),所有的复选框
:submit提交按钮选择器$(":submit"),所有的提交按钮
:reset重置按钮选择器$(":reset"),所有的重置按钮
:button按钮选择器$(":button"),所有的按钮
:file文件域选择器$(":file"),所有的文件域
<form action="myform" name="myform">
    姓名:<input type="text" name="username" value="啊哈哈"><br>
    姓名:<input type="text" name="username" value="啊哈哈"><br>
    密码:<input type="password" name="password" value=""><br>
    性别:<input type="radio" name="sex" value="1" checked><input type="radio" name="sex" value="0"><br>
    爱好:<input type="checkbox" name="hobby" value="code" checked>敲代码
    <input type="checkbox" name="hobby" value="sleep">睡觉
    <input type="checkbox" name="hobby" value="eat">吃东西 <br>
    来自:
    <select name="sel" id="sel">
        <option value="河南">河南</option>
        <option value="河北">河北</option>
        <option value="山东">山东</option>
        <option value="山西">山西</option>
    </select>
    简介:<textarea name="work" id="" cols="30" rows="10"></textarea><br>
    头像:<input type="file"><br>
    <input type="submit"><input type="reset"><button>按钮</button>
</form>

1、表单选择器

用于获取当前表单中的所有表单元素

console.log($(":input"));

2、文本框选择器

获取当前表单的所有文本框

console.log($(":text"));

3、密码框选择器

获取当前表单的阿所有密码框

console.log($(":password"))

4、单选框选择器

获取当前表单中的所有单选框

console.log($(":radio"));

5、复选框选择器

获取当前表单中的所有复选框

console.log($(":checkbox"));

6、提交按钮选择器

获取当前表单中的所有提交按钮

console.log($(":submit"));

7、重置按钮选择器

获取当前表单中的所有重置按钮

console.log($(":reset"));

8、按钮选择器

获取当前表单中的所有按钮

console.log($(":button"));

9、文件域选择器

获取当前表单中的所有文件域

console.log($(":file"));

5、表单过滤器

有时候只想获取某个表达的一部分,例如被选中的复选框,就可以使用表单过滤器过滤

名称例子
:checked$(":checked"),所有被选中的单选框,复选框,下拉列表框
:selected$(":selected"),被选中的下拉列表框的值
eq()

1、checked

想要获取被选中的单选框、复选框和下拉列表,可以使用

 console.log($(":checked"))

只要获取input标签,被选中的(input标签不包括下拉列表框)

console.log($("input:checked"));

获取单选框被选中的

console.log($(":radio:checked"));

获取复选框被选中的

console.log($(":radio:checked"));

2、selected

获取被选中的下拉列表框的值

console.log($(":selected"));

三、jQueryDOM操作

jQuery中也提供了对DOM的操作,而且使用起来更加简单

1、属性操作

HTML标签的中属性分为两种,一种是HTML中定义的属性,一种是自己自定义的属性。例如:id就是固有属性,我在标签中加了一个ahh属性,那么ahh属性就是自定义属性。

方法说明
attr()操作固有属性和自定义属性
prop()操作如有属性
<div id="div1" abc="abc_div1"></div>
<input type="text" value="我是一个表单元素">
<input type="radio" name="sex" value="" checked="checked"><input type="checkbox" name="hobby" value="code">敲代码
<input type="checkbox" name="hobby" value="sleep" checked="checked">睡觉
<input type="checkbox" name="hobby" value="eat">吃东西

1、获取固有属性

如果是固有属性,使用attr或者prop没有任何区别

console.log($("#div1").attr("id"));// 获取id属性
console.log($("#div1").prop("id"));// 获取id属性

2、获取自定义属性

自定义属性只能使用attr获取,prop获取不到

console.log($("#div1").attr("abc"));// 获取abc属性
console.log($("#div1").prop("abc"));// 获取abc属性,获取不到

3、获取表单元素属性

console.log($("[type='text']").attr("value"));// type为text的表单的value属性
console.log($("[type='text']").prop("value"));

4、获取固有属性中的boolean类型属性

如果获取固有的boolean类型属性,则有点不同。attr获取到的是写在HTML代码中的值,而prop获取到的是浏览器解析后的值。

// 获取radio的checked属性,获取到的是源代码中的设置样式,checked
console.log($("[type='radio']").attr("checked"));
// 获取radio的checked属性,获取到的是浏览器解析后的样式,true
console.log($("[type='radio']").prop("checked"));

5、获取checkbox(复选框)的checked属性

这个也稍微有点不同,如果获取的是复选框的,那么只能获取到第一个

// 获取radio的checked属性,获取到的是源代码中的设置样式,undefined
console.log($("[type='checkbox']").attr("checked"));
// 获取radio的checked属性,获取到的是浏览器解析后的样式,true
console.log($("[type='checkbox']").prop("checked"));

6、设置固有属性

同样设置固有属性,两种方式结果都一样

// 设置固有属性,设置class属性,值为div1
$("#div1").attr("class","div1");
$("#div1").prop("class","div1");

7、设置自定义属性

同样,prop不能获取自定义属性,也就不能设置自定义属性

// 设置自定义属性,设置ahh属性,属性值为ahh
$("#div1").attr("ahh","ahh"); // 成功
$("#div1").prop("ahh","ahh");// 失败

8、设置boolean类型的属性

设置和获取的时候一样,赋值不同,attr设置checked,prop设置boolean值

// 设置boolean属性
$("[value='code']").attr("checked","checked"); // 成功
$("[value='code']").prop("checked",true); // 成功

9、取消boolean类型的属性

$("[value='sleep']").prop("checked",false);// 推荐

2、样式操作

对于元素的样式,也是一种属性,但是由于样式使用的很多,就对样式进行了专有的方法处理。

方法说明
attr()操作属性
addClass()追加class
removeClass()移除class
css()设置css样式
<style>
.p1{
    background-color: red;
}
.size{
    font-size: 30px;
}
.border{
    border: 5px solid #000000;
}
</style>
<p>啊哈哈</p>

1、attr()

calss也是属性,所以也可以使用cttr操作

$("p").attr("class","p1");

2、addClass()

追加class,对元素在添加一个class

$("p").addClass("size border");

3、removeClass()

移除class

$("p").removeClass("border");

4、css()

直接添加css属性,多个样式之间使用,分开。

$("p").css({"height":"50px","text-align":"center","line-height":"50px"})

3、操作元素值

对于元素也可以操作

方法说明
html()操作HTML内容
text()操作元素文本内容
val()操作元素value值
<p><span>啊哈哈</span></p>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>

1、获取非表单元素内容,包含HTML

console.log($("p").html());

2、获取非表单元素内容,不包含HTML

console.log($("p").text());

3、非表单元素标签赋值,不带HTML

$("#d1").html("HelloWorld");
$("#d2").text("HelloWorld");

4、非表单元素赋值,带HTML

text,不能识别元素标签,会把元素标签当作内容赋值

$("#d3").html("<h3>HelloWorld</h3>");// 识别元素标签
$("#d4").text("<h3>HelloWorld</h3>");// 不识别元素标签

5、表单元素取值

console.log($("[type='text']").val());

6、表单元素赋值

console.log($("[type='text']").val("Hello World"));

4、添加元素

jQuery中也有封装好的添加元素的方法。当然了,添加元素前需要先创建元素。

1、创建元素

jQuery中提供了一种特别方便的创建元素的方式

var div = $("<div>我是一个</div>"); // 创建一个元素

2、添加元素

方法说明
父元素.prepend(新元素)在父元素的开头插入新元素
新元素.prependTo(父元素)把新元素添加到父元素的开头处
父元素.append(新元素)在父元素类追加新元素
新元素.appendTo(父元素)把新元素追加到父元素中
元素1.before(新元素)在元素1前添加新元素
元素1.after(新元素)在元素1后添加新元素
<ul>
    <li>张三</li>
    <li>李四</li>
    <li>王二</li>
    <li>麻子</li>
</ul>
var ul = $("ul");

1、prepend

var li = $("<li>添加到第一个位置</li>");
ul.prepend(li); // 添加到第一个位置,在ul里添加元素

2、prependTo

li.prependTo(ul);   // 添加到第一个位置,把li添加到ul中

3、append

li = $("<li>添加到最后位置</li>");
ul.append(li);  // 添加到最后位置,在ul里添加元素

4、appendTo

li.appendTo(ul);    // 添加到最后位置,把li添加到ul最后位置

5、before

var p = $("<p>我是一个p标签</p>");
ul.before(p);   // 把p添加到ul之前

6、after

p = $("<p>我也是一个p标签</p>");
ul.after(p)     // 把p标签添加到ul后面

5、删除元素

删除元素有两种,一种是直接删除元素,连标签一起删除,还有一种是删除元素中的内容

方法说明
remove()删除元素,连带元素标签一起删除
empty()删除元素中的内容

1、remove

删除所以为2的li元素

var lis = $("li");
lis.eq(2).remove();

2、empty

清空索引为3的li元素中的内容

lis.eq(3).empty();

6、遍历元素

在jQuery中获取的元素,都是数组的形式

方法说明
each()遍历元素
for循环for循环

1、each,2个参数

两个参数:

i:元素的索引

e:DOM对象元素

lis.each(function (i,e) {
    console.log(i,e);
});

2、each,没有参数

lis.each(function () {
    console.log(this); // DOM对象
    console.log($(this)); // jQuery对象
});

3、for循环

for (var i = 0;i<lis.length;i++){
    console.log(lis.eq(i));
    console.log(lis.get(i));
}

四、jQuery事件操作

jQuery中也提供了很多操作事件的方法

1、ready()

加载事件,和DOM的onload类似,不过也有不同。ready是在网页加载完DOM结构后就执行,而onload不但要等待DOM结构加载完毕,还要等待页面中的资源加载完毕才会执行。

ready(),有三种形式

1、ready

$(document).ready(function () {
	console.log("啊哈哈",b);
});

2、$

$(function () {
	console.log("啊哈哈",b)
});

3、jQuery

jQuery(function () {
    console.log("啊嘿嘿",b)
})

2、事件绑定

为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。

方法描述
bind绑定事件

绑定事件:

blur, focus, load, resize, scroll, unload, click, dblclick mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter
mouseleave,change, select, submit, keydown, keypress, keyup, error 
<button id="but1">按钮1</button>
<button id="but2">按钮2</button>
<button id="but3">按钮3</button>
<button id="but4">按钮4</button>
<button id="but5">按钮5</button>
<button id="but6">按钮6</button>
<button id="but7">按钮7</button>

1、不带参数的绑定事件

第一个参数是事件,第二个参数触发事件后执行的函数

// 不带参数
$("#but1").bind("click",function () {
    console.log("按钮1被点击了");
});

2、带参数的绑定事件

第一个参数是事件,第二个参数是传入的数据(对象类型), 第三个参数触发事件后执行的函数

$("#but2").bind("click",{name:"张三",age:20},function (e) {
    console.log(e);
    console.log(e.data.name,e.data.age);
    console.log("按钮2被点击了")
});

3、简单的写法[推荐]

$("#but3").click(function () {
    console.log("按钮3被点击了");
});

4、绑定多个事件,执行同一个函数

第一个参数是事件(多个事件中间使用空分开),第二个参数触发事件后执行的函数

$("#but4").bind("click mouseout",function () {
    console.log("but4")
});

5、绑定多个事件,执行不同函数-1

$("#but5").bind("click",function () {
    console.log("按钮5被点击了");
}).bind("mouseout",function () {
    console.log("按钮5失去光标");
});

6、绑定多个事件,执行不同函数-2

$("#but6").bind({"click":function () {
		console.log("按钮6被点击了")
	},
    "mouseout":function () {
		console.log("按钮6失去光标")
	}
});

7、绑定多个事件,执行不同函数-3

$("#but7").click(function () {
    console.log("按钮7被点击了")
}).mouseout(function () {
    console.log("按钮7失去光标")
})

五、Ajax操作

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

1、ajax

参数说明
type请求方式[GET、POST]
url请求的URL
async是否同步。默认为ture,同步
data发送的数据,对象类型
dataType相应数据类型
contentType请求头
success请求成功回调函数
error请求失败,调用函数
$.ajax({
    type:"get", // 请求方式
    url:"js/data.json", // 请求地址(模拟本地文件)
    data:{  // 请求数据
        page:"1",
        limit:"10"
    },
    dataType:"json",    // 相应格式
    success:function (result) { // 请求成功回调函数
        console.log(result)
    }
})

2、GET

上面的Ajax操作有点繁琐,所以出了单独针对GET请求的方式以取代复杂的Ajax

1、没有参数,没有回调函数

$.get("js/data.json");

2、有参数,没有回调函数

$.get("js/data.json",{name:"ahh"});

3、没参数,有回调函数

$.get("js/data.json",function (result) {
    console.log(result);
});

4、有参数,有回调函数

$.get("js/data.json",{name:"ahh"},function (result) {
    console.log(result);
});

3、POST

和GET一样,用以取代繁琐的Ajax

1、没有参数,没有回调函数

$.post("js/data.json");

2、有参数,没有回调函数

$.post("js/data.json",{name:"ahh"});

3、没参数,有回调函数

$.post("js/data.json",{name:"ahh"},function (result) {
    console.log(result);
});

4、有参数,有回调函数

$.post("js/data.json",function (result) {
    console.log(result);
});

4、getJSON

getJSON是专门用来获取获取JSON的

1、没有参数,没有回调函数

$.getJSON("js/data.txt");

2、有参数,没有回调函数

$.getJSON("js/data.txt",{name:"ahh"});

3、没参数,有回调函数

$.getJSON("js/data.txt",{name:"ahh"},function (result) {
    console.log(result);
});

4、有参数,有回调函数

$.getJSON("js/data.txt",function (result) {
    console.log(result);
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值