html select 默认选择器,jQuery选择器&根据值设置select下拉框的默认值

最新推荐文章于 2023-10-07 22:30:05 发布
最新推荐文章于 2023-10-07 22:30:05 发布
阅读量510 收藏
点赞数
文章标签： html select 默认选择器

选择器是是jQuery的基础，在jQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器。熟悉地使用选择器，不但能简化代码，而且能够事半功倍。

jQuery选择器的类型

1. 通过CSS选择器选取元素

基本选择器

层次选择器

属性选择器

2. 通过过滤选择器选择元素

基本过滤选择器

可见性过滤选择器

基本选择器

jQuery的基本选择器与CSS基本选择器相同，主要由元素标签选择器、class(类选择器)id选择器和多个选择器组成。jQuery基本选择器的详细说明如下表：

17979680c0a7

image.png

例：

17979680c0a7

image.png

代码：

图书简介

$(document).ready(function(e) {

$("#mybtn1").click(function(){

$("h1").css("color","blue");

});

$("#mybtn2").click(function(){

$(".price").css({

"background":"green","padding":"5px"

}) ;

});

$("#mybtn3").click(function(){

$("#author").css("color","red")

});

$("#mybtn4").click(function(){

$("#author,h1,.price").css("color","yellow")

});

$("#mybtn5").click(function(){

$("*").css("font-weight","bold");

});

});

岛上书店

岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]

自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！

[美] 加·泽文(Gabrielle Zevin) 著；孙仲旭，李玉瑶 译

京东价： ￥24.10 [6.9折]

[定价：￥35.00]

(降价通知)

促销信息：手机专享价 ￥9.90

以下促销可在购物车任选其一
加价购 满99.00元另加6.18元即可在购物车换购热销商品
满减 满100.00减20.00，满200.00减60.00，满300.00减100.00

领 券：105-6 200-16

改变标题的颜色【标签选择器】

改变价格区域的颜色【类选择器】

改变作者信息的颜色【id选择器】

同时改变三个信息的颜色【并集选择器】

所有信息的字符加粗【*选择器】

层次选择器

17979680c0a7

image.png

siblings()

用于选取每个匹配元素的所有同辈元素(不包括自己)，并以jQuery对象的形式返回，此处即是选择除当前单击菜单项之外的其他同级菜单项。

可以使用this来调用，而"~"不能使用this

toggle()

toggle()方法则用于切换元素的可见状态，如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

例：当在浏览器中显示该页面时，全部菜单展开后的效果如下图：

单击“上海市”菜单，则“上海市”菜单下的所有子菜单全部折叠；再次单击折叠之后的“上海市”菜单，则“上海市”菜单下的所有子菜单全部展开。

17979680c0a7

image.png

代码：

无标题文档

$(document).ready(function(e) {

$("dt").click(function(){

$(this).siblings("dd").toggle();

});

});

北京市
昌平区
房山区
海淀区
大兴区
上海市
黄浦区
长宁区
宝山区
闸北区
闵行区
重庆市
江北区
渡中区
大渡口区
南岸区

属性选择器

属性选择器通过HTML元素的属性来选择元素

17979680c0a7

image.png

例：

17979680c0a7

image.png

代码：

京东快报

$(document).ready(function(){

$("#mybtn").click(function(){

window.location.reload();//刷新页面

});

$("#mybtn1").click(function(){

$("#news a[class]").css("background","#ccc")

});

$("#mybtn2").click(function(){

$("#news a[class='hot']").css("background","#ccc")

});

$("#mybtn3").click(function(){

$("#news a[class!='hot']").css("background","#ccc")

});

$("#mybtn4").click(function(){

$("#news a[href^='www']").css("background","#ccc")

});

$("#mybtn5").click(function(){

$("#news a[href$='html']").css("background","#ccc")

});

$("#mybtn6").click(function(){

$("#news a[href*='news']").css("background","#ccc")

});

});

根据值设置select下拉框的默认值

attr

attr():设置或返回被选元素的属性值。

例：

17979680c0a7

image.png

代码：

任务5：根据值设置select下拉框的默认值

$(document).ready(function(){

$("#btn1").click(function(){

$("#myselect option[value='上海市']").attr("selected","selected")

});

$("#btn2").click(function(){

$("#myselect option[value='重庆市']").attr("selected","selected")

});

});

请选择参选城市：

天津市

上海市

北京市

重庆市

