jQuery基础

于 2023-01-30 17:39:01 发布
阅读量137 收藏
点赞数
文章标签： jquery javascript 前端 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75624032/article/details/128806304
版权

1 jQuery简介

1.1 jquery的特点

轻量级

强大

链式语法

简单

易扩展

....

1.2 jquery的导入

本地导入

​

我们可以百度搜索jquery，可以搜到jquery的官方网站：https://jquery.com/ 下载jquery文件

​

<script src="本地jquery文件路径"></script>

<script>

//在此书写你的jquery代码

</script>

​

也可以通过在线的jquery 直接src写入在线的地址

1.3 如何使用jquery

1.3.1 引入jquery文件

​

1.3.2 入口函数

jq与js入口函数对比

​

- js等页面所有资源加载完成后才能执行

- jq等待文档树加载完成开始执行

1.4 jq事件的链式写法

必须使用$(this)将他转换为jq对象

1.5 jq

1.5.1 什么是jq对象

使用jq的方式获取到的元素就是jq对象

1.5.2 jq和Dom对象之间的转换

var doc2=$("#idDoc2")[0];

//转换jQuery对象为DOM对象

doc2.innerHTML="这是jQuery的第一个DOM对象"

//使用jQuery对象本身提供的get函数来返回指定集合位置的DOM对象

var doc2=$("#idDoc2").get(0);

doc2.innerHTML="这是jQuery的第二个DOM对象"

2 jquery查找标签

jquery对标签的查找完全可以复用选择器规则

2.1 基本选择器

2.1.1 标签选择器

$('p') 标签选择器

$('.para1') 类选择器

$('#container') id选择器

$('*') 通用选择器

$('p.para1') 交集选择器

$('div,p') 并集选择器

2.1.2 层级选择器

$(div p) 后代选择器 : 找到子孙中符合条件的

$(div>p)子代选择器 : 找子代中符合条件的

$(div+p)毗邻选择器 : 找紧邻的下一个

$(div~p)弟弟选择器 : 找某一个标签下的所有xxx标签

2.1.3 属性选择器

$('[属性名]') $('[href]')

