jquery_01_1

最新推荐文章于 2022-04-11 23:00:51 发布
最新推荐文章于 2022-04-11 23:00:51 发布
阅读量348 收藏
点赞数
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yjx568135132/article/details/77160890
版权

jquery_01_1

    1.层次选择器

       

<style type="text/css">
   div,span{
      width: 200px;
      height: 200px;
      border: 1px solid green;
      float: left;
      margin: 5px; 
   }
   div.two{
     height: 70px;
     width: 80px;
   }
   
</style>
<script type="text/javascript" src="./libs/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
   //层次选择器
   $(document).ready(
	  function(){
		  
		  //$("body div").css("background","green");//后代选择器
		  //$("body>.two").css("background","green");//子元素选择器
		  
		  
		 //$("#two+div").css("background","green");//兄弟相连（下一个）选择器
		 
		 
		 $("#two~div").css("background","green");//所有后面的兄弟都被选中 
	  }	   
   );
   
</script>
</head>
<body>
    <div id="one" class="one">
       <div class="two">class为two的div</div>
    </div>
    <div id="two" class="one">
        <div class="two">class 为two的div</div>
        <div class="two" title="one">class 为two的div</div>
        <div class="two" title="two">class 为two的div</div>
    </div>
    <div  class="one">
        <div class="two">class 为two的div</div>
        <div class="two" >class 为two的div</div>
        <div class="two">class 为two的div</div>
    </div>
    <div  class="one">
        <div class="two">class 为two的div</div>
        <div class="two" >class 为two的div</div>
        <div class="two">class 为two的div</div>
    </div>
    <span class="sp">我是span的内容</span>
    <span class="sp">我是span的内容</span>
</body>


    2.基本过滤选择器

      

<style type="text/css">
   div,span{
      width: 200px;
      height: 200px;
      border: 1px solid green;
      float: left;
      margin: 5px; 
   }
   div.two{
     height: 70px;
     width: 80px;
   }
   
</style>
<script type="text/javascript" src="./libs/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
   //基本选择器
   $(document).ready(
	  function(){
		  
		  //动画的函数
		  function animateIt(){
			   $(".move").slideToggle("slow",animateIt);
		  } 
		  
		  animateIt();
		  
		// $(".one:first").css("background","green");
		 //$(".one:last").css("background","green");
		 
		 //选择的是除去id的two的div
		 //$("div:not(#two)").css("background","green");
		 
		 //类名为two并且是偶数的
		 /* $(".two:even").css("background","green");
		 $(".two:odd").css("background","red"); */
		 
		 
		 //$(".two:eq(3)").css("background","red"); 
		/*  $(".two:gt(3)").css("background","red"); 
		 $(".two:lt(3)").css("background","green");
		 
		 
		 
		 $(":header").css("color","green");  */
		 
		 
		 
		 //动画的选择器
		 $(":animated:eq(2)").css("background","red");
 
	  }
   );
</script>
</head>
<body>
    <div id="one" class="one">
       <div class="two">class为two的div</div>
    </div>
    <div id="two" class="one">
        <div class="two">class 为two的div</div>
        <div class="two" title="one">class 为two的div</div>
        <div class="two" title="two">class 为two的div</div>
    </div>
    <div  class="one">
        <div class="two">class 为two的div</div>
        <div class="two" >class 为two的div</div>
        <div class="two">class 为two的div</div>
    </div>
    <div  class="one">
        <div class="two">class 为two的div</div>
        <div class="two" >class 为two的div</div>
        <div class="two">class 为two的div</div>
    </div>
    <span class="sp">我是span的内容</span>
    <span class="sp">我是span的内容</span>
    <div class ="move">我是会动的div</div>
    <div class ="move">我是会动的div</div>
    <div class ="move">我是会动的div</div>
    <div class ="move">我是会动的div</div>
    <h6>标题6</h6>
    <h5>标题5</h5>
    <h4>标题4</h4>
</body>


    3.文本过滤

    

<style type="text/css">
   div,span{
      width: 200px;
      height: 200px;
      border: 1px solid green;
      float: left;
      margin: 5px; 
   }
   div.two{
     height: 70px;
     width: 80px;
   }
   div.hidden{
     display: none;
   }
</style>
<script type="text/javascript" src="./libs/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
   //文本选择器
   $(document).ready(
	  function(){
		  
		  //动画的函数
		  function animateIt(){
			   $(".move").slideToggle("slow",animateIt);
		  } 
		  animateIt();
		 //动画的选择器
		// $(":animated:eq(2)").css("background","red");
		 
		 
		//$("div:contains('动画')").css("color","green");
		
		
		//$("div:empty").css("background","red");
		
		
		 //
		//$("div:has(.two)").css("background","green");
		 
		 //选取含有子元素或者文本内容的元素
		//$("div:parent").css("background","green");
		
		/* $(":hidden").html("我是被修改后隐藏的内容！"); */
		 
		 
	  }
   );
</script>


    4.属性选择器

        

