Jquery学习知识点

最新推荐文章于 2024-05-05 23:51:11 发布
最新推荐文章于 2024-05-05 23:51:11 发布
阅读量323 收藏
点赞数 1
分类专栏： web开发 文章标签： 入门 jquery Ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coder_zyz/article/details/51286451
版权

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

$("p.intro")           所有 class="intro" 的 <p> 元素
$("ul li:first")        每个 <ul> 的第一个 <li> 元素

jQuery 事件

$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

jQuery 效果

（1） 显示与隐藏

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

(2)  淡入淡出

$(selector).fadeIn(speed,callback);//淡入已隐藏的元素
$(selector).fadeOut(speed,callback);//淡出可见元素
$(selector).fadeToggle(speed,callback);//jQuery fade
Toggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
$(selector).fadeTo(speed,opacity,callback);//允许渐变为给定的不透明度（值介于 0 与 1 之间）
(3)  滑动、动画，stop()
Jquery HTML

(1)获得内容 - text()、html() 以及 val()

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容（包括 HTML 标记）
  • val() - 设置或返回表单字段的值
  • attr() 方法用于获取属性值。
（2）jQuery 操作 CSS
    
  • addClass() - 向被选元素添加一个或多个类
  • removeClass() - 从被选元素删除一个或多个类
  • toggleClass() - 对被选元素进行添加/删除类的切换操作
  • css() - 设置或返回样式属性
Jquery 遍历
（1）向上遍历 DOM 树

  • parent()   //被选元素的直接父元素
  • parents()  // 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
  • parentsUntil()  //返回介于两个给定元素之间的所有祖先元素

( 2 )向下遍历 DOM 树

  • children()//返回被选元素的所有直接子元素
  • find();//回被选元素的后代元素，一路向下直到最后一个后代
( 3 ) DOM 树中遍历元素的同胞元素。
  • siblings()   //返回被选元素的所有同胞元素,可以使用可选参数来过滤对同胞元素的搜索
  • next()       //next() 方法返回被选元素的下一个同胞元素,该方法只返回一个元素。
  • nextAll()    //返回被选元素的所有跟随的同胞元素。
  • nextUntil()   //返回介于两个给定参数之间的所有跟随的同胞元素
  • prev()
  • prevAll()
  • prevUntil()
( 4 ) 过滤
    first() 方法返回被选元素的首个元素。
     last() 方法返回被选元素的最后一个元素。
     eq() 方法返回被选元素中带有指定索引号的元素。// $("p").eq(1);以0开始
   filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。// $("p").filter(".intro");
   not() 方法返回不匹配标准的所有元素。

