jquery子元素选择器、form属性选择器和实现可以左右选择的下拉菜单效果

最新推荐文章于 2025-03-05 10:38:33 发布
置顶 最新推荐文章于 2025-03-05 10:38:33 发布
阅读量2.8k 收藏 1
点赞数
文章标签： jquery button function input javascript xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhaoxinglei0309/article/details/7384214
版权
1、 :nth-child(index/even/odd/equation)
用法: $(”ul li:nth-child(2)”)   返回值  集合元素
      说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始.
2、 :first-child
用法: $(”ul li:first-child”)    返回值  集合元素
      说明: 匹配第一个子元素.’:first’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.这里需要特别点的记忆下区别.
3、 :last-child
用法: $(”ul li:last-child”)      返回值  集合元素
      说明: 匹配最后一个子元素.’:last’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.
4、 : only-child
用法: $(”ul li:only-child”)   返回值  集合元素
      说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!
5、nth-child() 选择器详解如下：
–(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
–(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素
–(3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素
–(3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素
子元素选择器案例 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>子元素选择器学习</title>
<script language="javascript" type="text/javascript" src="../jquery.js"></script>

<script language="javascript" type="text/javascript">

//使用jquery加载事件
$(document).ready(function (){
	
	//<input id="btn0" type="button" value="清空样式" />
	$("#btn0").click(function (){
		
		//当点击按钮后，设置id=two的div的背景颜色是绿色
		$("*").removeAttr("style");
		
	});
	
	
	//<input id="btn1" type="button" value="选中ul中第二个子元素  $('ul li:nth-child(2)')" />

	$("#btn1").click(function (){
		
		$("ul li:nth-child(2)").css("background","green");
		
	});
	
	//<input id="btn2" type="button" value="选中ul中第一个子元素 $('ul li:first-child')" />
	
	$("#btn2").click(function (){
		
		$("ul li:first-child").css("background","green");
		
	});
	
	//<input id="btn2" type="button" value="选中ul中最后一个子元素 $('ul li:last-child')" />


	$("#btn3").click(function (){
		
		$("ul li:last-child").css("background","green");
		
	});
	
	//<input id="btn4" type="button" value="选中只有一个子元素的 ul $(ul li:only-child)" />
	
	$("#btn4").click(function (){
		
		$("ul li:only-child").css("background","green");
		
	});	
	
	//<input id="btn5" type="button" value="选中ul中所有的索引值是偶数的子元素 $('ul li:nth-child(even)')" />

	$("#btn5").click(function (){
		
		$("ul li:nth-child(even)").css("background","green");
		
	});	
	
	
	//<input id="btn6" type="button" value="选中ul中所有的索引值是3的倍数的子元素   $('ul li:nth-child(3n)')" />	
	$("#btn6").click(function (){
		
		$("ul li:nth-child(3n)").css("background","green");
		
	});		
	
	
});





</script>



</head>

<body>
<ul id="user">
  <li>萨达姆</li>
  <li>拉登</li>
  <li>关灯</li>
  <li>士兵们</li>
  <li>奥巴马</li>
  <li>小布什</li>
</ul>

<ul id="only">
  <li>萨达姆</li>
</ul>

<div style="clear:both;">
<input id="btn0" type="button" value="清空样式" />
<input id="btn1" type="button" value="选中ul中第二个子元素  $('ul li:nth-child(2)'),下标从1开始" />
<input id="btn2" type="button" value="选中ul中第一个子元素 $('ul li:first-child')" />
<input id="btn3" type="button" value="选中ul中最后一个子元素 $('ul li:last-child')" />
<input id="btn4" type="button" value="选中只有一个子元素的 ul $(ul li:only-child)" />
<input id="btn5" type="button" value="选中ul中所有的索引值是偶数的子元素 $('ul li:nth-child(even)')" />
<input id="btn6" type="button" value="选中ul中所有的索引值是3的倍数的子元素   $('ul li:nth-child(3n)')" />
</div>
</body>
</html>
效果图
form属性选择器案例 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>属性选择器学习</title>
<script language="javascript" type="text/javascript" src="../jquery-1.6.js"></script>

<script language="javascript" type="text/javascript">

//使用jquery加载事件
$(document).ready(function (){
	
	//<input id="btn0" type="button" value="利用jquery对象实现 修改表单中可见的文本域的值  $('input[type=text]:enabled')" />
	
	$("#btn0").click(function (){
		
		//当点击按钮后，设置id=two的div的背景颜色是绿色
		$("input[type=text]:enabled").each(function(index,domEle){
			
			//domEle.value="xxxxx";
			$(domEle).val("xxxxxxxx");
			
		});
		
	});
	
	//<input id="btn1" type="button" value="利用jquery对象实现 修改表单中不可修改的文本域的值  $('input[type=text]:disabled')" />
	
	$("#btn1").click(function (){
		
		//当点击按钮后，设置id=two的div的背景颜色是绿色
		$("input[type=text]:disabled").each(function(index,domEle){
			
			//domEle.value="xxxxx";
			$(domEle).val("xxxxxxxx");
			
		});
		
	});	
	
	//<input id="btn2" type="button" value="利用jquery对象实现 获取选中的复选框的个数 $('input[type=checkbox]:checked')" />
	
	$("#btn2").click(function (){
		
		//当点击按钮后，设置id=two的div的背景颜色是绿色
		alert($("input[type=checkbox]:checked").length);
		
		/*
		$("input[type=checkbox]:checked").each(function(index,domEle){
			
			//alert(domEle.value);
			//alert(this.value);
			//alert($(this).val());
		});
		
		*/
		
	});	
	
	
	//<input id="btn3" type="button" value="利用jquery对象实现 获取选中的下拉菜单的内容  $('select option:selected')" />
	$("#btn3").click(function (){
		
		//当点击按钮后，设置id=two的div的背景颜色是绿色
		$("select option:selected").each(function(index,domEle){
			
			//domEle.value="xxxxx";
			alert($(domEle).text());
			
		});
		
	});	
	
	
});





</script>



</head>

<body>
<form method="post" action="">
<input type="text" value="可见元素1"  />
<input type="text" value="不可见元素1" disabled="disabled"  />
<input type="text" value="可见元素2"  />
<input type="text" value="不可见元素2"  disabled="disabled" /><br>
<input type="checkbox" value="美女" />美女
<input type="checkbox" value="美男" />美男
<input type="checkbox" value="大爷" />大爷
<input type="checkbox" value="大妈" />大妈
<br>
<input type="radio" value="男" />男
<input type="radio" value="女" />女
<br>
<select id="zhiwei" size="5" multiple="multiple">
   <option>PHP开发工程师</option>
   <option>数据库管理员</option>
   <option>系统分析师</option>
   <option>保安</option>
</select>

<select id="xueli">

   <option>大专</option>
   <option>中专</option>
   <option>小学</option>

</select>
</form>



<div style="clear:both;">

<input id="btn0" type="button" value="利用jquery对象实现 修改表单中可修改的文本域的值  $('input[type=text]:enabled')" /><br>
<input id="btn1" type="button" value="利用jquery对象实现 修改表单中不可修改的文本域的值  $('input[type=text]:disabled')" /><br>
<input id="btn2" type="button" value="利用jquery对象实现 获取选中的复选框的个数 $('input[type=checkbox]:checked')" /><br>
<input id="btn3" type="button" value="利用jquery对象实现 获取选中的下拉菜单的内容  $('select option:selected')" /><br>


</div>
</body>
</html>

效果图
实现左右选择的下拉菜单案例 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可以左右选择的下拉菜单效果</title>
<script language="javascript" type="text/javascript" src="../jquery-1.6.js"></script>

<script language="javascript" type="text/javascript">

//使用jquery加载事件
$(document).ready(function (){
	
	/*****************************************/
	//处理向右侧添加一个选项的事件
	$("#right-one").click(function (){
		
		//向右侧添加一个
		// 父（要插入的地方）     //子，插入的内容
		$('#second').append($('#first option:selected'));
		
	});
	
	/********************处理向右插入全部*********************/	    $("#right-all").click(function (){
		
		//向右侧添加全部
		// 父（要插入的地方）     //子，插入的内容
		$('#second').append($('#first option'));
		
	});
	
	
	
	/*******************向左侧添加单个**********************/
	//处理向左侧添加一个选项的事件
	$("#left-one").click(function (){
		
		//向左侧添加一个
		// 父（要插入的地方）     //子，插入的内容
		$('#first').append($('#second option:selected'));
		
	});
	
	/********************处理向右插入全部*********************/	    $("#left-all").click(function (){
		
		//向左侧添加全部
		// 父（要插入的地方）     //子，插入的内容
		$('#first').append($('#second option'));
		
	});
	
	//处理双击一个到右侧
	 $("#first").dblclick(function (){
		
		$('#second').append($('#first option:selected'));
		
	});
	
	//处理双击一个到左侧
	 $("#second").dblclick(function (){
		
		$('#first').append($('#second option:selected'));
		
	});
	
});





</script>
</head>

<body>
<table width="300" border="1">
  <tr>
    <td>
      <select id="first" size="10" style="width:120px;" multiple="multiple">
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        <option>选项4</option>
        <option>选项5</option>
        <option>选项6</option>
        <option>选项7</option>
        <option>选项8</option>
      
      </select>
    </td>
    <td>
    <input type="button" id="right-one" value="->" /><br>
    <input type="button" id="right-all" value=">>" /><br>
    <input type="button" id="left-one" value="<-" /><br>
    <input type="button" id="left-all" value="<<" /><br>
    </td>
    <td>
    <select id="second" size="10" style="width:120px;" multiple="multiple">
        <option>右选项1</option>
        <option>右选项2</option>

      </select>
    </td>
  </tr>
</table>

</body>
</html>

效果图
->这个按钮可以把左边的一个或多个移到右边   >>把左边的全部都移到右边   <-把右边的移到左边  <<把右边的全部移到左边 也可以双击
 
jQuery选择器及使用this选择子元素
CyberOI的博客
10-08 438
在jQuery中，选择器是一种常用的工具，用于选择和操作HTML元素。它类似于CSS选择器，可以根据元素的标签名、类名、ID和属性等进行选择。选择器可以根据元素的标签、类、ID或属性等选择元素，而。这里的选择器可以根据需要进一步修改，例如选择特定的子元素或使用其他过滤器。这里的选择器可以根据实际需要进行修改，例如使用标签选择器、ID选择器或其他选择器。除了这些基本的选择器之外，还有更多的选择器可以用于更精确的元素选择。关键字，我们可以轻松地选择和操作特定元素的子元素。关键字，我们可以选择当前元素的子元素。
jQuery表单对象属性过滤选择器实例详解
10-21
本篇将详细讲解jQuery表单对象属性过滤选择器的使用方法，通过实例分析如何高效地对表单元素进行属性过滤操作。 1. **`:reset` 选择器** `:reset`选择器用于选取所有类型的重置按钮，例如 `<input type="reset">`...
jquery子元素过滤选择器
thewebcode
06-24 102
:nth-child('索引值')//获取指定元素下的某个子元素的位置，索引从1开始； //偶数行 //$('li:nth-child(even)').addClass('class1'); //奇数行 //$('li:nth-child(odd)').addClass('class1'); //第一行 //$('li:nth-child(1)').addClass('class...
jQuery选择器
最新发布
m0_74350516的博客
03-05 938
本文介绍了jQuery选择器，涵盖基本、层级、过滤、表单选择器及筛选方法。基本选择器类似CSS，层级选择器定位元素层级关系，过滤选择器进一步筛选，表单选择器针对表单元素。还补充知识点如排他思想、隐式迭代和链式编程等。
jQuery子元素选择器
weixin_45747278的博客
10-20 3519
7.jQuery子元素选择器 7.1:first-child 匹配所给选择器( :之前的选择器)的第一个子元素类似的:first匹配第一个元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1) <ul> <li>John</li> <li>Karl</li> ...
JQuery选择器中的子元素选择器
LHJBK的博客
05-30 1866
子元素筛选选择器不常使用，其筛选规则比起其它的选择器稍微要复杂点，其实博主感觉并不怎么难啦，因为单词so easy,哈哈。我们来看看都有哪些吧：注意： 1. :first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1) 2.:last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：
JQuery（7）_Jquery 子元素选择器
魏宇轩
12-13 2839
本系列博客汇总在这里：JQuery 汇总 Jquery 子元素选择器一、子元素选择器1、:nth-child(index/even/odd/equation)2、:first-child3、:last-child4、: only-child二、代码演示 一、子元素选择器 1、:nth-child(index/even/odd/equation) 用法: $(”ul li:nth-child(2)...
juqery 学习之三 选择器 子元素与表单
09-05
在jQuery中，选择器是用于选取DOM元素的强大工具，它们基于元素的属性、类型、位置等来筛选元素。本篇文章将深入探讨jQuery中的子元素选择器以及如何与表单元素进行交互。 首先，我们来看一下jQuery中的子元素选择...
jQuery下拉搜索菜单选择插件特效代码
03-20
在jQuery下拉搜索菜单选择插件中，通常会结合Bootstrap的下拉菜单组件（`.dropdown`）和输入框（`.form-control`）来实现。当用户在输入框中输入文字时，插件会实时匹配下拉菜单中的选项，并高亮显示匹配项。这涉及...
jQuery学习笔记之jQuery选择器的使用
12-08
本文将深入探讨jQuery选择器的使用，包括基本选择器、层次选择器、过滤选择器、内容过滤、可见性过滤、属性过滤、子元素过滤选择器以及表单属性过滤。 一、基本选择器 1. #id：通过ID选择元素，如`$("#id1")`会选取...
jquery基于layui实现二级联动下拉选择(省份城市选择)
12-29
先看一下简单的效果 直接上代码 html部分 (下拉框中value的数值我是根据数据库中取出来) <div class=layui-form-item> <label class=layui-form-label>城市 <select name=city lay-filter=province> ...
jQuery子元素筛选选择器
qq_43742368的博客
05-24 249
<!DOCTYPE html> <html lang="en"> <head> <title>jQuery子元素筛选选择器</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="../jquery/jq/jq5.3.1.js"></script> <script> $(docum
jQuery——子元素筛选器
chiniue1759的博客
11-02 294
子元素筛选器 名称 :first-child JQ语法 jQuery( "selector:first-child" ) 说明 :first-child选择器用于匹配作为父元素的第一个子元素的元素，将其封装为jQuery对象并返回。:first-child...
JQuery子元素过滤选择器
零怀念的博客
08-26 778
NO. 选择器 描述 1 p:nth-child(n|even|odd) 属于其父元素的第n个|第偶数个|第奇数个子元素且为p的元素集合，从1开始 2 p:first-child 属于其父元素的第一个子元素且为p的元素集合 3 p:first-of-type 属于其父元素的第一个为p的子元素的元素集合 4 p:last-chil...
jQuery 选择器中的子代选择器
alankuo的专栏
11-12 1009
jQuery子代选择器用于精确选取某个元素的直接子代元素，即只选取紧挨着父元素的那一层子元素，而不会选取更深层次嵌套关系中的子元素。，其中parent表示父元素，child表示要选取的直接子代元素。例如，在一个HTML页面中有如下结构：< ul > < li > 这是ul列表的第一个直接子元素li。</ li > < li > 这是ul列表的第二个直接子元素li。</ li > < li > < p > 这是嵌套在li元素内的段落元素。< ul > < li > 这是ul列表的第一个直接子元素li。
jQuery过滤选择器——子元素过滤选择器
C.
11-13 4993
子元素过滤选择器1、:nth-child(index/even/odd/equation) 用法: $(”ul li:nth-child(2)”) 返回值 :集合元素 说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始. 2、:first-child
Jquery子元素选择器
weixin_34195142的博客
07-10 100
2019独角兽企业重金招聘Python工程师标准>>> ...
jquery子元素选择器
weixin_39037804的博客
10-31 187
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm...
jQuery插件：下拉选择框实现单选多选功能及代码示例
插件的调用方式是通过jQuery选择器和一个包含多个参数的对象来传递配置。这些参数包括： 1. `query_url`：用于加载下拉选项数据的URL，通常指向后端控制器，可以自定义为项目需求的地址。 2. `divID`：指定调用插件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值