<style type="text/css">
   div,span{
      width: 200px;
      height: 200px;
      border: 1px solid green;
      float: left;
      margin: 5px; 
   }
   div.two{
     height: 70px;
     width: 80px;
   }
   div.hidden{
     display: none;
   }
</style>
<script type="text/javascript" src="./libs/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
   //属性选择器
   $(document).ready(
	  function(){
		  
		  //动画的函数
		  function animateIt(){
			   $(".move").slideToggle("slow",animateIt);
		  } 
		  animateIt();
		
		  //div中具有title属性的元素
		 // $("div[title]").css("background","red");
		  
		 //指定属性值为value的元素 
		 // $("div[title=test]").css("background","red");
		 
		 //指定属性值不为value的元素 
		  //$("div[title!=test]").css("background","red");
		 
		 
		   //指定属性值以t为开头的元素 
		  //$("div[title^='t']").css("background","red");
		  
		 
		  //指定属性值以t为结尾的元素 
		  //$("div[title$='o']").css("background","red");
		  
		    //指定属性值包含o的元素 
		  //$("div[title*='o']").css("background","red");
		    
		      //具有id属性同时具有title属性并且属性值包含o的元素
		 // $("[id][title*='o']").css("background","red"); 
		      
		 
		 //子元素过滤
		 
		 //选取每个父元素里面类名为two的第二个元素
		// $(".two:nth-child(2)").css("background","blue");     
	  
		 //选取每个父元素里面类名为two的第一个元素
		// $(".two:first-child").css("color","red");
		 
		 //选取每个父元素里面类名为two的最后一个元素
		 //$(".two:last-child").css("color","red");
		 
		 //选取每个父元素里面类名为two的唯一一个元素
		 $(".two:only-child").css("color","red");
	
		 
	  }
   );
</script>
</head>
<body>
    <div id="one" class="one" title="hello">
       <div class="two">class为two的div</div>
    </div>
    <div id="two" class="one">
        <div class="two">class 为two的div</div>
        <div class="two" title="one">class 为two的div</div>
        <div class="two" title="two">class 为two的div</div>
    </div>
    <div  class="one">
        <div class="two">class 为two的div</div>
        <div class="two" >class 为two的div</div>
        <div class="two">class 为two的div</div>
    </div>
    <div  class="one">
        <div class="two">class 为two的div</div>
        <div class="two" title="test">class 为two的div,title为test</div>
        <div class="two" title="test">class 为two的div，title为test</div>
    </div>
    <div></div>
     <div class="none" style="display: none">我是一个隐藏的div</div>
     <div class="hidden">我是另外一个隐藏的div</div>
    <span class="sp" title="sp">我是span的内容</span>
    <span class="sp">我是span的内容</span>
    <div class ="move">我是动画的div</div>
    <h6>标题6</h6>
    <h5>标题5</h5>
    <h4>标题4</h4>
</body>


    5.表单属性过滤

     
<title>表单属性验证</title>
<script type="text/javascript" src="./libs/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(
      function(){
    	  
    	  //普通输入文本框
  /*   	  $("text:enabled").val("这是能用输入框的内容值");
    	  $("text:disabled").val("这是不能用输入框的内容值"); */
    	  
    	  
   
    	   $("#in2").css("background","red");
     	    
    	/*    $("#in1").click(
    		 function(){
    			 $(":checked").attr("checked",false); 
    		 }	   
    	   ); */

      }		
    );    
</script> 
</head>
<body>
    <form action="#" method="post">
        
       这是不能用的输入框：<input  type="text" disabled="disabled" value=""/>
       这是能用的输入框：<input  type="text" value=""/>
   <br>  
     兴趣：<input type="checkbox" value="1"/>篮球   
      <input type="checkbox" value="2" checked="checked" id="in2"/>足球   
      <input type="checkbox" value="3" />羽毛流   
      <input type="checkbox" value="4"/>橄榄球  
    </form> 
    <input type="button" value="反选" id="in1"/> 
</body>



