jquery基础--学习笔记

news2025/7/22 0:22:58

jQuery选择器

元素、Class、id选择器

属性选择器

注意:!=如果不指定标签,会输出所有的html标签不满足的元素

如何指定?可以用之前的元素、标签或者id选择器

 

 

 层级选择器

 上面图片写错了,box应该是div,看例子就能理解

基本筛选选择器 

 

更多:jQuery选择器之基本筛选选择器 - 走看看 

Jquery的属性与样式

.attr()与.removeattr()

 

 

 .pop()与.removeProp()

 

.html()

其实就是获取标签开闭区间内的所有值(包括其他标签和属性)

 

 

 

 .text

text获取就是仅文本信息! 

 .val()

 

  <script src="js/lib/jquery.min.js"></script>
</head>
<body>

<select id="single">
<option value="0">字段1</option>
<option value="1">字段2</option>
</select>

<select id="mult" multiple="multiple">
  <option value="0" selected="selected">字段1</option>
  <option value="1">字段2</option>
  <option value="2" selected="selected">字段3</option>
</select>

<input type="text" value="hello" id="text" />


</body>

<script language="javascript">

  var value=$("#single").val(); //获取第一个元素就是 0
  console.log(value);  //0

  $("#single").val("1");  //展示value为1的text


  var value2=$("#mult").val(); //获取被选中的元素
  console.log(value2);  //0

  $("#mult").val([0,1,2]);  //选择value为0,1,2的值
 

  var value3=$("#text").val(); //获取被选中的元素
  console.log(value3);  //0

  $("#text").val("test333");  //给value新值

  $("#text").val(function(i,e){  //i索引值,e为新内容
    var newtest=e+"  "+"新加的内容";
    return newtest;
  });

</script>

 

 

 .addClass()和.removeClass()和.toggleClass()

 如何给第二个标签addClass

 

toggleClass()即 存在就删除,不存在就新增

.css()方法 不常用

 jQuery操作DOM

创建节点

创建完节点怎么用呢? 

 .append()和.appendTo()

 

有添加到末尾,什么能添加到首位呢

 

 

 

这些插入都不常用,了解就好

  jQuery遍历

 

jQuery事件

.click()

 

这里有个要注意的是,我们在点击之后,因为它下面有子标签有href属性,所以在alert弹窗之后会去执行href跳转路径。如果不想让它去执行子标签的属性,就需要使用函数,添加e.preventDefault()方法,阻止冒泡。

.focus()与.blur()

表单元素:是指可以输入的元素,如input

 .change()

 .on()与.off()

 

 

 

 jQuery操作动画

参考:菜鸟教程

jQuery 效果 – 隐藏和显示 | 菜鸟教程

示例:

上卷与下拉 

 

 淡入淡出

.animate() 了解即可

 

 jQuery ajax

jQuery ajax() 方法 | 菜鸟教程

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/17067.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【微信小程序】数据绑定

&#x1f3c6;今日学习目标&#xff1a;第十一期——数据绑定 &#x1f603;创作者&#xff1a;颜颜yan_ ✨个人主页&#xff1a;颜颜yan_的个人主页 ⏰预计时间&#xff1a;25分钟 &#x1f389;专栏系列&#xff1a;我的第一个微信小程序 文章目录前言实现数据绑定初始化数据…

[附源码]java毕业设计农村留守儿童帮扶系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

Flink cdc 2.3.0 日前发布,支持众多新特性

新连接器 2.3.0 新增了 DB2 CDC 连接器 增量快照迎来新的连接器成员 2.3.0 版本MongoDB CDC&#xff0c;Oracle CDC 两大连接器均支持了增量快照&#xff0c;实现无锁读取并发读取断点续传 优化 2.3.0 版本 MySQL CDC 连接器性能和稳定性大幅提升 Flink 支持 2.3.0 版本…

11月19日绿健简报,星期六,农历十月廿六

11月19日绿健简报&#xff0c;星期六&#xff0c;农历十月廿六1. 文旅部&#xff1a;不随意关停娱乐场所&#xff0c;无疫情发生地原则上不限制大型经营性演出观众人数。2. 人社部等五部门&#xff1a;企业不得以年龄为由“一刀切”清退大龄农民工。3. 英国政府以国家安全为由&…

Java 枚举(Enum)使用

文章目录枚举引入enum关键字实现枚举enum关键字实现枚举注意事项enum常用方法一览表enum课堂练习enum实现接口枚举引入 创建Season类, 实例化春夏秋冬四个实例 Season对象有如下特点 1.季节的值是有限的几个值(spring, summer, autumn, winter) 2.只读&#xff0c;不需要修改…

开始数据治理时三个常见的陷阱和解决方法

当我们与客户合作帮助他们提高数据管理能力时,大多数部门都同意更好的数据治理将有助于解决他们的数据问题。然而,我们发现数据治理很少是优先事项,而且往往被搁置一旁,去支持更紧迫的业务工作。这有点像使用牙线——当你在牙医诊所时很容易获得动力,但当你回到家时很难保…

GC垃圾回收相关算法(宋红康JVM学习笔记)

