文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

js与jQuery的区别以及jQuery选择器和方法的使用

目录 使用jQuery js与jQuery代码对比 jQuery选择器：用来选中元素 基本方法 ---- js与jQuery代码对比 jQuery选择器：用来选中元素 基本方法 使用jQuery jQuery...官网：http://jquery.com/ 为什么要学jQuery：可以简化JavaScript开发，jQuery中包含有：选择器，CSS样式，HTML事件处理，JS动画 以及丰富的插件等等，而且浏览器兼容性很高...那么背景色的css属性单词是哪个？伙计们还记得么？background 对的。...现在我们要同时设置两个属性，背景色和字体颜色。那么这种同时要设置多个样式时格式该咋写？.../* 表单选择器 */ //给提交按钮添加点击事件 $("#ok").click(function(){ //获取表单中被选中的单选按钮的值  :radio表示单选按钮 :checked表示被选 //中的

16.7K10

jQuery入门基础——选择器

划重点，这句话要考 官网：http://jquery.com/ Why：可以简化JavaScript开发，jQuery中包含有：选择器，CSS样式，HTML事件处理，JS动画 以及丰富的插件等等，而且浏览器兼容性很高...那么背景色的css属性单词是哪个？伙计们还记得么？background 对的。...现在我们要同时设置两个属性，背景色和字体颜色。那么这种同时要设置多个样式时格式该咋写？...首先我们同样的是给所有的p标签 和 span标签设置样式，我们可以直接用元素标签，先写一个p，然后还要再加上span：$("p,span").css("color","pink"); 来，我们看一下疗效.../* 表单选择器 */ //给提交按钮添加点击事件 $("#ok").click(function(){ //获取表单中被选中的单选按钮的值  :radio表示单选按钮 :checked表示被选 //中的

