JQuery学习

一.简介
二.使用
- 1.要指定jQuery库文件的位置，使用相对路径
- 2.入口函数简写方式
- 3.dom对象和jquery对象
- 4.基本选择器
- - （1）ID选择器
  - （2）class选择器
  - （3）标签选择器
- 5.表单选择器
- 6.基本过滤器
- 7.表单属性过滤器
- 8.函数
- - （1）`val()`
  - （2）`text()`
  - （3）`attr()`
  - （4）`remove()`
  - （5）`append()`
  - （6）`html()`和`html(参数)`
  - （7）`each()`函数
- 9.jquery中给dom对象绑定事件
- - （1）`$(选择器).事件名称(函数)`
  - （2）`$(选择器).on(事件名称,事件处理函数)`
- 10.使用jquery函数实现ajax的请求
- - （1）`$.ajax(参数)`
  - （2）`$.get()`
  - （3）`$.post()`

一.简介

JavaScript的一个库
为了简化JavaScript对dom的操作

二.使用

1.要指定jQuery库文件的位置，使用相对路径

<script type="text/javascript" src="jQuery/jquery-3.4.1.js"></script>

2.入口函数简写方式

相当于js中的onLoad()函数
当页面中的dom对象加载成功后，自动执行的函数

  $(function (){})

3.dom对象和jquery对象

dom对象：使用js语法创建的对象
jquery对象：使用jquery语法创建的对象，他是一个数组

dom对象转化为jquery对象：$(dom对象)
例：

var domobj = document.getElementById("btn");alert(domobj.value);//将dom对象转化为jQuery对象var jobj = $(domobj);alert(jobj.val());

jquery对象转化为dom对象：将数组中的对象拿出即可

//jquery对象转为dom对象var obj = $("#one")[0];//或者 var obj = $("#one").get(0);var num = obj.value;

4.基本选择器

根据ID，class属性，标签类型定位HTML元素，转为jquery对象
即定位dom对象，然后就可以通过jquery的函数操作dom对象

（1）ID选择器

：$("#id")

定义一个ID为one的div

<div id="one" style="width: 100px;height: 100px">我是id为one的div标签</div><br>

使用id选择器修改其颜色

 function fun1(){var obj = $("#one");obj.css("background","red")}

（2）class选择器

：$(".class名称")
定义一个样式为two的div

<div class="two" style="width: 100px;height: 100px">我是样式为two的div标签</div><br>