weixin_39901685
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery取消选择select下拉框示例代码
12-09
有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿………. 下面是三个select: 代码如下:<select name=”pWaqqqy” id=”sel_type” onchange=”...
jQuery操作select下拉框的text值和value值的方法
12-08
1、jquery获取当前选中select的text值 var checkText=$(“#slc1”).find(“option:selected”).text(); 2、jquery获取当前选中select的value值 var checkValue=$(“#slc1”).val(); 3、jquery获取当前选中select的...
jquery给下拉框设置默认值
weixin_40140969的博客
09-18 4121
for(let i in nameData){ $("#userName").val(nameData[i].userName).trigger("change"); } 笔记
html select字体选择器,HTML DOM
weixin_39809140的博客
06-03 163
HTML DOM querySelector() 方法实例修改 class="demo" 的 元素的第一个子元素文本内容：varx=document.getElementById("myDIV");x.querySelector(".demo").innerHTML="Hello World!";尝试一下 »定义与用法querySelector() 方法返回匹配指定 CSS 选择器元素的第一个...
jquery设置select的默认值
u011674641的博客
07-19 1775
aaaa bbbb 第一种设置值： $(function(){ $("#sel").attr("s1","") }); 第二种设置值得方式：是将select中的任何一个 option 来设为默...
两种情况下设置select下拉框的默认值
xiamoziqian的博客
05-15 1万+
默认值固定/已知的情况：使用selected属性 默认选中第二个 <select name="plan" id="plan"> <option value="free">Free</option> <option value="starter" selected>Starter </option> <option value="professional">Professional</option&gt
如何设置HTML select下拉框的默认值？
热门推荐
qq_37117258的博客
09-05 6万+
HTML中的select标签用于创建可选择选项的下拉列表；option标签包含选定时将使用的值。那么如何来设置select下拉框里的默认值？下面本篇文章就来给大家介绍一下，希望对大家有所帮助。 我们可以在所需选项上使用“selected”属性来设置select元素的默认值，这是一个布尔属性。 默认情况下，具有“selected”属性的option标签将显示在下拉列表select标签中。 ...
基于jQuery的select下拉框选择触发事件实例分析
12-29
本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法。分享给大家供大家参考，具体如下： 我一直以来都认为，select 下拉框选择对选项 options 使用 onclick 注册事件即可，如下： <select> 选项一...
HTML如何设置select下拉框的默认值？
qq_45750154的博客
07-05 2万+
本篇文章给大家介绍设置select下拉框默认值的方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 我们可以在所需选项上使用“selected”属性来设置select元素的默认值，这是一个布尔属性。 默认情况下，具有“selected”属性的option标签将显示在下拉列表select标签中。 语法： <optionvalue="value"selected>选项名称</option> 示例1：使用selected属性 <!DOCTY..
设置下拉复选框的默认选值
王世洪的博客
01-02 5818
在报表的使用过程中，有这样的应用场景：在下拉复选框中，或由于数据量大，需要实现下拉框自动勾选全部数据；或希望智能化，需要根据某个值来自动勾选符合条件的数据。如下图： 在报表制作过程中，我们可以在预设定的下拉复选框单元格中输入值或公式，根据情况自动获取全部或满足条件的数据，此时下拉复选框就会根据获取到的值，自动勾选满足条件的数据。 如下： 1、报表界面设计： 2、下拉复选框数据： ...
html select 默认选择器,AntD Select 选择器设置默认选中项
weixin_42517486的博客
06-03 822
AntD Select 选择器设置默认选中项2020年07月17日|萬仟网IT编程 |我要评论没什么可说的直接放代码:default-value="{ key: defaultSheet }" 没什么可说的直接放代码:default-value="{ key: defaultSheet }":default-value="{ key: ...
Element Ui 中Select下拉框 默认值初始化失败
youyudehan的博客
09-13 598
Element Ui 中Select下拉框 默认值初始化失败
html中的select使用 选择器选择对应值
yyd6976的博客
01-02 959
$("#selectId option[value='value']").removeAttr("selected"); $("#selectId option[value='value']").attr("selected","selected"); 将 ID 与 value修改使用即可
总结html5中常见的选择器
最新发布
忧郁的蛋的专栏
10-07 1618
例如，`h1 + p`表示选取紧接在 `` 元素后面的第一个 `` 元素。10. 通用兄弟选择器（General Sibling Selector）：使用波浪号（~）分隔的选择器，表示选取某个元素后面的所有兄弟元素。例如，`h1 ~ p`表示选取 `` 元素后面的所有 `` 元素。例如，`div > p`表示选取所有 `` 元素，而这些元素是 `` 元素的直接子元素。例如，`div p`表示选取所有 `` 元素，而这些元素是 `` 元素的后代。
JS设置select下拉框默认选中
weixin_42949219的博客
12-28 2万+
<select id="selectExample"> <option value="1">aaa</option> <option value="2">bbb</option> <option value="3">ccc</option> </select> 根据value值设置默认选中 //方法一： $("#selectExample").val('1');//设置value为1的option选项为默
html设置默认选中状态,html select 标签设置默认选中
weixin_32533659的博客
05-30 4750
方法有两种。第一种通过的属性来设置选中项，此方法可以在动态语言如php在后台根据需要控制输出结果。123451option>2option>3option>select>第二种为通过前端js来控制选中的项:由 www.169it.com 搜集整理1234567891011function change(){document.getElementById("...
jquery 设置select的默认值
wwwww222221的博客
06-27 1776
<select id="sel" >         <option value="s1" > aaaa </option>       <option value="s2" > bbbb </option>   </select>   第一种设置值：      $(
js、jquery下拉框select操作总结（获取值，设置默认值）
zcc的博客
06-14 9197
<select id="test"> <option value="1">选项一<option> <option value="2">选项一<option> ... <option value="n">选项N&am
vue select下拉框绑定默认值
weixin_34390996的博客
12-11 2942
vue select下拉框绑定默认值： 首先option要加value值，以便v-model可以获取到对应选择的值 一、当没有绑定v-model，直接给对应的option加selected属性 二、当给select绑定了v-model的值的时候，要给v-model绑定的data值里写默认值...
element ui Select选择器 下拉框某条数据设置显示星星*
06-01
可以通过 `el-select` 的 `slot` 来自定义下拉框选项的显示内容，具体可以参考以下代码： ```html <el-select v-model="value"> v-for="item in options" :key="item.value" :label="item.label" :value=...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值