jQuery 的选择器

01、基本选择器

标签选择器 $(“a”)
ID选择器 $(“#id”) $(“p#id”)
类选择器 $(“.class”) $(“h2.class”)
通配选择器 $("*")

并集选择器$(“elem1,elem2,elem3”)

<script type="text/javascript">$(function(){/*******id选择器***********///Elementvaruname=document.getElementById("uname");//  Object  [Element1,Element2,Element3]// JQ方式获得的元素var  uname2=$("#uname");			  	/******元素选择器**************/	  	//js  获得所有的input对象varinp=document.getElementsByTagName("input");//JQvar inp2=$("input");
//  JQ对象转化成JS对象   [0]   object  ---Element
//			  	alert(inp2[0].value);//操作的完全是JQ对象 alert(inp2.eq(0).val());         /********类选择器*********************/var inp3=$(".inp");//所有选择器 $("*").css("background-color","green");})</script></head><body><p>姓名: <input type="text" name="uname" id="uname" value="123"   class="inp"/>		</p>	<p>密码: <input type="password" name="pwd" id="pwd" value="sxt" class="inp" /></p></body>

02、层级选择器

后代选择器$(ul li)
父子选择器 $(ul>li)
后面第一个兄弟元素（紧跟） prev + next
后面所有的兄弟元素(同辈) prev ~ next

<script type="text/javascript">$(function(){	//包含选择器   √
//				$("#div1 span").css("backgroundColor","red");//子父选择器  div1下面的直系子节点  √
//				$("#div1>span").css("backgroundColor","red");//后面紧跟的下一个元素
//				$("#span1 + span").css("backgroundColor","red");//获得指定元素后面所有的span标签 ---同辈  √$("#span1 ~ span").css("backgroundColor","red");})	</script></head><body><div id="div1"  style="height: 400px; border: 3px solid red;"><span id="span1"> List  Item2 </span>  <br /><span> List  Item3 </span>   <br /><span> List  Item4 </span><br /><p><span> List  Item5 </span><br /><span> List  Item6 </span><br /><span> List  Item7 </span><br /></p></div>

03、位置选择器

：first :last :odd :even :eq(index) :lt(index) :gt(index)

 <script type="text/javascript">$(function(){/**********位置选择器*********************///获取第一个元素   √$("ul li").first().css("backgroundColor","red");$("ul li:first").css("backgroundColor","red");//获得最后一个元素  √$("ul li").last().css("backgroundColor","red");$("ul li:last").css("backgroundColor","red");//获得所有的奇数行对象  √ $("ul li:even").css("backgroundColor","red");//获得所有的偶数行对象   √$("ul li:odd").css("backgroundColor","red");//获得索引下标的对象  从0开始   √$("ul li:eq(4)").css("backgroundColor","red");$("ul li").eq(3).css("backgroundColor","red");//获得角标大于3的元素对象$("ul li:gt(3)").css("backgroundColor","red");//获得角标小于3的元素对象$("ul li:lt(3)").css("backgroundColor","red");    		 	})</script></head><body><div id="div1" style="height: 300px; border: 3px solid red;"><ul><li>List Item1 </li><li>List Item2 </li><li>List Item3 </li><li>List Item4 </li></ul>   <ul><li>List2 Item1 </li>    <!--   <li>List2 Item2 </li>-->     </ul></div>

04、子元素选择器

:nth-child(index) 这个是从1开始的
:only-child
:first-child
:last-child
$(“input[name=bo]”)

<script type="text/javascript">$(function(){/**************子元素选择器***********************///匹配其父元素下的第N个子或奇偶元素  从1开始  √$("ul li:nth-child(1)").css("backgroundColor","red"); $("ul li:nth-child(even)").css("backgroundColor","red");//匹配第一个子元素 $("ul li:first-child").css("backgroundColor","red"); //匹配最后一个子元素$("ul li:last-child").css("backgroundColor","red"); //如果某个元素是父元素中唯一的子元素，那将会被匹配$("ul li:only-child").css("backgroundColor","red");})</script></head><body><div id="div1" style="height: 300px; border: 3px solid red;"><ul><li>List Item1 </li><li>List Item2 </li><li>List Item3 </li><li>List Item4 </li></ul><ul><li>List2 Item1 </li><!--   <li>List2 Item2 </li>--></ul></div>

05、属性选择器

[attribute] [attribute1][attribute2] [attribute=value] [attribute!=value]
[attribute^=value] [attribute$=value] [attribute*=value]

<script type="text/javascript">$(function(){/*********属性选择器********************///属性等于指定内容的元素对象                         √$("input[type='text']").css("backgroundColor","red");//获得属性用s开头额元素对象$("input[name^='s']").css("backgroundColor","red");//匹配给定的属性是以某些值结尾的元素$("input[name$='d']").css("backgroundColor","red");//属性中包括指定元素的对象//$("input[name*='man']")    })</script></head><body><center><h3>注册用户</h3><form action="doRegister.jsp" method="get"><table border="1" width="40%">						<tr><td>用户名</td><td><input  type="text" name="username" id="username" value="请输入姓名" disabled="disabled"/></td></tr><tr><td>密&nbsp;码</td><td><input  type="password" name="pwd" id="pwd" /></td></tr><tr><td>确认密码</td><td><input type="color" name="spwd" id="repwd"/></td></tr><tr><td>性别</td><td><input  type="radio" name="sex" value="男"/>男<input  type="radio" name="sex" checked="checked" value="女"/>女</td></tr><tr><td>年龄</td><td><input type="number"  name="sage" id="age" value="18"/></td></tr><tr><td>电子邮箱</td><td><input type="email" name="semail" id="email"/></td></tr><tr><td>爱好</td><td><input  type="checkbox" name="hobby" value="music" checked/>音乐<input  type="checkbox" name="hobby" value="sports" />体育<input  type="checkbox" name="hobby" value="art" />美术</td></tr><tr><td>身份</td><td><select name="professional"><option value="1">工人</option><option value="2">农民</option><option value="3" selected="selected">解放军</option><option value="4">知识分子</option></select></td></tr><tr><td>简历</td><td><textarea name="resume" rows="5" cols="40">请输入简历</textarea></td></tr><tr><td>照片</td><td><input type="file" name="photo" id="photo"/></td></tr><tr><td colspan="2"  align="center"><input  type="submit" value="提交" disabled="disabled"/><input type="reset" value="重置"/><input type="button" value="返回" onclick="alert('back')"/></td></tr></table></form></center>

06、表单选择器

:text :password :radio :checkbox :hidden :file :submit
:input 匹配所有 input, textarea, select 和 button 元素
:selected :checked :enabled :disabled
:hidden :visible :not
注意$(“input”)和$(“:input”)的区别

<script type="text/javascript">$(function(){/********表单选择器(只是用于表单的对象)*******/$("input[type='text']").css("background-color","red");√$(":text").css("background-color","red");$(":password").css("background-color","red");//获得所有的表单项---16                                √alert($(":input").length);//获得所有的input对象--14alert($("input").length);/**********表单属性选择器**************///获得多选框中的被选择的对象                              √$("input[name='hobby']:checked");//获得input中name属性是uname的并且含有disabled属性的对象   √$("input[name='uname']:disabled")//匹配所有选中的option元素                                √$("select option:selected"); })</script></head><body><center><h3>注册用户</h3><form action="doRegister.jsp" method="get"><table border="1" width="40%">						<tr><td>用户名</td><td><input  type="text" name="username" id="username" value="请输入姓名" disabled="disabled"/></td></tr><tr><td>密&nbsp;码</td><td><input  type="password" name="pwd" id="pwd" /></td></tr><tr><td>确认密码</td><td><input type="color" name="spwd" id="repwd"/></td></tr><tr><td>性别</td><td><input  type="radio" name="sex" value="男"/>男<input  type="radio" name="sex" checked="checked" value="女"/>女</td></tr><tr><td>年龄</td><td><input type="number"  name="sage" id="age" value="18"/></td></tr><tr><td>电子邮箱</td><td><input type="email" name="semail" id="email"/></td></tr><tr><td>爱好</td><td><input  type="checkbox" name="hobby" value="music" checked/>音乐<input  type="checkbox" name="hobby" value="sports" />体育<input  type="checkbox" name="hobby" value="art" />美术</td></tr><tr><td>身份</td><td><select name="professional"><option value="1">工人</option><option value="2">农民</option><option value="3" selected="selected">解放军</option><option value="4">知识分子</option></select></td></tr><tr><td>简历</td><td><textarea name="resume" rows="5" cols="40">请输入简历</textarea></td></tr><tr><td>照片</td><td><input type="file" name="photo" id="photo"/></td></tr><tr><td colspan="2"  align="center"><input  type="submit" value="提交" disabled="disabled"/><input type="reset" value="重置"/><input type="button" value="返回" onclick="alert('back')"/></td></tr></table></form></center>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

学会思考，而不只是编程

学会思考，而不只是编程

中国人常说“授之以鱼不如授之以渔”。如果说教授编程是授之以鱼&#xff0c;那么教授计算机科学就是授之以渔。为什么说学习计算机科学比学会编程要重要得多&#xff1f;来听听Yevgeniy Brikman的解释。 现如今&#xff0c;似乎每个人都在学习编程&#xff1a;Bill Gates、Ma…
阅读更多...
ssl1562-局域网

ssl1562-局域网

局域网 题目 就是一个图&#xff0c;求最小生成树&#xff0c;然后求被去除的边的价值。 输入 用线来表示联通 5 5 1 2 8 1 3 1 1 5 3 2 4 5 3 4 2 输出 去除的边的总价值 8 解题思路 求出最小生成树的价值然后线的总值减去最小生成树的价值 代码 #include<…
阅读更多...
什么？java中居然可以执行js代码了？真是不知者不怪

什么？java中居然可以执行js代码了？真是不知者不怪

今天在书上看的&#xff0c;java中可以直接调用js的函数了&#xff0c;言外之意就是java已经支持外部的脚本语言了&#xff08;在运行期解释执行的&#xff09;&#xff0c;查了查&#xff0c;jdk从1.6之后开始支持的&#xff0c;1.6之前不可以。 为什么Java这种编译语言还需要…
阅读更多...
jQuery 操作元素

jQuery 操作元素

01、操作元素的属性 $(function(){$("#but").click(function(){//获得元素的对象var inp$("#zh");//JQ获得属性 inp.attr("value")&#xff1a;获得的默认的值console.log(inp.attr("type")"----"inp.attr("name&q…
阅读更多...
用 Docker Machine 创建 Azure 虚拟主机

用 Docker Machine 创建 Azure 虚拟主机

搭建环境向来是一个重复造轮子的过程&#xff0c;Docker Machine 则把用户搭建 Docker 环境的各种方案汇集在了一起。笔者在《Docker Machine 简介》一文中演示了使用 Docker Machine 在本地的 vSphere 主机中安装 Docker 环境。但是在云计算大爆炸的今天&#xff0c;真正让我们…
阅读更多...
ssl2345-繁忙的都市

ssl2345-繁忙的都市

题目 一个无向图&#xff0c;求最小生成树里权值最大的那条边 输入 第一行有两个整数n,m表示有n个店&#xff0c;m条边。接下来m行是对每条边的描述&#xff0c;u, v, c表示点u和v之间有边&#xff0c;权值为c。(1≤n≤300&#xff0c;1≤c≤10000) 4 5 1 2 3 1 4 5 2 4…
阅读更多...
JQuery 事件绑定

JQuery 事件绑定

<script type"text/javascript">$(function(){/******单击事件的绑定********/$("#bu1").click(function(){alert("单击事件");})$("#bu1").dblclick(function(){})$("#bu1").blur(function(){ })/******绑定多个事件…
阅读更多...
JDK中主要的包

JDK中主要的包

java.lang----包含一些Java语言的核心类&#xff0c;如String、Math、Integer、 System和 Thread&#xff0c;提供常用功能java.net----包含执行与网络相关的操作的类和接口。java.io ----包含能提供多种输入/输出功能的类。java.util----包含一些实用工具类&#xff0c;如定义…
阅读更多...
振华重工携手微软，开启港口运营数字化转型新纪元

振华重工携手微软，开启港口运营数字化转型新纪元

上海振华重工&#xff08;集团&#xff09;股份有限公司&#xff08;ZPMC&#xff09;是重型装备制造行业的知名企业&#xff0c;是港口机械的领军者。企业的港口机械目前已销往93个国家和地区&#xff0c;全球占有率高达82%&#xff0c;多年保持行业领先的地位。 转型大计提上…
阅读更多...
在JavaFX程序中嵌入Swing内容

在JavaFX程序中嵌入Swing内容

转载自 在JavaFX程序中嵌入Swing内容 本教程描述如何在JavaFX应用程序中嵌入Swing组件。本文将讨论线程限制并提供一个可运行的应用程序来说明在JavaFX应用程序中嵌入带HTML内容的Swing按钮&#xff0c;以及Swing与JavaFX按钮间的协作性。 从JavaFX 2.0版本开始&#xff0c;…
阅读更多...
你胆敢不加break试试？

你胆敢不加break试试？

我们经常在实际开发中会用到一些转换类&#xff0c;比如在金融界中&#xff0c;我们需要将1转换为“壹”&#xff0c;2转换成“贰”。还有类似这样的需求&#xff0c;食堂在一周内每天的菜单都是不一样的&#xff0c;周一为鱼香肉丝鸡腿&#xff0c;周二为爆炒土豆丝鲅鱼&#…
阅读更多...
三大特性之继承性

三大特性之继承性

一、继承性的好处&#xff1a; ① 减少了代码的冗余&#xff0c;提高了代码的复用性 ② 便于功能的扩展 ③ 为之后多态性的使用&#xff0c;提供了前提 二、继承性的格式&#xff1a; class A extends B{} A:子类、派生类、subclass B:父类、超类、基类、superclass 2.1体现&…
阅读更多...
ssl2346-联络员【图论，最小生成树】

ssl2346-联络员【图论，最小生成树】

题目 一个图&#xff0c;给几条固定的边&#xff0c;求最小生成树 输入 第一行n&#xff0c;m表示n个点&#xff0c;有m条边&#xff0c;每行四个非负整数&#xff0c;p,u,v,w 当p1时&#xff0c;表示这个边为固定边&#xff08;必须要&#xff09;&#xff1b;当p2时&#…
阅读更多...
JQuery 动画效果

JQuery 动画效果

掌握要点 显示隐藏show() hide() 改变width、height、opacity 淡入淡出fadeIn() fadeOut() 改变opacity 滑入滑出slideDown() slideUp() 改变height&#xff08;对于img同时改变height和width&#xff09; 隐藏的显示/显示的隐藏 toggle() 参考网站&#xff1a;http://www.jq2…
阅读更多...
微软作为金牌会员加入Cloud Foundry基金会

微软作为金牌会员加入Cloud Foundry基金会

在最近召开的Cloud Foundry峰会上&#xff0c;微软宣布他们已经加入了Cloud Foundry基金&#xff0c;成为金牌会员。除此之外&#xff0c;微软正在加大对开源云平台的支持力度&#xff0c;他们提供的服务包括Azure数据库&#xff08;PostgreSQL和MySQL&#xff09;的后端集成以…
阅读更多...
你胆敢在case后面不加break试试？

你胆敢在case后面不加break试试？

我们经常在实际开发中会用到一些转换类&#xff0c;比如在金融界中&#xff0c;我们需要将1转换为“壹”&#xff0c;2转换成“贰”。还有类似这样的需求&#xff0c;食堂在一周内每天的菜单都是不一样的&#xff0c;周一为鱼香肉丝鸡腿&#xff0c;周二为爆炒土豆丝鲅鱼&#…
阅读更多...
在Swing和Swt中使用JavaFX

在Swing和Swt中使用JavaFX

转载自 在Swing和Swt中使用JavaFX 本人从08年12月份&#xff0c;JavaFX发布第一个版本开始关注它的发展。 算算到现在&#xff0c;也差不多是第五个年头了。期间经历了一些动荡&#xff0c;但JavaFX还是坚持着发展了下来&#xff0c;也经历了很多改变(这也是Java技术的特点&a…
阅读更多...
三大特性之封装性

三大特性之封装性

体现一 Java中通过将属性声明为私有的(private)&#xff0c;再提供公共的&#xff08;public&#xff09;方法:getXxx()和setXxx()实现对该属性的操作&#xff0c;以实现下述目的&#xff1a; 隐藏一个类中不需要对外提供的实现细节&#xff1b; 使用者只能通过事先定制…
阅读更多...
JQuery 表单校验

JQuery 表单校验

表单校验的作用 为什么要进行表单验证&#xff1a;保证数据符合要求 为什么要进行JavaScript或者jQuery表单验证&#xff1a; 1.降低服务器端负担 2.还可以进行服务器验证&#xff08;JSP&#xff09; 正则表达式 为什么使用正则表达式&#xff1a; 简洁的代码 严谨的验证文…
阅读更多...
ssl2348-连接格点【图论，最小生成树，并查集】

ssl2348-连接格点【图论，最小生成树，并查集】

题目 有一个M行N列的点阵&#xff0c;相邻两点可以相连。一条纵向的连线花费一个单位&#xff0c;一条横向的连线花费两个单位。某些点之间已经有连线了&#xff0c;试问至少还需要花费多少个单位才能使所有的点全部连通。 输入 第一行输入两个正整数m和n。 以下若干行每行…
阅读更多...
最新文章

Copyright @ 2022~2023