JavaLearn#（22）jQuery介绍选择器事件动画DOM编程操作CSS表单验证

Posted 2022-04-06 LRcoding

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaLearn#（22）jQuery介绍选择器事件动画DOM编程操作CSS表单验证相关的知识，希望对你有一定的参考价值。

1. jQuery定义和特点

1.1 jQuery 入门

对 javascript 进行了封装，降低了使用JavaScript的难度，可以大幅提高开发效率（Write less, do more）

jQuery 广泛使用的是 1.x 版本，兼容 ie678

jQuery 实例：隔行变色（页面结构）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .datalist
            border:1px solid #007108;
            font-family:"微软雅黑";
            border-collapse:collapse;
            background-color:#d9ffdc;
            font-size:14px;
        
        .datalist th
            border:1px solid #007108;
            background-color:#00a40c;
            color:#FFFFFF;
            padding: 4px 12px;
            text-align:center;
        
        .datalist td
            border:1px solid #007108;
            text-align: center;
            padding: 4px 10px;
        
        .datalist tr.altrow
            background-color:#a5e5aa;
        
    </style>

    <script type="application/javascript" src="../js/jquery-1.9.1.js"></script>
</head>
<body>
<table class="datalist" summary="list of members in EE Studay" id="oTable">
    <tr>
        <th scope="col">Name</th>
        <th scope="col">Class</th>
        <th scope="col">Birthday</th>
        <th scope="col">Constellation</th>
        <th scope="col">Mobile</th>
    </tr>
    <tr>					<!-- 奇数行 -->
        <td>isaac</td>
        <td>W13</td>
        <td>Jun 24th</td>
        <td>Cancer</td>
        <td>1118159</td>
    </tr>
    <tr>		<!-- 偶数行 -->
        <td>fresheggs</td>
        <td>W610</td>
        <td>Nov 5th</td>
        <td>Scorpio</td>
        <td>1038818</td>
    </tr>
    <tr>					<!-- 奇数行 -->
        <td>girlwing</td>
        <td>W210</td>
        <td>Sep 16th</td>
        <td>Virgo</td>
        <td>1307994</td>
    </tr>
    <tr>		<!-- 偶数行 -->
        <td>tastestory</td>
        <td>W15</td>
        <td>Nov 29th</td>
        <td>Sagittarius</td>
        <td>1095245</td>
    </tr>
    <tr>					<!-- 奇数行 -->
        <td>lovehate</td>
        <td>W47</td>
        <td>Sep 5th</td>
        <td>Virgo</td>
        <td>6098017</td>
    </tr>
</table>
</body>
</html>
<!--  
	区分HTML注释和CSS注释
-->

script代码：

// JavaScript 形式
/** window.onload = function ()
        var arr = document.getElementsByTagName("tr");
        for (var i = 0; i < arr.length; i++) 
            if (i % 2 == 0) 
                arr[i].className = "altrow";
            
        
     */

// jQuery形式
$(function () 
    $("tr:even").addClass("altrow")
)

$(func)：

相当于 window.οnlοad=function()
功能比window.onload更强大
- window onload一个页面只能写一个，但是可以写多个$() 而不冲突
- window onload要等整个页面加载完后再执行（包括图片、超链接、音视频等），但是$的执行时间要早

$(selector)：选择器

jQuery的基本语法： $(selector).action

获取页面内容：$(selector)
操作页面的内容：action
- 控制页面样式
- 访问和操作DOM元素
- 事件处理功能
- 动画功能
- Ajax功能（jQuey不仅封装了JavaScript，还封装了Ajax）

1.2 jQuery对象和DOM对象

DOM对象：直接使用 JavaScript 获取的节点对象

className、innerHTML、value

jQuery对象：使用 jQuery 选择器获取的节点对象

addClass()、html()、val()

DOM对象 ----> jQuery对象： $(DOM对象)

jQuery对象 ----> DOM对象： jQuery对象[index] （使用索引）

2. jQuery 选择器

jQuery提供了丰富的选择器功能，针对于 JavaScript 的 getElementById( )、getElementsByName( )、getElementsByTagName( )，强大的多

2.1 基本选择器