coder_zyz
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery知识点
anye_zhuzai的博客
04-16 846
两种引入 1、本地引入:<sciipt scr ="js/jquery-3.5.1.min.js"></script> 2、cdn引入:<sciipt scr ="https://code.jquery.com/jquery-3.5.1.min.js"></script> 两种写法 1、$(document).ready(function(){ }) 2、$(function(){ }) ............
JQuery 基础知识学习（详尽版）
菜鸟心声：学的不仅是技术，更是梦想！
03-13 3040
JQuery 详尽的基础知识学习jQuery 语法jQuery 选择器jQuery 选择器（大全）jQuery 事件ready()holdReady()on()off()one()其他事件案例01jQuery CSS样式案例02jQuery DOM遍历遍历父元素案例03遍历同级元素案例04遍历子元素案例05first()last()eq(number)filter(selector)not(selector)jQuery 增删元素增加元素删除元素案例06jQuery 尺寸jQuery 效果显示隐藏淡入淡出滑
jQuery重点知识整理
m0_64336780的博客
04-16 1万+
目录 jQuery简介 jQuery版本说明 选择器 DOM操作 事件处理 事件之绑定事件处理器 事件之鼠标事件 事件之表单事件 事件之键盘事件 事件之浏览器事件 事件对象 遍历 动画 jQuery简介 jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提 供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和 操作、事件处理、动画操作更加简单。 jQuery最大的优点就是简化DOM操作。 jQuery版本说明 jQuer
jQuery知识点（全）
woai_mihoutao的博客
03-14 1632
## 为什么要学jquery 使用javascript开发过程中，有许多的缺点： 1. 查找元素的方法单一，麻烦。 2. 遍历数组很麻烦，通常要嵌套一大堆的for循环。 3. 有兼容性问题。 4. 想要实现简单的动画效果，也很麻烦 5. 代码冗余。 ## 体验jquery的使用 ```javascript /* * 1. 查找元素的方法多种多样，非常灵活 * 2. 拥有隐式迭代特性，因此不再需要手写for循环了。 * 3. 完全没有兼容性问题。 * 4. 实现动画非常简单，
jQuery 学习
最新发布
2401_84152991的博客
05-05 904
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
jQuery事件知识点部分总结
m0_65511328的博客
04-28 1660
在学习jQuery中，我做了一些总结，需要的可以作参考（仅供参考）。 在VS软件中用jQuery时，必须要使用jQuery插件。 例： <scriptsrc="./js/jquery-3.6.0.min.js"></script> 1.jQuery文档加载事件 2.鼠标移入移出事件 // 鼠标移入事件 $("#box").mouseenter(function(){ // alert('mouseenter事件被触发了')...
jQuery学习和知识点总结归纳
热门推荐
好学若饥，谦卑若愚
05-13 5万+
1、jQuery简介 jQuery是一个实用的JavaScript库。jQuery极大地简化了JS对DOM的操作，实现一些常用的方法，jQuery还可以链式操作。 2、jQuery的基本用法 //引入jQuery文件，可以本地也可以远程 //当文档完成加载完时触发，避免获取dom对象时，dom对象还没有加载 $(document).ready(function(){ //写js语句或者j
jQuery学习笔记
qq_52476758的博客
03-09 1294
1. 初始JQuery1.1 原生js的缺点1.2 体验jQuery2. JQuery的基础2.1 jQuery的入口函数2.2 $是一个函数2.3 DOM对象和jQuery对象3. jQuery元素设置3.1 设置获取文本内容text()3.2 设置获取样式css()3.3 设置类名class()3.4 设置属性attr()3.5 prop()操作布尔类型的属性4. 选择器4.1 基本选择器4.2 层级选择器4.3 过滤选择器-隔行变色4.4 筛选选择器(方法)5. 动画5.1 基本动画5.1.1 显示.
jQuery知识点总结
梓栋DREM
04-06 2846
jquery day01 一：体验 jQuery是一个JavaScript函数库。 jQuery是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery库包含以下功能： HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM、遍历和修改、AJAX… 注意 jquery 可以有多个并且不会被覆盖 只需要文档加载成...
jQuery 学习(1)
2301_78145364的博客
05-05 1004
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
jQuery知识点.docx
07-07
在本篇笔记中，我们将深入探讨 jQuery 的一些核心知识点。 首先，我们关注初始化过程。`$(document).ready()` 与 `window.onload` 都用于在页面加载完成后执行代码，但它们有区别。`$(document).ready()` 在 DOM ...
适合学习jQuery的学习讲义
05-30
jQuery学习讲义 jQuery是一种JavaScript函数库，它的设计理念是“写的更少，做的更多”。...同时，jQuery还提供了大量的插件，如...以上是jQuery学习讲义的知识点，旨在帮助初学者快速掌握jQuery的基本概念和使用方法。
JQuery学习提纲
01-08
推荐大家按照以下知识点的顺序循序渐进地学习 一. JQuery安装 若采用CDN服务器的方式在线加载，可以访问国内开源库CDN服务器，查询各个版本可用的JQuery库链接 二. JQuery语法 JQuery本质上仍然是对DOM和样式进行...
jQuery学习心得总结(必看篇)
10-22
这篇文章主要总结了学习jQuery的一些关键知识点。 首先，jQuery对象是通过jQuery包装DOM对象后生成的，它拥有jQuery特有的方法，不能直接使用DOM对象的方法。在jQuery中，通常用$符号来表示jQuery对象。jQuery对象...
JQuery知识框架
11-05
本框架旨在为初学者提供一个全面的jQuery学习路径，帮助构建起完整的jQuery知识体系。 1. **jQuery基础知识** - **选择器**: jQuery的选择器类似于CSS，用于选取HTML元素，如`$("#id")`选择ID为id的元素，`$("....
MyBatis注解的巧妙使用---@InsertProvider,@UpdateProvider,@DeleteProvider和@SelectProvider
coder_zyz的专栏
01-07 2万+
在项目的开发过程中发现经常有对单个对象的增删改查，如果每个都进行写SQL非得写到吐血，类比hibernate,MyBatis其实也提供了相应的注解对不通的对象写相同的方法，只是修改对象就可以了，主要用到的注解有以下四个，用于增删改查：@InsertProvider,@DeleteProvider@UpdateProvider,和@SelectProvider，下面我们着重介绍下在项目中我使用@Se
JsPlumb初始化和添加连线、端点等
coder_zyz的专栏
01-05 1万+
项目背景：项目上需要通过JsPlumb连线库表示两个表的关联关系，效果图如下： 左侧为数据仓库中的表分类，右侧上为模型设计区，下为数据预览区。 下面展示jsPlumb的初始化代码 jsPlumb.ready(function() { var color = "#E8C870"; var instance = jsPlumb.getInstance({
通过ajax实现对某个div的整体刷新替换（异步加载）
coder_zyz的专栏
12-27 1万+
首先吐槽下公司的框架，grid的宽度可能是根据屏幕长度自动适应，但是遇到了一个问题， 隐藏的grid.show()时，宽度变为最小宽度，未解决该问题，不使用toggle的方法，直接通过ajax异步加载该DiV,同时该方法也解决了grid的表头不确定的问题 整体异步加载DIV function loadURLWithTip(url , panel , callback , tip){
spring+mybatis框架中转化驼峰的两种解决方案
coder_zyz的专栏
04-16 1万+
  项目中因为要用到驼峰，需要将所有的bean对象和Map转化为驼峰标识，项目里用到一下方式1.是resultType="java.util.Map"返回值为Map类型的这里采用拦截器，拦截相应的Map返回值，在mybatis-config.xml里添加如下内容： &lt;plugin interceptor="org.loushang.framework.mybatis.RestlutMapIn...
JavaScript基础与jQuery学习笔记
"小晨星分享的jQuery学习笔记" 这篇文档是小晨星在学习jQuery过程中整理的重要知识点，旨在帮助他人更好地理解并掌握jQuery。jQuery是一个高效、易用的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值