星锅
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery_01入门&选择器
m0_64043477的博客
03-15 1044
jQuery_01入门&选择器
jquery_validate验证
liu_jiang666的博客
02-08 807
jquery_validate的介绍 使用jquery_validate脚本可以进行客户端的信息的验证，使用起来方便快捷，只需要在需要验证的地方引用jquery的js脚本就好了。 jquery_validate 脚本下载 点击下载,如果您是tp框架的使用者，将下载好的压缩包解压在项目目录的public/static下。（小编用来演示的就是tp框架） 引用 引用这三个js脚本 <script src="/static/jQuery_validate/lib/jquery.js"></scri
数字格式化 把“1”格式化为“001”或“001”转换为1
Dr_abandon的博客
09-10 2万+
//数字格式化 int k = 1; DecimalFormat mFormat = new DecimalFormat("000");//确定格式，把1转换为001 String s = mFormat.format(k); System.out.println(s+"----"); int m = Integer.parseInt(s);//把001转换为1
02jquery01-02解决之前js的问题
一笑的博客
11-01 416
1.2jquery解决问题<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Jquery解决问题</title> <style> *{ margin: 0; padding: 0; } div
如何在数字前加上0，如将1变成01
Andrew_Yuan的博客
01-06 2276
String currentId = String.format("%02d", Integer.valueOf(currentId) + 1);
jQuery_01入门
m0_67768699的博客
03-09 1593
jQuery_01入门 一、了解什么是jQuery 1.解释： j:javascript Query: 查询 2.jQuery是JavaScript的类库：封装了很多JS代码 3.官方地址：jQuery 4.查看官方jQueryLOGO：write less，do more（写得少，做得多） 二、jQuery的作用 为了简化JavaScript开发 提供了大量的选择器，更加方便地获取元素 CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件 三、使用jQ...
jquery基础_01
m0_58451019的博客
04-11 360
1.jq的选择器 例子如下： 第一： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--1,一定要引入 jquery的文件内容--> <script type="text/javascript" src="js/jquery-3.6.0.min.js" ></script&..
Jquery_01
Jaosn.Yang的博客
07-12 3537
jQuery的基础回顾的setInterval（）方法有什么作用？如何改变浏览器地址栏中的网址？getElementByXXX（）系列方法有哪些？本章目标会在网页中导入的jQuery框架掌握jQuery的的基本语法掌握jQuery的对象与DOM对象的相互转换会使用jQuery的实现简单特效jQuery的简介网官地址http://jquery.com/jQuery由美国人John Resig于200...
jQuery_02
qq_65716482的博客
03-19 528
<html> <head> <meta charset="utf-8" /> <title>jQuery02: $工具方法&属性</title> <style type="text/css"> .xx{ border: solid red 2px; } .aaa{ background-color: #01BE00; } .bbb{ background-co.
前端_Jquery_Jquery基础
feizuiku0116的博客
08-16 120
一.Jquery的介绍 jQuery是对JavaScript的封装，它是免费、开源的JavaScript函数库，jQuery 极大地简化了 JavaScript 编程。 jQuery和JavaScript它们的作用一样，都是负责网页行为操作，增加网页和用户的交互效果的，只不过jQuery简化了JavaScript编程，jQuery实现交互效果更简单。 二.Jquery的优点 jQuery兼容了现在主流的浏览器，增加了程序员的开发效率。 jQuery简化了 JavaScript 编程，代码编写更加简单。
超越Jquery_01_isPlainObject分析与重构
12-09
isPlainObject是Jquery1.4后提供的新方法,用于判断对象是否是纯粹的对象（通过 “{}” 或者 “new Object” 创建的）。 使用isPlainObject 首先我们来了解一下什么叫’纯粹的对象’，简单的理解’纯粹的对象’指的...
JQuery_zTree_v2.6.02.zip_V2 _javascrip_ztree
最新发布
09-19
1. zTreeAPI v2.6.01.chm：这是一个帮助文档，详细介绍了zTree的API接口，包括各个函数的用法、参数说明和返回值，对于开发者来说，它是快速上手和解决问题的重要参考。 2. Readme-说明.html：这是官方提供的使用...
1.zip_JavaScript/JQuery_JavaScript_
08-09
为了创建数字时钟，我们需要使用这些方法，然后将返回的值转换为两位数格式（例如，将1转换为01），以便在视觉上保持一致。 描述中提到了“可爱卡通”设计，这可能意味着时钟的样式使用了CSS来实现，可能包括了特殊...
jquery_demo
03-19
首先，我们来看一下`JQuery_1[1].4.rar`，这可能是jQuery的1.4版本源码。学习源码可以帮助我们理解jQuery的内部工作原理，包括选择器的实现、DOM操作、事件处理等。1.4版本虽然较旧，但其中的基本架构和核心思想在...
JDBC+Servlet+JSP+Mysql写的一个简单的登录注册
热门推荐
梦月如风的博客
06-29 3万+
一.代码的结构： 二.用到的开发工具： ecliopse、tomcat 7.0、navicat for mysql 用到的架包： mysql-connector-java-5.1.25-bin.jar 三.开发的代码： 3.1 User类： package com.demo.bean; public class User {
CSS
梦月如风的博客
07-26 415
CSS   css属性         1.文字属性             font—style                 作用：规定文字样式的属性                 取值：                     normal：正常的，默认就是正常的                     italic：倾斜的                 快捷键
HTML
梦月如风的博客
07-25 321
HTML     1.什么是HTML         Html全称hypertext markup language（超文本标记语言）         作用：他是用来描述文本的语义的，也就是用来告诉浏览器哪一些是标题，哪一些是段落，而不是用来修改文本样式的     2.html的基本结构                        Insert title here
JavaScript_09
梦月如风的博客
08-11 308
1.窗口的宽和高               窗口宽和高 //浏览器的内容显示区的宽和高，不包括滚动条 //window.innerWidth window.innerHeight ff //.documentElement.clientWidth .documentElement.clientHeight ie var w = window.innerWidth |
jQuery学习手册
10-09
6. dateISO:true：表示用户必须输入正确格式的ISO日期，如"2009-06-23"或"1998/01/22"，并且只验证格式，不验证有效性。 7. number:true：表示用户必须输入合法的数字，包括负数和小数。 8. minlength:5：表示用户...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值