JQUERY对页面属性的选择控制(整理)
1.#id:通过元素id
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#myDiv").css("border","3px solid red");
});
</script>
<style>
div {
width: 90px;
height: 90px;
float:left;
padding: 5px;
margin: 5px;
background-color: #EEEEEE;
}
</style>
</head>
<body>
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
</body>
</html>
2.element:通过页面元素名称,如div,span,p等
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("div").css("border","3px solid red");
});
</script>
<style>
div,span {
width: 60px;
height: 60px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
</head>
<body>
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
</body>
</html>
3..class:通过class名称,注意“.”号
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$(".myClass").css("border","3px solid red");
});
</script>
<style>
div,span {
width: 150px;
height: 60px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
</head>
<body>
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
</body>
</html>
4.*:通过“*”号匹配所有
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("*").css("border","3px solid red");
});
</script>
<style>
div,span,p {
width: 150px;
height: 60px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
fo
分享到:
相关推荐
### Jquery 选择器整理 #### 基本选择器 **功能描述:** 基本选择器是jQuery中最常用的类型之一,它们提供了简单的DOM元素选择方式。通过这些选择器,开发者可以快速定位到页面中的特定元素。 **代码示例与...
这篇文章将对jQuery选择器进行深入的整理和介绍。 首先,jQuery选择器可以分为基本选择器、层级选择器、属性选择器、内容选择器以及伪类选择器。基本选择器包括ID选择器(`#id`),类选择器(`.class`),元素选择...
1. **引用页面元素**:jQuery通过`$()`选择器引用元素,支持ID、类名、元素类型以及层级关系和DOM或XPath条件。返回的是一个jQuery对象,它是一个集合,包含匹配到的所有元素。直接对jQuery对象调用DOM方法会导致...
下面是对jQuery知识点的整理: 基本概念 * jQuery对象:使用$符号来声明jQuery对象,如:`$()`或`jQuery()` * $符号:是jQuery的特殊字符,用于声明jQuery对象,同时也是jQuery选取元素的符号 选取元素 * `$(...
这是因为 jQuery Mobile 采用 AJAX 方式进行页面导航,导致页面并未真正刷新,而是动态插入到 DOM 中。当页面第一次加载时,`pageinit` 正常触发。但在使用 `changePage()` 或链接进行页面切换时,由于页面已经存在...
"jQuery数据整理页面交互设计展示信息特效"这一主题涵盖了如何利用jQuery来优化用户体验,通过创建丰富的视觉效果和流畅的用户界面,使得网站内容更加生动、易于理解和操作。 1. **jQuery基础**:jQuery是一个轻量...
为了具体使用这个功能,你需要按照`下载及使用说明.txt`中的指导进行操作,包括设置HTML页面、引入jQuery库和选择器插件、配置Java服务(如果有的话),以及可能的Ajax请求。在调试过程中,使用浏览器的开发者工具...
### jQuery学习笔记精心整理 #### 一、什么是jQuery 1. **定义**: - **第三方**:jQuery是由第三方组织或个人编写的函数库,并非浏览器内置或开发者自定义的函数,因此使用前需从官方网站([www.jquery.com]...
1. **选择器**: jQuery 提供了一系列CSS选择器,如ID选择器(#id),类选择器(.class),元素选择器(element),以及组合选择器,使我们能够快速地选取DOM元素。 2. **DOM操作**: jQuery 提供了简便的方法来操作DOM,...
本参考手册由W3School整理,旨在提供全面的jQuery选择器和事件方法的知识。 **jQuery 选择器** jQuery的选择器是基于CSS选择器进行扩展的,允许开发者更加精确地选取DOM(文档对象模型)中的元素。以下是一些基本...
属性选择器是根据元素的属性和属性值来选择元素的方法,如通过属性名、属性值等选择元素。子元素选择器可以选取特定的子元素,比如选取父元素下第几个子元素。表单对象选择器用于选取表单元素,如选中、未选中等状态...
使用JQuery和FileTree插件实现的本地文件浏览器,包括以下功能: 1.本地驱动器的选择 2.左侧显示目录,右侧显示文件 3.在新窗口(html页面)中打开文件 ...5.对手工添加的文件属性进行分类整理、搜索
1. **元素操作**: 如动态创建元素、删除元素、修改元素属性等,这些例子有助于理解jQuery对DOM的操作。 2. **事件处理**: 包含各种事件的触发和响应,如点击事件、滚动事件、表单提交事件等,帮助你掌握事件处理...
- **选择器**:jQuery提供了一套强大的CSS选择器,允许开发者以CSS的方式选择页面中的元素。 - **链式调用**:jQuery方法可以串联起来使用,形成流畅的代码风格,提高代码可读性和可维护性。 - **事件处理**:jQuery...
jQuery提供了强大的选择器机制,可以非常灵活地选取页面中的元素。 **示例:** `$("ul li ul li:has(a)").addClass("myClass");` **功能:** 选取所有包含`<a>`标签的`<li>`子元素,并为其添加一个名为`myClass`的...
例如,通过添加特定的"data-"属性,如"data-role='page'",可以将HTML元素转化为jQuery Mobile的页面组件。 在设备兼容性方面,jQuery Mobile旨在无缝地工作在各种移动设备和操作系统上,解决不同平台间的差异。它...
- **选择器**:jQuery 支持 XPath 和 CSS 选择器语法的组合,包括元素选择器、属性选择器、CSS 选择器等,例如 `$("div.classname")`、`$("[name='example']")`。 #### 五、文档就绪函数 所有 jQuery 函数应置于 *...
ajax中国整理的这个中文参考,旨在帮助中文用户更好地理解和应用jQuery。 **jQuery基础** 1. **选择器**: jQuery的选择器类似于CSS选择器,用于选取HTML元素。例如,`$("#id")`选择ID为"id"的元素,`$(".class")`...
这允许开发者对单一DOM元素进行jQuery操作。而`$(elems)`则是处理多个DOM元素,将它们作为一个集合进行操作,如`$(form1.elements)`可以选取表单中的所有元素并进行隐藏操作。 【DOM操作】 DOM操作是jQuery的重要...
JQuery是一种广泛应用于Web开发的JavaScript库,它极大地简化了JavaScript的使用,使得DOM操作、事件处理、动画设计和Ajax交互变得更加便捷。...通过研究这些实例,开发者可以加深对JQuery的理解,提升Web开发技能。