前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >JQuery 学了不亏

JQuery 学了不亏

作者头像
杨丝儿
发布于 2022-02-24 01:42:33
发布于 2022-02-24 01:42:33
1.9K00
代码可运行
举报
文章被收录于专栏:杨丝儿的小站杨丝儿的小站
运行总次数:0
代码可运行

介绍

jQuery是JavaScript的工具库,对原生JavaScript中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装,提供更完善,更便捷的方法。

使用

引入

先引入jquery文件,才能使用jquery语法

  1. CDN 有网(备用)
  2. 本地文件(常用)

工厂函数 - $()

"$()"函数用于获取元素节点,创建元素节点或将原生JavaScript对象转换为jquery对象,返回 jQuery 对象。jQuery 对象实际是一个类数组对象,包含了一系列 jQuery 操作的方法。 例如 :

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//$()获取元素节点,需传入字符串的选择器
$("h1")
$("#d1")
$(".c1")
$("body,h1,p")
//选择器的特点,与样式选择器一致

原生JavaScript对象与jQuery对象

原生JavaScript对象与jQuery对象的属性和方法不能混用。可以根据需要,互相转换 :

  1. 原生JavaScript转换jQuery对象 $(原生对象),返回 jQuery 对象
  2. jQuery对象转换原生JavaScript对象
    • 方法一 : 根据下标取元素,取出即为原生对象 var div = $(“div”)[0];
    • 方法二 : 使用jQuery的get(index)取原生对象 var div2 = $(“div”).get(0);

jQuery获取元素

jQuery通过选择器获取元素,$(“选择器”) 选择器分类 :

基础选择器

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
标签选择器:$("div")
ID 选择器:$("#d1")
类选择器:$(".c1")
群组选择器:$("body,p,h1")

层级选择器

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
后代选择器: $("div .c1") //空格分隔
子代选择器: $("div>span")

过滤选择器,需要结合其他选择器使用。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
:first
  匹配第一个元素 例:$("p:first")
:last
  匹配最后一个元素 例:$("p:last")
:odd
  匹配奇数下标对应的元素
:even
  匹配偶数下标对应的元素
:eq(index)
  匹配指定下标的元素
:lt(index)
  匹配下标小于index的元素
:gt(index)
  匹配下标大于index的元素
:not(选择器)
  否定筛选,()中选择器外,其他元素

操作元素内容

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
html() //设置或读取标签内容,等价于原生innerHTML,可识别标签语法
text() //设置或读取标签内容,等价于innerText,不能识别标签
val()  //设置或读取表单元素的值,等价于原生value属性

操作标签属性

  1. attr(“attrName”,“value”) 设置或读取标签属性
  2. prop(“attrName”,“value”) 设置或读取标签属性 注意 :在设置或读取元素属性时,attr()和prop()基本没有区别;但是在读取或设置表单元素(按钮)的选中状态时,必须用prop()方法,attr()不会监听按钮选中状态的改变,只看标签属性checked是否书写
  3. removeAttr(“attrName”) 移除指定属性

操作标签样式

为元素添加id/class属性,对应选择器样式

针对类选择器,提供操作class属性值的方法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
addClass("className")	//添加指定的类名
removeClass("className")//移除指定的类型,如果参数省略,表示清空class属性值
toggleClass("className")//结合用户行为,实现动态切换类名.如果当前元素存在指定类名,则移除;不存在则添加

操作行内样式

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
css("属性名","属性值")  //设置行内样式
css(JavaScriptON对象)			 //设置一组CSS样式
/*
JavaScriptON对象:常用数据传输格式
语法 :
  {
    "width":"200px",
    "height":"200px",
    "color":"red"
  }
*/

元素的创建,添加,删除

创建:使用$(“标签语法”),返回创建好的元素

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var div = $("<div></div>");	//创建元素
div.html("动态创建").attr("id","d1").css("color","red"); //链式调用,设置内容和属性

var h1 = $("<h1 id='d1'>一级标题</h1>");	//创建的同时设置内容,属性和样式

作为子元素添加

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$obj.append(newObj);	//在$obj的末尾添加子元素newObj
$obj.prepend(newObj);	//作为第一个子元素添加至$obj中

作为兄弟元素添加

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$obj.after(newObj);		//在$obj的后面添加兄弟元素
$obj.before(newObj);	//在$obj的前面添加兄弟元素

移除元素

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$obj.remove();	//移除$obj

数据与对象遍历

$(selector).each () 方法规定为每个匹配元素规定运行的函数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(selector).each(function(){
  body
})

匹配元素并规定运行的函数。

  • index - 选择器的 index 位置
  • element - 当前的元素

$.each () 函数是框架提供的一个工具类函数,通过它,你可以遍历对象、数组的属性值并进行处理

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$.each(Object, function(){
  body
});

为元素对象列表中的每个元素规定运行的函数。

  • index - 选择器的 index 位置
  • data- 当前的数据

jQuery事件处理

文档加载完毕

原生 JavaScript 方法:window.onload

jQuery:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//语法一 
$(document).ready(function (){
  //文档加载完毕后执行
})
//语法二 
$().ready(function (){
  //文档加载完毕后执行
})
//语法三 
$(function(){
  //文档加载完毕后执行
})

区别:原生 onload 事件不能重复书写,会产生覆盖问题;jquery 中对事件做了优化,可以重复书写 ready 方法,依次执行

事件绑定方式

事件名称省略 on 前缀

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//on("事件名称",function)
$("div").on("click",function(){});//新版本使用的多些
//bind("事件名称",function)
$("div").bind("click",function(){});//1.6-1.8间的版本
//事件名作为方法名
$("div").click(function(){});  