标签选择器： $("元素标签(例如 p )")
ID选择器： $("#id")，选择某个标签内部的id： $("p#id")
类选择器： $(".class")， $("h2.class")
通配（*）选择器：$("*")
并集选择器：$("elem1, elem2, elem3)
后代（爷爷的儿子，爷爷的儿子的儿子等）选择器：$("ul li")
父子选择器：$("ul>li")
后面第一个next兄弟元素：$("prev + next")

例如 $(“h2+p”) 代表所有 h2 标签后面的第一个兄弟p 元素，如果 h2 和 p 之间有其他元素，其他元素也不会选中
后面所有的next兄弟元素：$("prev ~ next")

HTML素材：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本选择器</title>
		 <style type="text/css">
            .myClass
                background-color: aqua;
            
        </style>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	   <h3 id="h31">JSP</h3>
	   <span>span</span>
       <p> 
       JSP全名为Java Server Pages，中文名叫java服务器页面，其根本是一个简化的<span>Servlet</span>设计，
       它[1]  是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。
       JSP技术有点类似ASP技术，它是在传统的网页<em><span>HTML</span></em>（标准通用标记语言的子集）文件(*.htm,*.html)
       中插入Java程序段(Scriptlet)和JSP标记(tag)，从而形成JSP文件，后缀名为(*.jsp)。 用JSP开发的Web
       应用是跨平台的，既能在Linux下运行，也能在其他操作系统上运行。
       </p>
       
       <h3 id="h32" class="red1">Servlet</h3>
       <p>
       Servlet（Server Applet）是Java Servlet的简称，是为小服务程序或服务连接器，用Java编写的服务器端程序，主要功能在于交互式地浏览和修改数据，生成动态Web内容。
       </p>
       <p class="red1">
       狭义的Servlet是指Java语言实现的一个接口，广义的Servlet是指任何实现了这个Servlet接口的类，一般情况下，人们将Servlet理解为后者。Servlet运行于支持Java的应用服务器中。从原理上讲，Servlet可以响应任何类型的请求，但绝大多数情况下Servlet只用来扩展基于HTTP协议的Web服务器。
       </p>
      <div>
      	<p>div p</p>
      </div>
      <span>span</span>
       <p class="red1">
       狭义的Servlet是指Java语言实现的一个接口，广义的Servlet是指任何实现了这个Servlet接口的类，一般情况下，人们将Servlet理解为后者。Servlet运行于支持Java的应用服务器中。从原理上讲，Servlet可以响应任何类型的请求，但绝大多数情况下Servlet只用来扩展基于HTTP协议的Web服务器。
       </p>
	</body>
</html>

关键的jQuery操作代码：

$(function()
    //•标签选择器 $("a")   
    $("h3").addClass("myClass");
    $("p").addClass("myClass");

    
    //•ID选择器 $("#id")     $("p#id") 
    $("#h31").addClass("myClass");

    
    //•类选择器 $(".class")    $("h2.class") 
    $(".red1").addClass("myClass");

    
    //•通配选择器 $("*") 
    $("*").addClass("myClass");

    
    //•并集选择器$("elem1,elem2,elem3") 
    $("h3, p").addClass("myClass");

    
    //•后代选择器$(ul li) 
    $("span").addClass("myClass");
    $("p span").addClass("myClass");

    
    //•父子选择器 $(ul>li)  
    $("p>span").addClass("myClass");

    
    //•后面第一个next兄弟元素 prev + next 
    $("h3+p").addClass("myClass");
    
    
    //•后面所有的兄弟元素 prev ~ next 
    $("h3~p").addClass("myClass");
);

2.2 属性选择器

使用 [] 选择属性

匹配 包含给定属性（ [attribute] ）的元素：$("元素[attribute]")
复合属性选择器，需要同时满足多个属性：$("元素[attribute1][attribute2]")
匹配给定的属性是某个特定值（ [attribute = value] ）的元素：$("元素[attribute=value]")
匹配所有属性不等于特定值（ [attribute != value] ）的元素：$("元素[attribute!=value]")
匹配给定的属性是以某些值开始 （ [attribute ^= value] ）的元素：$(“元素[attribute^=value]”)`
匹配给定的属性是以某些值结尾 （ [attribute $= v a l u e] ）的元素：$ (“元素[attribute$=value]”)`
匹配给定的属性包含某些值的元素：$(“元素[attribute*=value]”)`

HTML素材：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性选择器</title>
		 <style type="text/css">
            .myClass
                background-color: aqua;
            
        </style>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		  <ul  id="sxt">
	           <li><a href="http://www.bjsxt.com/score.html">积分管理制度</a>
	           <li><a href="http://www.bjsxt.com/dorm">宿舍管理制度</a>
	            <li><a href="http://www.bjsxt.com/mobile">班级手机入袋制度</a>
	            <li><a href="http://www.bjsxt.com/flag">班级流动红旗制度</a>
	           <li><a href="http://www.bjsxt.com/film">周末经典电影剧场</a>
	                   <ul id="film">                                        
	                       <li><a href="film-1.html">乱世佳人</a></li>
	                       <li><a href="film-2.html" title="阿郎的故事">阿郎的故事</a></li>
	                       <li id="film3"><a href="film-3.html" >阿甘正传</a></li>
	                       <li><a href="http://www.bjsxt.com/film/film-4.htm" title="鲁冰花">鲁冰花</a></li>
	                       <li><a name="film-5.htm" title="太行山上">太行山上</a></li>
	                       <li>无问西东</li>
	                   </ul>
	           </li>                
           </ul>
	</body>
</html>

关键的jQuery操作代码：

window.onload=function()
    //•[attribute] 匹配包含给定属性的元素
    $("a").addClass("myClass");
    $("a[href]").addClass("myClass");   // 所有包含 href 属性的 a 标签

    
    //•[attribute1][attribute2] 复合属性选择器，需要同时满足多个属性
    $("a[href][title]").addClass("myClass");  // 包含 href 和 title 属性的 a 标签

    
    //•[attribute=value] 匹配给定的属性是某个特定值的元素
    $("a[href='http://www.bjsxt.com/score.html']").addClass("myClass");

    
    //•[attribute!=value] 匹配所有属性不等于特定值的元素
    $("a[href!='http://www.bjsxt.com/score.html']").addClass("myClass");

    
    //•[attribute^=value] 匹配给定的属性是以某些值开始的元素
    $("a[href^=http]").addClass("myClass");

    
    //•[attribute$=value] 匹配给定的属性是以某些值结尾的元素
    $("a[href$=htm]").addClass("myClass");

    
    //•[attribute*=value] 匹配给定的属性是以包含某些值的元素
    $("a[href*=film]").addClass("myClass");

2.3 位置选择器

针对整个页面而言的位置选择器
- 获取第一个元素： :first
  
  （例如 $("p:first") 代表整个页面的第一个 p 元素）
- 获取最后一个元素： :last
- 匹配所有索引值为奇数 的元素（索引从 0 开始）： :odd
  
  （例如 $("p:odd") 代表整个页面的索引为奇数的 p 元素）
- 匹配所有索引值为偶数 的元素（索引从 0 开始）： :even
- 匹配一个等于给定索引值的元素（索引从 0 开始）： eq(n)
  
  （例如 $("p:eq(5)") 代表整个页面的索引为5的 p 元素）
- 匹配所有大于给定索引值的元素（索引从 0 开始）： gt(n)
- 匹配所有小于给定索引值的元素（索引从 0 开始）： lt(n)
针对上级标签而言的（所有有父子结构的父级标签）
- 匹配每个标签的第一个子元素： :first-child
  
  （例如 $("p:first-child") 代表每个有**父子结构(例如div中有p元素)**的元素的第一个子元素 p）
- 匹配每个标签的最后一个子元素： :last-child
- 针对每个标签，如果某个元素是其唯一的子元素&
  以上是关于JavaLearn#（22）jQuery介绍选择器事件动画DOM编程操作CSS表单验证的主要内容，如果未能解决你的问题，请参考以下文章
  
  jQuery选择器介绍：基本选择器层次选择器过滤选择器表单选择器
  
  JavaLearn#（11）MapIterator迭代器Collections集合总结泛型
  
  JQuery框架：介绍安装选择器属性操作动画
  
  二次学习JQuery 选择器&选择集过滤&转移
  
  Jquery选择器
  
  jQuery-介绍加载选择器样式操作属性操作绑定click事件