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>
分享到：
相关推荐
**jQuery应用开发实践指南示例代码** 在编程领域，jQuery是一个非常重要的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。《jQuery应用开发实践指南》是一本深入浅出介绍jQuery使用的书籍...
jQuery是一个广泛应用于Web开发的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。本篇文章将深入探讨jQuery在表单应用中的核心知识点，旨在帮助你轻松掌握并深化对jQuery的理解。...
JQuery应用实例学习(强烈推荐)---无私奉献了！！
《jQuery应用实例详解》 jQuery，作为一款广泛应用于前端开发的JavaScript库，以其简洁的API和强大的功能，深受开发者喜爱。本篇文章将深入探讨jQuery在实际应用中的多种实例，帮助读者掌握并熟练运用jQuery，提升...
资源名称：jQuery应用开发实践指南内容简介：这是一本完全以实例方式来全方位讲解jQuery应用开发的著作，由Ajax领域的技术权威撰写。书中不仅详细讲解了jQuery的各种组件的功能特性和jQuery应用开发的流程与方法，...
《jQuery应用技巧大全modified》是一份关于jQuery技术的详尽指南，主要涵盖了jQuery在实际开发中的各种实用技巧。本文将深入解析这些技巧，帮助开发者更好地理解和运用jQuery。 首先，jQuery的核心在于对页面元素的...
根据提供的文件信息，我们可以推断出这是一本关于jQuery应用开发的书籍——《jQuery应用开发实践指南》，并提供了两种下载方式：云盘下载与本地下载。下面将对jQuery及其应用开发进行详细介绍，并结合《jQuery应用...
《jQuery应用技巧大全》 jQuery，作为一款广泛使用的JavaScript库，极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本篇文章将深入探讨jQuery的应用技巧，帮助开发者提高工作效率，优化网页性能，实现丰富...
《HTML5+CSS3+jQuery应用之美》由韩国专业视觉设计师倾力奉献其多年商业网站设计与制作的从业经验，通过八大商业案例，以HTML5搭建结构、CSS3设置样式、jQuery实现动态应用这三者相结合的实际应用方式，详细讲解它们...
JQuery 实例应用大全 JQuery 是一个功能强大的 JavaScript 库，提供了许多实用的方法来选择和操作网页元素。在本文中，我们将探索 35 个经典的 JQuery 应用实例，涵盖了选择网页元素、链式操作、元素的操作等多个...
**MVC 模式与 jQuery 应用** MVC（Model-View-Controller）模式是一种软件设计模式，常用于创建可维护性和可扩展性高的Web应用程序。它将应用程序的业务逻辑、用户界面和数据访问分离开来，使得各部分可以独立进行...
### 超经典jQuery应用技巧大全 #### 一、页面元素的引用 在网页开发过程中，经常需要对页面上的各种元素进行操作。jQuery提供了一种简单便捷的方式来引用这些元素。通常，我们可以通过`$()`来选择元素，比如通过ID...
【jQuery应用插件详解】 jQuery，作为一款广泛应用于前端开发的JavaScript库，极大地简化了DOM操作，动画效果创建以及事件处理。本篇文章将详细介绍标题所提及的29款实用jQuery应用插件，它们覆盖了网页设计与交互...
今天要分享给大家的是9款完美体验的HTML5/jQuery应用，这些基于HTML5和jQuery的应用都比较实用，而且也相对比较华丽，当然，这需要你使用支持HTML5的浏览器，一起来看看。 1、jQuery动画图标菜单导航 仿苹果样式 ...
标题“JQuery入门—编写一个简单的JQuery应用案例”指出了本篇文档将引导读者通过一个基础案例来了解如何开始使用JQuery。描述部分提到，首先需要引入JQuery文件库，这可以通过在HTML页面的标签内导入JQuery脚本文件...
本文将深入探讨在Asp.net环境中如何利用jQuery实现一系列经典的应用实例。 一、jQuery基本操作 1. **选择器**：jQuery的核心在于它的选择器，如`$("#id")`用于选取ID为指定值的元素，`$(".class")`选取具有特定类...