Jquery的应用-优快云博客

本文详细介绍了jQuery框架的优势及其在HTML文档、事件、动画效果和AJAX交互中的应用。通过实例展示了如何使用jQuery的层次元素选择器获取和操作不同层次的元素，以及如何运用CSS样式来改变元素的外观。文章提供了丰富的代码示例，帮助开发者更好地理解和利用jQuery和CSS的强大功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Jquery 是继 prototype 之后又一个优秀的 Javascrīpt 框架。

Jquery 的优势：

1. 它是轻量级的 js 库

2. 它兼容 CSS3

3. 还兼容各种浏览器（ IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ ）

4. jQuery 使用户能更方便地处理 HTML documents 、 events 、实现动画效果，并且方便地为网站提供 AJAX 交互。

Jquery 中层次的元素的关系：

Js 中代码：

 <script>
   /**    
           层次元素关系
               1、祖先关系   空格符号
               2、父子关系   大于符号
               3、紧跟的关系  +符号
               4、紧跟后的所有兄弟关系  ~符号
           CSS样式
               1、css("");带有一个参数是获取其属性的值
               2、css("","");为其对象设置一个指定的属性和属性值
               3、css(properties);把一个“名/值对”对象设置为所有匹配元素的样式属性 {"":"","":""...};
         
       */
      $(document).ready(function(){
           /**层级元素选择器的使用方式*/
           /**祖先关系 符号为===>空格*/
           var $frmipts = $("div input");//获取div元素的后代的所有input的元素 返回一个Jquery对象
           /**输出Jquery对象的大小*/
           alert("后代个数是："+$frmipts.size());
           
           /**父子关系 符号为===>>*/
           var $ipt = $("form>input");
           //为你获取的input添加背景颜色
           /**采用Jquery对象转换成DOM对象后使用style样式进行设置的*/
           var iptt = $ipt[0];
           iptt.style.backgroundColor="red";
           
           alert("-----------改变中介线---------------");
           /**采用Jquery对象本身的css方法来设置样式*/
           $ipt.css("background-color","blue");
           
           /**匹配所有紧接在某个元素后的某个元素 符号为===> +*/
           var $lipts=$("label+input");
           /**为其添加背景颜色*/
           $lipts.css("background-color","green");
           
           /**匹配 prev 元素之后的所有 siblings(兄弟) 元素  符号为====> ~*/
           var $fipts = $("form~input");
           $fipts.css("background-color","yellow");
           /**我使用到了CSS样式
             .css("")//获取其样式属性的值
              案例： $fipts.css("background-color");
             .css("","") //为其添加样式属性及属性值
              $fipts.css("background-color","yellow");
             .css(Map);//把一个“名/值对”对象设置为所有匹配元素的样式属性。
              $fipts.css({"background-color":"red","color":"blue"});
             */
           alert("获取该Jquery对象的背景颜色值："+$fipts.css("background-color"));
      });
   </script>

页面中的代码：

<body>
		<div>
			<div>
			     <input name="ddd"/>
				<h1>层级选择器的使用方式</h1>
			</div>
			<div id="#frm">
			   邮箱：<input name="test"/>
				<form>
					<label>Name: </label>
					<input name="name"/>
					<fieldset>
						<label>Newsletter: </label>
						<input name="newsletter" />
					</fieldset>
					<label>Age: </label>
					<input name="age"/>
				</form>
				<label>周星驰: </label>br/>
				姓名：<input name="none" /><br/>
			</div>
		</div>
</body>