$('[属性名='属性值']') $('[href='http://www.baidu.com']')

$('[属性名^='属性值']') $('[href^='http') ^ 开头

$('[属性名$='属性值']') $('[href$='com') $ 结尾

$('[属性名*='属性值']') $('[href*='baidu') * 包含

$('[属性名!='属性值']') $('[href!='baidu') ！不等于

​

​

3 基本过滤选择器

3.1 筛选器

$(选择器:筛选器)

根据索引筛选

$('p:first')

$('p:last')

$('p:even')

$('p:odd')

$('p:eq(index)')

$('p:gt(index)')

$('p:lt(index)')

not 筛选不包含某选择器要求的xxx

$('p:not(.para3)')

has 通过子代找当前

$('li:has(a)')

表单筛选器,根据type进行筛选

$('input:type类型:选中情况')

$('input:radio:checked')

$('input:text:disabled')

$('input:text')

$('input:password')

input中没有date筛选器

$(':selected')

$('option:selected')

3.2 标签的筛选方法

兄弟 : siblings()

弟弟 : next() nextAll() nextUntil()

哥哥 : prev() preAll() prevUntil()

​

祖辈 :parent() parents() parentsUntil()

子 :children()

contains()

3.3过滤方法

.first()

.last()

.eq(index)

.not(' disable')

.filter('.para1')

.find('a')

.has('a')

操作标签的增 删 改 复制

增

父子关系

append appendTo

jq.append(dom对象/jq对象/写好的标签字符串) 表示在jq对象中添加一个标签

jq对象.appendTo(父级标签选择器/标签字符串/jq对象/dom对象)

prepend prependTo

父jq对象.prepend(子元素)

子jq对象.prependTo(父元素)

兄弟关系

after insertafter

旧.after(新)

新.insertafter(旧)

before insertbefore

旧.before(新)

新.insertbefore(旧)

删

remove 删除标签也删除事件

detach 删除标签但不删除事件

empty 清空标签内的子标签

改

旧的.replacewith(新)

新的.replaceAll(旧)

复制

clone() 单纯的克隆标签但不克隆事件

clone(true) 克隆标签包括标签所带事件

4 操作标签的文本

jq.text('要写的文本')

jq.html('要写的标签内容')

操作标签的属性

attr('class') 获取当前class的值

attr('class','value') 设置class的值

removeAttr('readonly') 删除readonly属性

prop('checked') 选中返回true 没选中返回false

操作标签的类

addclass('类名') 添加一个类

removeclass('类名') 删除一个类

toggleclass('类名') 有就删除 没有就添加

操作标签的值 - 针对表单标签

val() 如果不传参数表示获取value属性的值

val(值) 如果传参数,表示设置value属性的值

$(':checkbox').val([2])

对于radio\checkbox\select标签,所有的修改选中的状况都需要把要选中的值放到数组中

操作标签的css样式

css('样式名')

css('样式名','样式值')

css({'样式名':'样式值'})

jq绑定事件

'''<body>点击</body>

<script> $('button').click( function () { alert('click') })</script>

'''

美景惠子
关注
jQuery在线引用地址(全)
易天海
12-22 5万+
jQuery在线引用地址(全) 来源：https://www.bootcdn.cn/jquery/ 版本：3.3.1 https://cdn.bootcss.com/jquery/3.3.1/jquery.js https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js BootstrapCDN &lt;link rel="stylesheet" hr...
JQ获取click事件之前和之后的值
T_P_F的博客
02-10 1318
JQ获取click事件之前和之后的值 解决点击一下多次触发问题
jQuery 安装
ivenqin的博客
07-13 1715
本节我们学习 jQuery 的安装，我们在实际项目中，如果要使用 jQuery，则需要先下载 jQuery 库，然后把它引入到要使用的网页中。 jQuery 有下面几种使用方法： 从官网下载 jQuery 库，然后引入到页面中。 使用命令安装 jQuery，例如 npm、bower 命令。 从 CDN 中载入 jQuery， 比如从 Google 中加载 jQuery。 jQuery下载 我们 可以在 jQuery 的官网下载 jQuery，下载地址为：https://jquery.com/downl
用jQuery处理的HTML模板组件复用实现方案
落叶随风将要去远方，看沿途的风景回忆一场...
08-27 4032
项目中新建一个template文件夹，再新建一个jquery_template_beta.js文件 在js文件中粘贴如下代码 if (jQuery) { window.addEventListener('message',function (event) { var search = event.data.search; var attrs = ''; if (search) { var ms = search.match(/[a-.
各个版本的jquery引用地址
someby的博客
07-29 1万+
jquery-3.1.1（最新） 官网jquery压缩版引用地址: script src="https://code.jquery.com/jquery-3.1.1.min.js">script> jquery-3.0.0 官网jquery压缩版引用地址: script src="https://code.jquery.com/jquery-3.0.0.min.js">scrip
jQuery详细教程，基础内容罗列
weixin_53761834的博客
11-04 3322
jQuery 是一个 JavaScript 函数库。 jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。 jQuery 库包含以下功能： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 除此之外，jQuery 还提供了大量的插件。
jquery基础教程中文版2015
06-26
**jQuery基础教程中文版2015** jQuery是一款强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。2015年发布的这个基础教程，旨在帮助初学者快速掌握jQuery的核心概念和技术。 一、...
jQuery基础文件
03-30
此“jQuery基础文件”压缩包包含了jQuery的三个主要版本：1.11.3，2.1.4和3.3.1。每个版本都有其特定的发布日期和功能特性，适合不同项目的需求。 1. jQuery 1.11.3： 这是jQuery 1.x系列的一个稳定版本，主要支持...
jQuery基础教程（第四版）中文pdf版+配套源码
05-15
《jQuery基础教程（第四版）中文pdf版+配套源码》是针对JavaScript库jQuery的一份详细学习资源，旨在帮助初学者和进阶开发者掌握jQuery的核心概念和技术。jQuery是一款广泛使用的JavaScript库，它简化了HTML文档遍历...
JQuery安装与下载教程
热门推荐
Muchen灬
05-25 13万+
jQuery安装与下载 JQuery 是一个javaScript库，是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery 极大地简化javaScript编程 --juery相比js优点： jquery的onload加载事件速度更快，并且多个加载并行 【jq绑定事件都是使用的事件函数，不需要加on】； js的onloa...
jQuery安装
H_4898698的博客
05-18 852
jQuery安装 开发工具与关键技术： MVC 作者: 忄雾 撰写时间：2021/5/12 jQuery安装方式分为两种： ·从jQuery.Com下载jQuery库 ·从CDN中载入jQuery，比如从百度加载jQuery 1. 从jQuery.Com下载jQuery库 （1）.把jQuery下载到我们的电脑上，通过链接把它引入我们的文件当中 （2）.如何下载jQuery？ 打开浏览器搜索jQuery网址：jquery.Com （3）...
jQuery起点教程之安装(1)
lzhdim的专栏
02-04 359
jQuery入门指南教程这个指南是一个对jQuery库的说明，要求读者了解HTML(DOM)和CSS的一些常识。它包括了一个简单的Hello&#13; World的例子，选择器和事件基础，AJAX、FX的用法，以及如何制作jQuery的插件。&#13; 这个指南包括了很多代码，你可以copy它们，并试着修改它们，看看产生的效果。 &#13; 内容提要&#13; &#13; &#13...
jQuery下载和安装详细教程
柯晓楠
01-15 3万+
下载jQuery 我们可以到jQuery的官网下载jQuery文件（PS：其实jQuery就是一个封装了很多函数的js文件，把这个js文件导入到网页中就可以了）。 jQuery官网地址： https://jquery.com/ 打开官网，即可看到jQuery的下载按钮，点击进入下载页面。有两个版本的jQuery可以下载： Production version - 用于实际的网站中，是已经被精简和...
[jQuery]jQuery的安装
Xiao_Spring的博客
01-23 8943
jQuery是一个JavaScript的函数库，利用它我们可以便捷地使用一些javascript实现比较复杂的操作。 下面介绍三种引用jQuery库的方法 本地直接下载 我们可以访问 http://jquery.com/download/ 进行下载 有两个版本的 jQuery 可供下载： Production version - 用于实际的网站中，已被精简和压缩。 Developmen
jQuery 教程01——jQuery安装
我的博客
01-08 4812
1、简介 jQuery是一个轻量级的”写的少，做的多”的JavaScript库。 jQuery 极大地简化了 JavaScript 编程。 jQuery 很容易学习。 jQuery库包含以下功能： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 提示：
jQuery的安装和基本使用教程（萌新对课程的回忆篇）
BlockBook的博客
04-16 887
     萌新对中午学习的jQuery入门的回忆及网上知识梳理 1. 安装jQuery 度娘jQuery第一个就是它的官网 jQuery. 在其官网右上角有Download 点进去后会有最新版下载，值得一提的是，Chrome浏览器若想将jQuery下载到本地需在下载链接处“另存为”具体目录 2.语法规则 使用jQuery之前，要先将文档和文...
JQUERY在线引用地址
Logica的专栏
11-03 8万+
jquery官方的引用地址: 示例: 1<script src="http://code.jquery.com/jquery-latest.js"> 有效地址: 1 2 http://code.jquery.com/jquery-1.4.1.min.js http://code.jquery.com/jquery-1.4
【前端用法】jQuery在线引用地址(全)
No8g攻城狮的博客
03-03 1万+
BootCDN 1、稳定、快速、免费的前端开源项目 CDN 加速服务，共收录了3450个前端开源项目：https://www.bootcdn.cn/all/ 2、jQuery通过CDN在线引用地址：https://www.bootcdn.cn/jquery/ ...
jQuery基础指南
"这是一本关于jQuery的袖珍参考手册，由David Flanagan编写，旨在帮助读者快速理解和掌握jQuery基础。该书由O'Reilly Media出版，适合教育、商业或促销用途。" jQuery是一种广泛使用的JavaScript库，它简化了网页的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值