<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link type = 'text/css' rel = 'stylesheet' href = 'css/user.css'>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" >
// jQuery 获得元素的方式
$(document).ready(function(){
//获得p标签后循环输出标签的值,例如 <p>Hello</p> 获取p标签的Hello
var arr=$('p');
for(var i = 0 ;i<arr.length;i++){
alert( $(arr[i]).text());
}
//通过id 获得p标签的值
alert(' by id p='+$('#pid').text());
//通过 class 获得p 标签的值
alert('by class p ='+$('.pclass').text());
//从集合中通过序号取值
alert("eq="+$('p').eq(1).text());
// 获取指定条件一致的值
alert($("p").filter('.pclass').text());
// 选取集合中的有顺序的几个
$('p').slice(0,2).css('color','red');
//获取与条件表达式一致的元素
$('p').each(function(){
switch(true){
case $(this).is('.pclass'):
$(this).css('color','red');
break;
case $(this).is('#pid'):
$(this).css('color','red');
break;
}
});
//获得元素的上一个节点和下一个节点 找到每个段落的后面紧邻的同辈元素中类名为pclass的元素。
//alert( $('p').next('.pclass').text());
//alert($('p').prev('.pclass').text());
//获得父类标签的标签名称
alert($('p').parent().prop('tagName'));
alert($('.pclass').children().prop('tagName'));
//获得标签中属性的值
alert($('#userName').attr('type'));
});
</script>
</head>
<body>
请输入用户 <input id ="userName" type = "text" class = 'userClass'/>
<input class = "classCheck" type ="button" value = '校验'/>
<input type = "button" value = '提交'/>
<div><div/>
<div>
<p>第一个p标签的内容</p>
<p>第二个p标签的内容</p>
<p id = 'pid'>第三个p标签的内容</p>
<p>第四个p标签的内容</p>
<p class= 'pclass'><a>第五个p标签的内容</a></p>
<p>第六个p标签的内容</p>
<p>Hello</p>
<p>Hello Again</p>
<p class="selected">And Again</p>
</div>
</body>
</html>
分享到：
相关推荐
jQuery是一种快速、小巧的JavaScript库，它通过一个简单易用的API为HTML文档提供了大量的功能。...当然，了解不同的选择器用法以及对DOM属性的深入理解也是获取元素标签名称之外，提升前端开发技能的重要部分。
`get(0)`或`[0]`用于将jQuery对象转换为原生JavaScript DOM元素，因为DOM元素具有`nodeName`或`tagName`属性，可以返回元素的标签名。`toLowerCase()`是用来将返回的标签名转换为小写，因为HTML规范中标签名不区分大...
jQuery通过工厂函数将DOM元素转化为jQuery对象，这使得我们可以更方便地操作这些元素。jQuery工厂函数有多种语法形式： 1. 将单一DOM元素转化为jQuery对象：`jQuery(element)`。 2. 将一组DOM元素转化为jQuery对象：...
- **jQuery对象转DOM对象**：`var variable = $variable[0]` 或 `var variable = $variable.get(0)`，其中 `$variable` 是一个jQuery对象，转换后得到 `variable` 是一个DOM对象。 6. **解决与其他JS库的冲突**： ...
2. 对存储的页面元素对象进行操作，如点击链接、输入文本等。 3. 指定页面元素操作的值，例如在输入框中输入特定的字符。 定位页面元素的操作是自动化测试中不可或缺的一步，如果无法定位到页面元素，后续的操作就...
- **标签选择器**：通过HTML标签名称来选择元素，例如：`$("div")`。 - **属性选择器**：根据属性值来选择元素，例如：`$("[name='username']")`。 - **层级关系**：通过父子关系、兄弟关系等方式定位元素，例如：`$...
- `$("ul")`：通过标签名称选择元素。 - `$("ul li")`：选择 `ul` 下的所有 `li` 元素。 2. **表单选择器**：用于选择特定类型的表单元素，如： - `:text`：所有文本输入框。 - `:password`：所有密码输入框。 ...
- **元素选择器**：通过标签名称选择元素，例如：`$("p")`。 - **ID 选择器**：通过 ID 名称选择元素，例如：`$("#myId")`。 - **类选择器**：通过类名称选择元素，例如：`$(".myClass")`。 ##### 2. **属性选择器*...
在四级级联中，每个级别可能对应一个选择框元素，jQuery可以轻松地获取或设置这些元素的属性，如值、文本或者可见性。同时，jQuery还可以动态创建和插入新的DOM元素，以展示或隐藏各级别的选项。 2. **事件处理**：...
1. **更改CSS样式**：jQuery提供了多种方式来改变元素的样式。例如，可以直接设置单个样式（A），使用对象设置多个样式（B），使用颜色名（C）或再次使用对象设置多个样式（D）。这些方法使动态改变网页样式变得非常...
13. **创建元素**：使用对象创建元素并设置属性，如`$('<div>', {id: 'myDiv', class: 'myClass'})`。 14. **多属性过滤**：`filter()`可以接受多个条件，如`$(".item").filter(":first", ":even")`选取第一个偶数...
4. **布局模式**：CSS支持流体布局、网格布局、定位布局等多种布局方式，如`float`用于浮动元素，`display:flex`用于创建弹性布局。 5. **响应式设计**：CSS3引入媒体查询（`@media`）以实现不同设备上的适配性布局...
这里，`selector`参数指定了触发右键菜单的元素（在这个例子中是所有的`img`标签），`items`参数定义了菜单项及其属性。 2. **自定义菜单项**：你可以自由定义菜单项的名称、图标、回调函数等。图标可以是内置的...
jQuery UI库提供了多种主题，可以通过设置`theme`属性轻松改变Autocomplete的外观。同时，也可以自定义CSS来调整提示列表的样式。 **7. 兼容性和优化** 确保Autocomplete插件在不同浏览器和设备上的表现一致，是...
2. `getElementsByTagName()` 方法：根据元素的标签名获取元素集合。 3. `getElementsByClassName()` 方法：根据元素的类名获取元素集合。 4. `querySelector()` 方法：利用CSS选择器来获取第一个匹配的元素。 5. `...
input 元素有多种属性，包括： * name：用于指定用来保存用户输入文本的变量和名称。 * title：用于指定 input 元素的标签，通常是位于输入框前的提示信息。 * type：用于指定文本输入区的类型，有 text 和 ...
同时，选择器也广泛应用于JavaScript中，例如jQuery库中的选择器功能，用于在DOM（文档对象模型）中查找和操作元素。 描述中提到的"Selector"可能是在讨论与字体相关的选择器，这可能是关于如何在CSS中控制文本的...
- **引入 jQuery**：通过 `<script>` 标签引入 jQuery 文件。 - **基本选择器**：如 `$("#id")`、`$(".class")` 和 `$("element")` 等。 - **事件绑定**：使用 `.on()` 方法绑定事件处理函数。 - **Ajax 调用**...
2. **通过名称定位：** 当元素具有唯一的名称属性时使用。 3. **通过XPath定位：** XPath 是一种在XML文档中查找信息的语言，可用于定位复杂的HTML结构。 4. **通过CSS选择器定位：** CSS选择器语法更简洁，易于阅读...