使用样式选择器修改其颜色

        function fun1(){var obj = $(".two");obj.css("background","red")

（3）标签选择器

：$("标签名称")
定义一个没有ID和样式的div标签

<div style="height: 100px;width: 100px">我是没有id和样式的div标签</div><br>

使用标签选择器修改其颜色

function fun1(){var obj = $("div");obj.css("background","red")}

5.表单选择器

使用input标签的type属性值，定位dom对象

$(":type属性值")
$(":text")
$(":checkbox")
$(":button")
$(":radio")

如果页面中同一属性值有多个，则所有对象会成为一个数组，通过下标来获取某个dom对象。

6.基本过滤器

定位了多个dom对象后，根据一些条件筛选dom对象
注：这种方式获取得到的对象依然是jquery对象，可以调用jquery库中的方法

（1）$("选择器:first") 数组中的第一个dom对象
（2）$("选择器:last") 数组中的最后一个dom对象
（3）$("选择器:eq(数组下标)") 指定下标的dom对象
（4）$("选择器:lt(数组下标)") 获取小于该下标的所有dom对象
（5）$("选择器:gt(数组下标)")获取大于该下标的所有dom对象

7.表单属性过滤器

根据dom对象的状态来选定对象
启用状态：enabled
不可用状态：disabled
选择状态：checked

$(":text:enabled")
$(":text:disabled")
$(":checkbox:checked")
$("select>option:selected")

8.函数

（1）`val()`

操作对象的value属性

（2）`text()`

操作数组中所有 DOM 对象的【文字显示内容属性】

（3）`attr()`

（4）`remove()`

删除父和子对象
empty（） 删除子对象
例如：
定义一个select

<select><option value="一号">一号</option><option value="二号">二号</option><option value="三号">三号</option>
</select>

使用remove()删除后：

使用empty()删除后：

（5）`append()`

添加dom对象

$("#btn3").click(function (){$("#one").append("<input type='button' value='我是新增的按钮'>")})

（6）`html()`和`html(参数)`

html() 获取数组中第一个dom对象的文本值，并且保留html标签
html(参数) 设置dom对象的文本值，在文本值中写入html标签时会生效

与text()的区别：
如果文本中有html标签时，使用html()会保留标签输出，而text()会将标签忽略。

（7）`each()`函数

可用于遍历数组，json和dom对象,对每个元素调用一次function函数

$.each(要遍历的对象,function(index,element){})
//index是数组下标，element是数组对象

例：
定义一个json并且使用each()遍历：

var json = {"name":"张三","age":"18"};$.each(json,function (index,element){alert("key="+index+",value="+element);})

结果为：

9.jquery中给dom对象绑定事件

（1）`$(选择器).事件名称(函数)`

一定要在$(function(){})中绑定事件

 $("#btn1").click(function (){})

（2）`$(选择器).on(事件名称,事件处理函数)`

$("#btn4").on("click",function (){})

10.使用jquery函数实现ajax的请求

（1）`$.ajax(参数)`

最核心的函数
参数说明：
async：boolean类型的值，默认为true，表示异步请求。
contentType:一个字符串，表示从浏览器发送到服务器的参数类型
data：可以是字符串，数组，json。表示请求的参数和参数值,使用json最多
dataType：表示期望服务端返回的数据格式。可选的有：xml，html，text， json
error：一个function，表示请求发生错误时所执行的函数
success：一个function，请求成功了，从服务端返回了数据，执行该函数
url：请求地址
type：请求方式，get/post，默认为get

$.ajax({async:true,contentType:"application/json",data:{"name":"林二","age":20},dataType:"json",error:function (){//请求发生错误时执行的函数}},success:function (data){//这个data就是responseText},url:"one",type:"get"})
//其中主要使用的是: url,data,datatype,success

（2）`$.get()`

表示使用get方式实现ajax请求

$.get(url,data,function(resp),datatype)
//参数说明同上

（3）`$.post()`

表示使用post方式实现ajax请求

$.post(url,data,function(resp),datatype)

jQuery学习理解(详细)相关推荐

JQuery学习提纲
学习基础在学习JQuery之前,应该具备一些必要的基础知识,相关内容可以参考菜鸟教程. HTML CSS JavaScript HTML DOM JQuery循序渐进推荐大家按照以下知识点的顺序循 ...
jQuery学习笔记系列（三）——事件注册、事件处理、事件对象、拷贝对象、多库共存、jQuery插件、toDoList综合案例
day03 - jQuery 学习目标: 能够说出4种常见的注册事件能够说出 on 绑定事件的优势能够说出 jQuery 事件委派的优点以及方式能够说出绑定事件与解绑事件能够说出 jQuery ...
jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 ...
JavaScript程序库jQuery学习笔记分享(二)jQuery对象和DOM操作，和其他js库冲突处理
今天我继续更新jQuery学习笔记,最近考试比较忙,也就更新的比较慢了,这里向大家说一声抱歉,嘻嘻. 让那不愉快的情绪过去吧,继续进行我们的jQuery之旅吧. 一:jQuery对象和DOM对象 1. ...
LTE学习理解系列——TDD LTE信源指定时隙配比设置
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 LTE学习理解系列--TDD LTE信源指定时隙配比设置前言详细配置结语前言目前暂时关注时隙配比的设置,因为每一种时隙配比可 ...
python语言通俗理解_慢步学习，python语言编程，来扯扯语言的学习理解
最近慢步工作比较忙,有那么一丢丢挫伤了学习的积极性.积极性受挫的另一个原因是,慢步对自己给读者提供的内容有些困惑,"我能提供什么有价值的内容?" 不断重复书籍的知识点,好像并不能生 ...
5G NR学习理解系列——MATLAB5G信源的生成之SSB参数配置
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 5G NR学习理解系列--MATLAB5G信源的生成之SSB参数配置前言 SSB参数的位置 SSB参数详细解释信号时频图总结前 ...
两条线段相交判断学习理解
两条线段相交判断学习理解两条线段相交判断可以分为两步: 1,快速排斥实验 2,跨立实验详细解释: 第一步检查以线段A为对角线的矩形和以线段B对角线的矩形是否相交,如果不相交则两条线段必然不相交,可 ...
菜鸟之路——机器学习之SVM分类器学习理解以及Python实现
SVM分类器里面的东西好多呀,碾压前两个.怪不得称之为深度学习出现之前表现最好的算法. 今天学到的也应该只是冰山一角,懂了SVM的一些原理.还得继续深入学习理解呢. 一些关键词: 超平面(hyper ...

jQuery学习理解(详细)

JQuery学习

一.简介

二.使用

1.要指定jQuery库文件的位置，使用相对路径

2.入口函数简写方式

3.dom对象和jquery对象

4.基本选择器

（1）ID选择器

（2）class选择器

（3）标签选择器

5.表单选择器

6.基本过滤器

7.表单属性过滤器

8.函数

（1）`val()`

（2）`text()`

（3）`attr()`

（4）`remove()`

（5）`append()`

（6）`html()`和`html(参数)`

（7）`each()`函数

9.jquery中给dom对象绑定事件

（1）`$(选择器).事件名称(函数)`

（2）`$(选择器).on(事件名称,事件处理函数)`

10.使用jquery函数实现ajax的请求

（1）`$.ajax(参数)`

（2）`$.get()`

（3）`$.post()`

jQuery学习理解(详细)相关推荐

最新文章

热门文章

jQuery学习理解(详细)

JQuery学习

一.简介

二.使用

1.要指定jQuery库文件的位置，使用相对路径

2.入口函数简写方式

3.dom对象和jquery对象

4.基本选择器

（1）ID选择器

（2）class选择器

（3）标签选择器

5.表单选择器

6.基本过滤器

7.表单属性过滤器

8.函数

（1）val()

（2）text()

（3）attr()

（4）remove()

（5）append()

（6）html()和html(参数)

（7）each()函数

9.jquery中给dom对象绑定事件

（1）$(选择器).事件名称(函数)

（2）$(选择器).on(事件名称,事件处理函数)

10.使用jquery函数实现ajax的请求

（1）$.ajax(参数)

（2）$.get()

（3）$.post()

jQuery学习理解(详细)相关推荐

最新文章

热门文章

（1）`val()`

（2）`text()`

（3）`attr()`

（4）`remove()`

（5）`append()`

（6）`html()`和`html(参数)`

（7）`each()`函数

（1）`$(选择器).事件名称(函数)`

（2）`$(选择器).on(事件名称,事件处理函数)`

（1）`$.ajax(参数)`

（2）`$.get()`

（3）`$.post()`