什么是垃圾&#xff1f; 垃圾收集机制是Java的招牌能力&#xff0c;极大地提高了开发效率。如今&#xff0c;垃圾收集几乎成为现代语言的标配&#xff0c;即使经过如此长时间的发展&#xff0c;Java的垃圾收集机制仍然在不断的演进中&#xff0c;不同大小的设备、不同特征的应用…

[附源码]java毕业设计辽宁科技大学疫苗接种管理系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

果蔬同城配送小程序有什么作用_分享果蔬同城配送小程序的作用

1、蔬菜生鲜产品展示&#xff1a;用户打开买菜必备软件&#xff0c;就能查看琳琅满目的新鲜水果、蔬菜、肉类、零食等产品&#xff0c;为用户展示更多信息&#xff0c;提升用户下单率。经常更新商品的照片、视频&#xff0c;让客户可以在线浏览和挑选&#xff0c;足不出户就能买…

二叉树的最大深度(C++两种思路递归和层序)超详解小白入

原题链接–>戳这里直达 二叉树的最大深度深度搜索&#xff08;递归&#xff09;递归思想和详解C代码代码效率广度搜索&#xff08;层序查找&#xff09;层序查找的思路C代码代码效率总结深度搜索&#xff08;递归&#xff09; 最近新学习了树形结构&#xff0c;上课的时候听…

MATLAB算法实战应用案例精讲-【数模应用】随机梯度下降法(SGD)

前言 随机梯度下降算法(Stochastic gradient descent, SGD)源于1951年Robbins和Monro[6]提出的随机逼近, 最初应用于模式识别和神经网络. 这种方法在迭代过程中随机选择一个或几个样本的梯度来替代总体梯度, 从而大大降低了计算复杂度. 1958年Rosenblatt等研制出的感知机采用了…

JAVA开发(Redis使用缺陷场景)

常见的redis使用缺陷场景主要有3个&#xff0c;分别是缓存穿透&#xff0c;缓存击穿&#xff0c;缓存雪崩。 穿透&#xff0c;&#xff08;关键词&#xff0c;缓存中没有的&#xff0c;数据也没有&#xff09; 击穿&#xff08;大量同时请求过期的key&#xff09; 雪崩&…

多目标优化问题入门理论

0 前言 多目标优化在推荐系统、物流配送、路径规划等中有广泛的应用 一些多目标优化算法主要就是求解问题的 Pareto 前沿或者近似前沿。从目标空间来看&#xff0c;就是他的边界了。 1. 优化问题 1.1 无约束的单目标优化问题 minxf(x),x∈RN(1)min_x \quad f(x), x \in R^N…

解决jupyter TOC勾选了但不显示的问题

解决jupyter TOC勾选了但不显示的问题 有时候TOC&#xff08;Table of content2&#xff09;反应很慢&#xff0c;或者勾选了根本就不显示。或者隔三岔五nbextension消失&#xff0c;按以下步骤解决问题&#xff1a; #mermaid-svg-rbxou4Xusp7FoS9q {font-family:"trebuc…

ArcGIS pro底图大全

ArcGIS pro底图大全 Mid-Century Street World Topographic Map Navigation Map Street Night Terrain with label Oceans National graphic style map Modern antique 668753925730)] Modern antique

CAD中如何绑定外部参照和revit中链接CAD功能

一、CAD中如何绑定外部参照 首先我们要了解什么叫外部参照外部参照是指将一副图以参照的形式引用到另外一个或多个图形文件中&#xff0c;外部参照的每次改动后的结果都会及时的反映在最后一次被参照的图形中&#xff0c;另外使用外部参照还可以有效的减少图形的容量&#xff0…

Mockito的@Mock与@MockBean

在上文的 https://blog.csdn.net/dlf123321/article/details/127930378 里 大家初步会用mockito了 但是马上出现了一个问题。 package com.example.demo.controller;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.example.demo.entity.Per…

【算法】数组之二分查找移除元素

目录 1、数组理论基础 2、二分查找 2.1 区间左闭右闭写法 2.2 区间左闭右开写法 3、移除元素 3.1 暴力解法 3.2 双指针&#xff08;快慢指针&#xff09;法 1、数组理论基础 参考以前的博客&#xff1a;http://t.csdn.cn/HAVSF 2、二分查找 力扣https://leetcode.cn/p…

Denodo通过重要任命新增执行团队成员:Daniel Lender担任首席财务官,Stephen Welles担任首席法务官

韩国Pulmuone选择Aera Decision Cloud™来提升服务&#xff0c;降低成本&#xff0c;并支持可持续性 决策智能化公司Aera Technology今日宣布与韩国领先的生鲜食品公司、全球排名居首的豆腐生产商Pulmuone Co. Ltd.合作&#xff0c;帮助这家全球领军企业实现供应链决策智能化。…

数据结构之栈和队列

目录 1.栈的概念2、栈的实现 1、队列的概念2、队列的实现 今天介绍的是栈和队列。 先说栈吧。 1.栈的概念 栈也是线性表的一种&#xff0c;不过他较为特殊。他只能在一边进行数据的出入。也就是说晚进的数据先出去。进行数据进出的一端叫做栈顶&#xff0c;另一端叫做栈底…