博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
2021.5.21 Jquery
阅读量:2147 次
发布时间:2019-04-30

本文共 3199 字,大约阅读时间需要 10 分钟。

1.什么是 jQuery ?

jQuery是一个轻量级的"写的少,做的多"的JavaScript函数库。[独立的javascript文件]

在这里插入图片描述

jQuery 的优点:

1.jQuery 是一个 JavaScript 函数库。[.js]

2.jQuery 极大地简化了 JavaScript 编程。

3.jQuery 很容易学习。

jQuery库包含以下功能:

1.HTML元素选取

2.HTML元素操作

3.CSS 操作

4.HTML 事件函数

5.JavaScript 特效和动画[元素的隐藏和显示]

6.HTML DOM 遍历和修改

7.AJAX请求【获取后台处理程序返回的数据值】高级操作

2.Jquery下载

https://code.jquery.com/jquery-3.6.0.min.js

https://code.jquery.com/jquery-3.6.0.js

Jquery是以“.js”结尾的,说明它是一个javascript文件。可以按照javascript

的用法使用。

jquery-3.6.0.min.js–jquery的发布版,它的特点小,节省内存。因为它里面的内容被压缩了。

jquery-3.6.0.js—jquery的开发版,它的特点有注释可以查看具体的内容。它是没有压缩的。

3.jQuery的使用

1.通过script标记导入本地jquery函数库文件到网页中。它是一个独立的javascript文件。

			

2.通过script标记利用网络地址导入jquery函数库到网页中

4.jQuery 语法

通过 jQuery,您可以选取HTML 元素【标记】,并对它们执行"操作"(actions)。

基础语法: $(selector).action()

1.选择符(selector)—"查询"和"查找"需要被控制的 HTML 元素。可以将被控制的 HTML 元素转美元符号定义 $ -表示jQuery,jQuery表示 $ 。我们可以使用 $ 代替jQuery。

2.换成jQuery对象。【 $(selector)–jQuery的构造器–创建jQuery对象】

3.action()指对得到的jQuery对象调用的函数/属性

Javascript的页面初始化事件

1.body中提供οnlοad=“函数”

2.window.οnlοad=function(){}

			
jQuery的初始化函数

jQuery的初始化函数

在这里插入图片描述

5.Jquery对象与javascript对象的转换

1.javascript对象转换成Jquery对象:【$(javascript对象)】

2.Jquery对象转换成javascript对象:【Jquery对象.get()】

jquery的构造有常用的两种

$(selecter)—将被选中的html标记构造成Jquery对象

$(javascript对象)—将javascript对象构造成Jquery对象

			
Jquery对象与javascript对象的转换

Jquery对象与javascript对象的转换

6.jQuery 选择器

jQuery 选择器允许 对 HTML 元素组或单个元素进行操作。

1.元素选择器

			
元素选择器

其他常用选择器

测试jquer选择器

测试jquer选择器

测试jquer选择器

2.#id 选择器

			
id

其他常用选择器

测试jquer选择器

测试jquer选择器

测试jquer选择器

3.class 选择器

			
class

其他常用选择器

测试jquer选择器

测试jquer选择器

测试jquer选择器

4.其他常用选择器

在这里插入图片描述

			
其他常用选择器

测试jquery的基础语法1

测试jquery的基础语法2

测试jquery的基础语法3

测试jquery的基础语法4

  • name=zhangsan
  • age=23
  • address=xian
  • name=lisi
  • age=23
  • address=xian
  • name=wangwu
  • age=23
  • address=xian
1001 zhangsan 23
1002 王五 25
1003 李四 15
1002 王五 25
1002 王五 25
1001 zhangsan 23

7.jQuery控制HTML元素以及文本内容

jQuery获取/设置文本元素的值

text([content])—获取/设置所选元素的文本内容

html([content])–获取/设置所选元素的内容(包括 HTML 标记)

val([content])----获取/设置表单字段的值

			
获取/设置文本元素的值

获取/设置h1元素的值

8.jQuery添加元素

append() - 在被选中元素中插入内容[最后一个元素在最后]

prepend() - 在被选中元素中插入内容[最后一个元素在最前面]

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

			
添加元素

9.jQuery删除元素

remove() - 删除被选元素(及其子元素)【有过滤功能】

empty() - 从被选元素中删除子元素

			
jQuery删除元素

测试删除元素

10.jquery的CSS 操作

1.为元素添加不存在的样式

css(样式属性名称,属性值) 设置被选元素的具有这个样式。

css({样式属性名称:属性值,样式属性名称:属性值}) 设置被选元素具有一组样式。

			
1.为元素添加不存在的样式

2.为元素添加已经存在的样式

addClass() - 向被选元素添加一个或多个样式类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

3.获取元素样式

css(样式属性名称) 返回被选元素的指定样式属性值。

			
2.为元素添加已经存在的样式

获取元素样式

转载地址:http://rbzwb.baihongyu.com/

你可能感兴趣的文章
剑指offer 60. 不用加减乘除做加法
查看>>
Leetcode C++《热题 Hot 100-13》234.回文链表
查看>>
Leetcode C++《热题 Hot 100-14》283.移动零
查看>>
Leetcode C++《热题 Hot 100-15》437.路径总和III
查看>>
Leetcode C++《热题 Hot 100-17》461.汉明距离
查看>>
Leetcode C++《热题 Hot 100-18》538.把二叉搜索树转换为累加树
查看>>
Leetcode C++《热题 Hot 100-19》543.二叉树的直径
查看>>
Leetcode C++《热题 Hot 100-21》581.最短无序连续子数组
查看>>
Leetcode C++《热题 Hot 100-22》2.两数相加
查看>>
Leetcode C++《热题 Hot 100-23》3.无重复字符的最长子串
查看>>
Leetcode C++《热题 Hot 100-24》5.最长回文子串
查看>>
Leetcode C++《热题 Hot 100-26》15.三数之和
查看>>
Leetcode C++《热题 Hot 100-28》19.删除链表的倒数第N个节点
查看>>
Leetcode C++《热题 Hot 100-29》22.括号生成
查看>>
Leetcode C++《热题 Hot 100-40》64.最小路径和
查看>>
Leetcode C++《热题 Hot 100-41》75.颜色分类
查看>>
Leetcode C++《热题 Hot 100-42》78.子集
查看>>
Leetcode C++《热题 Hot 100-43》94.二叉树的中序遍历
查看>>
Leetcode C++ 《第175场周赛-1 》5332.检查整数及其两倍数是否存在
查看>>
Leetcode C++ 《第175场周赛-2 》5333.制造字母异位词的最小步骤数
查看>>