10.5K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    【JavaScript——函数编写】请到下一步（蓝桥杯真题-7326）【合集】

    背景介绍 我们注册一个账号，经常会用到步骤条填写资料，本题需要使用 jQuery 去实现步骤条表单的切换。...在 css/style.css 文件中，对表单和步骤条的样式进行了设置，使用 :not 选择器和 display:none 实现了分步骤表单的显示/隐藏效果。...要求规定 请勿修改 index.html、css/style.css、jquery-3.6.0.min.js 文件中的任何内容。 表单的切换操作，只能使用 display 属性来控制。...按钮样式： #allform .action-button 和 #allform .action-button-previous：设置 “下一页” 和 “返回” 按钮的样式，包括背景颜色、字体颜色和边框样式...表单标题样式： .form-title：设置表单标题的样式，包括字体大小和颜色。 步骤条样式： #progressbar：设置步骤条的整体样式，包括宽度和计数器重置。

    55100

    【前端基础篇】JavaScript之jQuery介绍

    前言 在阅读过程中可以把代码片复制到vscode上去浏览器看实际效果，更易理解喔 JQuery基本介绍和使用方法 W3C 标准给我们提供了⼀系列的函数, 让我们可以操作: ⽹⻚内容 ⽹⻚结构 ⽹⻚样式...属性 css()⽅法设置或返回被选元素的⼀个或多个样式属性 代码⽰例： 获取元素属性 我是⼀个⽂本 $...inputId").val("新值"); // 用户在 inputId 输入框中会看到值被更新为 "新值" css(): 获取或设置CSS属性，能够动态地改变元素的样式，是实现动态交互效果的重要工具。...，通常与addClass()配合使用，用于动态样式切换。...; }); // 用户提交表单时，弹出提示 change(): 当表单元素的值发生变化时触发，适用于下拉菜单或单选按钮等。

    3.3K10

    看不完的那种！前端170面试题+答案学习整理（良心制作）

    属性：normal只在允许的断字点换行；break-word在长单词或url地址内部进行换行。...36.选择器中id，class有什么区别 id，在网页中每个id名称只能有一次，class可以重复使用 37.为了将单选按钮组的第二个选框设置为选中状态，如何设置 $('input[name=items...114.单击超链接后自动跳转，单击“提交”按钮后表单会提交等，有时候，为了阻止默认行为，怎么办 使用event.preventDefault()或在事件处理函数中返回false，即是return false...119.如何设置和获取html以及文本的值 使用html()方法，类似于innerHTML属性，可以用它读取或设置某个元素中的HTML内容。...128.如何解决ios设置中input按钮样式会被默认样式覆盖的问题 input, textarea { border: 0; -webkit-appearance: none; } 129.如何解决移动端

    13.1K50

    继续死磕前端

    1.1 jquery 选择器 还记到大明湖畔（CSS）的夏雨荷（选择器）吗？选择器可以快速定位到元素并为其应用样式效果。jquery 选择器的选择规则与 CSS 相同，只是目的是为其添加操作。...// 获取div的样式 $("div").css("width"); $("div").css("color"); // 赋值 $("div").css("width","20px"); $("div...//方式2 获取元素的索引值可以使用 index() 方法 1.3 jquery 动画 通过 animate 方法可以设置元素某属性值上的动画，动画执行完后会执行一个函数。...当我们验证邮箱格式、手机号、身份证号时必不可少，那么 jquery 中如何使用呢？...通过： event.stopPropagation(); 既然说起阻止事件冒泡了，那么我们也提一下如何阻止表单提交吧： event.preventDefault(); 实际开发中其实常常将其混合使用，也就是两句话写在一起使用

    3.7K10

    前端(四)-jQuery

    ； 常用方法 方法 说明 $(this).find("标签名") 当前标签下的指定标签 $(this).index() 当前标签的下标 3、jQuery基本操作 3.1 样式操作 方法(已声明好的外部样式类名...，多个使用空格分割) 说明 addClass("样式类名") 添加样式 removeClass("样式类名") 移除样式 toggleClass("样式类名") 切换样式(就是添加和移除结合)可以与hover...$(html) 使用HTML字符创建jQuery节点 3.4.2 插入节点 1 元素内部插入子节点 方法 说明 $(A).append(B) 将B节点追加到A节点的子节点中 $(A).appendTo...").end().last().css({"background-color":"pink"}); //可以选取到第一个li和最后一个li //先选取第一个li，然后end()清除.first()的过滤...prop() 方法设置或返回被选元素的属性和值 prop(参数1，参数2)： 参数1用于设置属性 参数2设置属性值 下面一个简单的案例来应用一下这个方法： head部分 <script src="

    9.9K30

    HTML编码规范

    解释： 结构-样式-行为的代码分离，对于提高代码的可阅读性和维护性都有好处。 [建议] 在 head 中引入页面需要的所有 CSS 资源。...解释： 在页面渲染的过程中，新的CSS可能导致元素的样式重新计算和绘制，页面闪烁。 [建议] JavaScript 应当放在页面末尾，或采用异步加载。...示例： 提交 取消 [建议] 尽量不要使用按钮类元素的 name 属性。...解释： 负责主要功能的按钮应相对靠前，以提高可访问性。如果在 CSS 中指定了 float: right 则可能导致视觉上主按钮在前，而 DOM 中主按钮靠后的情况。 示例： <!...解释： 当浏览器 JS 运行错误或关闭 JS 时，提交功能将无法工作。如果正确指定了 form 元素的 action 属性和表单控件的 name 属性时，提交仍可继续进行。

    4.5K41

    【编码规范】HTML编码风格指南

    示例： 3.2 编码 页面必须使用精简形式，明确指定字符编码。指定字符编码的 meta 必须是 head 的第一个直接子元素。...解释： 在页面渲染的过程中，新的CSS可能导致元素的样式重新计算和绘制，页面闪烁。 JavaScript 应当放在页面末尾，或采用异步加载。 解释： 将 script 放在页面中间将阻断页面的渲染。...示例： 提交 取消 尽量不要使用按钮类元素的 name 属性。...解释： 负责主要功能的按钮应相对靠前，以提高可访问性。如果在 CSS 中指定了 float: right 则可能导致视觉上主按钮在前，而 DOM 中主按钮靠后的情况。 示例： <!...解释： 当浏览器 JS 运行错误或关闭 JS 时，提交功能将无法工作。如果正确指定了 form 元素的 action 属性和表单控件的 name 属性时，提交仍可继续进行。

    3.9K30

    JavaWeb04-jQuery(Java真正的全栈开发)

    它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器。 jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。...：image 按钮，可以显示图片 ：reset 重置 ：button 按钮 或 ：file 文件上传 ：hidden attr(key,val) 给指定的属性设置值。（设置一个） attr(pro) 给jQuery对象设置一组值。使用JSON格式。..."> css(name) 获得样式 css(name,value) 设置样式 css(pro) 使用json设置一组样式 5.位置 offset() 获得位置，返回json数据。...([val]) 获得 或 设置 水平滚动条的位置 6.尺寸 height([val]) 获得 或 设置 高度 width([val]) 获得 或 设置 宽度 五.文档处理 内部插入,外部插入,复制,替换

    3K90

    Bootstrap笔记

    Otto 和 Jacob Thornton 在 2011 - 年发起的，并利用业余时间完成第一个版本的开发；为什么使用Bootstarp？...-- 你自己的样式或其他文件 --> css"> CSS媒体查询功能基础CSS样式概要预置排版样式统一预制标签样式按钮样式表格样式表单样式图片样式辅助工具类代码样式栅格系统响应式工具类预置界面组件导航导航条面包屑导航下拉菜单按钮式下拉菜单按钮组输入框组警告框页头分页列表组面板媒体对象进度条...Glyphicons标签徽章缩略图大屏幕嵌入内容内嵌JavaScript插件JavaScript插件的依赖情况如何使用Javascript插件内置组件模态对话框下拉菜单滚动监听标签页工具提示弹出框警告框按钮折叠面板轮播图吸顶效果...-- 你自己的样式或其他文件 --> css"> <!

    4.6K90

    前端架构师之01_JQuery

    2.5 元素样式 元素样式操作是指获取或设置元素的style属性。 在jQuery中，可以很方便的设置元素的样式、位置、尺寸等属性。 例如，通过css()方法可以设置背景色。...语法 说明 css(name) 获取第一个匹配元素的样式 css(properties) 将一个键值对形式的对象设置为所有匹配元素的样式 css(name, value) 为所有匹配的元素设置样式 width...() 获取第一个匹配元素的当前宽度值（返回数值型结果） width(value) 为所有匹配的元素设置宽度样式（可以是字符串或数字） height() 获取第一个匹配元素的当前高度值（返回数值型结果）...在获取或设置属性时，建议操作元素的状态，如checked、selected或disabled时使用prop()方法，其他的情况使用attr()方法。...若要为匹配到的元素添加和移除多个样式类名，则样式类名之间可使用空格进行分隔。 2.8 练习作业 折叠菜单 编写网页，设置CSS完成折叠菜单的结构和样式设置。

    3.1K00

    Jquery基础学习笔记(1)

    此笔记只是作为本人学习JQuery的随手笔记,稍微做了一下整理,希望对新人有参考价值。...1、属性： 为所有匹配的元素设置一个计算的属性值 //为所有的input添加属性class=”btn”             //$(“input”).attr(“class”,”btn”);     ...2、CSS：为每个匹配的元素添加指定的类名             //对所有的提交按钮添加样式             $(“input:submit”).addClass(“btn”);    3...、值：获得第一个匹配元素的当前值             //取的某一按钮的值             //alert($(“#Button1”).val());    4、Html代码：取得第一个匹配元素的...DOM元素转化为jQuery对象             //设置页面背景色             $(document.body).css(“background”,”#c0c0c0″);

    41930

    JQuery快速入门

    Write less, do more, I like jQuery. jQuery是最常用的js库，整体来说非常轻量并易于扩展，对于移动应用可以使用其更轻量的孪生兄弟Zepto代替。...在使用jQuery时，需要注意jQuery对象和DOM对象的区别，通常对于jQuery对象，会在变量前加$，如var $variable=jQuery对象;。可以通过如下方式对两者进行转化。...').attr('class'); 设置样式：$('p').attr('class', 'handsome'); 追加样式：$('p').addClass('another'); 设置和获取HTML、文本和值...，而不是json提交，需要注意（通常调用接口，使用json提交；而页面的ajax请求，推荐使用form提交，会比较简单）。...对于jQuery中的事件来说，其均使用事件冒泡机制，而不支持时间捕获机制(可以用原生js)。

    3.5K100
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券