this 表示事件的触发对象,在 jquery 中可以使用,注意转换类型。this 为原生对象只能使用原生的属性和方法,可以使用 $(this) 转换为 jquery 对象,使用 jquery 方法。

实战

页面效果

代码分析

页面元素

初始代码

绑定省份

绑定城市

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-11-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
前端之jQuery
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象,那么它就可以使用jQuery里的方法:例如$(“#i1”).html()。
GH
2019/12/16
5K0
jquery jQuery快速入门
维护IE678是一件让人头疼的事情,一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少,PC端用户已经逐步被移动端用户所取代,如果没有特殊要求的话,一般都会选择放弃对678的支持。
IT人一直在路上
2019/09/18
16.6K0
前端架构师之01_JQuery
常见的JavaScript类库:jQuery、Prototype、ExtJS、Mootools和YUI等。
张哥编程
2024/12/13
3440
jQuery
DOM 对象 Alert 出来的效果是:[object HTML 标签名 Element]
OY
2022/03/12
10.9K0
jQuery
jQuery
onload 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
小丞同学
2021/08/16
8.7K0
JavaWeb04-jQuery(Java真正的全栈开发)
jQuery 一.jQuery入门 1.javascript类库 JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器。 核心理念是w
Java帮帮
2018/03/19
2.4K0
JavaWeb04-jQuery(Java真正的全栈开发)
jQuery介绍,一篇就够了!
老猫-Leo
2023/12/11
2430
jQuery
    2.jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“
changxin7
2022/05/06
9.1K0
jQuery
Web-第四天 jQuery学习
jQuery是一个JavaScript框架。它兼容CSS3,还兼容各种浏览器。文档说明很全,应用详细,成熟插件多。
Java帮帮
2018/07/27
3.6K0
Web-第四天 jQuery学习
jquery
维护IE678是一件让人头疼的事情,一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少,PC端用户已经逐步被移动端用户所取代,如果没有特殊要求的话,一般都会选择放弃对678的支持。
suwanbin
2019/09/26
5.9K0
全网最新、最全的jQuery核心知识,你真的不想点开看看嘛?
大家好!我是你们的老朋友Java学术趴,今天继续给大家分享jQuery的相关知识。jQuery 底层 AJAX 实现。简单易用的高层实现 .get,.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。话不多说,接下来详细给大家介绍jQuery核心知识。
Java学术趴
2021/07/31
6.1K0
day01jQuery节点操作
在JavaScript的使用过程中,存在很多问题,例如:兼容问题(咱不考虑),元素获取方式单一(只能用基本的选择器)等等,因此就出现了很多第三方的封装库(将复杂的、麻烦的功能进行封装,提供给用户一种简单的、可直接调用的形式进行使用),在众多的第三方库中脱颖而出的就是jQuery。
张哥编程
2024/12/13
740
day01jQuery节点操作
前端基础-JQuery(一)
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
cwl_java
2019/12/11
1.1K0
一文入门jQuery
一个JavaScript框架。简化JS开发。 jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨 是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优 化HTML文档操作、事件处理、动画设计和Ajax交互。 JavaScript框架:本质上就是一些js文件,封装了js的原生代码而已。
共饮一杯无
2022/11/28
3.6K0
一文入门jQuery
jquery 常用方法总结
jQuery顶级对象 缩写$    window.jQuery   window.$
用户1503405
2021/09/23
1.7K0
jquery第一次课的案例教程
js库:把一些常用到的方法写到一个单独的js文件,使用的时候直接去引用这js文件就可以了。 (animate.js、common.js)
张哥编程
2024/12/19
1590
jQuery入门前言
上次说到了JavaScript,对其有一定了解,本文就来说说jQuery。jQuery就是一个由JavaScript编写的轻量库,简单的说就是封装了一些JavaScript的操作,所以使用jQuery比使用原生的JavaScript可以达到用更少的代码做更多的事的效果。
贪挽懒月
2018/10/09
2.8K0
jQuery入门前言
Python全栈之jQuery笔记
jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob.com/manual/jquery/ jQuery笔记 笔记来源于: 传智播客的黑马程序员视频笔记. 菜鸟教程:http://www.runoob.com/ 自己的查询与整理. JS的不完美地方: 1. 代码比较麻烦,给多个元素添加事件需要遍历,可能还需要进行嵌套.
py3study
2020/01/19
5.6K0
jQuery
jQuery jQuery介绍 jQuery 是一个轻量级的、兼容多浏览器的JavaScript 库; jQuery 使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript 编程。它的宗旨就是:Write less,do more.“ jQuery的优势 一款轻量级的JS框架。jQuery核心js文件才几十kb,不会影响页面加载速度。 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,J
新人小试
2018/04/12
4.7K0
[Java面试九]脚本语言知识总结.
核心内容概述 1.JavaScript加强,涉及到ECMAScript语法、BOM对象、DOM对象以及事件。 2.Ajax传统编程。 3.jQuery框架,九种选择器为核心学习内容 4.JQuery UI插件 5.jQuery Ajax编程 6.jQuery第三方插件 7.反向Ajax编程(彗星) 一、JavaScript基础加强 JavaScript是在浏览器内容运行,无需编译、解释执行动态脚本语言,是一种弱类型语言,所有变量使用var定义。 JavaScript的3个组成部分分别为:核心(ECMAScr
一枝花算不算浪漫
2018/05/18
5.2K0
相关推荐
前端之jQuery
更多 >
LV.0
这个人很懒,什么都没有留下~
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验