jQuery学习二
1.id选择器:
// 4.如果页面中多个元素id相同,jquery只会获取第一个id的jquery对象
var jquery = $('#name');
alert(jquery.val()); var jquery1 = $('#name');
alert(jquery1.val());
<body>
<input type="text" name="name" id="name" value="张三">
<input type="text" name="name" id="name" value="李四">
</body>
2.class选择器:
// 5.获取出来的jquery是一个数组,如果页面中多个元素class相同,jquery只会获取第一个id的jquery对象
var jquery3 = $('.name');
alert(jquery3.val()); // 张三
// 想获取非第一个元素的对象,需要根据索引获取到指定位置的DOM对象后,再转化成jquery对象进行使用
alert($($('.name')[]).val())
<input type="text" name="name" name ="name" value="张三">
<input type="text" name="name" name ="name" value="李四">
3.parent—child选择器:
// 6.获取div标签下所有class为name的元素
alert($('div' > .name).length); // 长度为2 <div>
<input type="text" name="name" name ="name" value="张三">
<input type="text" name="name" name ="name" value="李四">
</div>
4.prev + next选择器:
匹配所有紧邻在prev元素后的next元素。
// 7.获取紧邻元素为div的之后的class元素
alert($('div + .name').length); // 只有一个元素,就是value为sssss的 <div>
<input type="text" name="name" name ="name" value="张三">
<input type="text" name="name" name ="name" value="李四">
</div>
<input type="text" name="name" name ="name" value="sssss">
<input type="text" name="name" name ="name" value="ttttt">
5.prev ~ siblings选择器:
获取div标签后的所有元素。
// 8.获取div标签后的所有元素,长度为2,值为sssss和ttttt
alert($('div ~ .name').length);
<div>
<input type="text" name="name" name ="name" value="张三">
<input type="text" name="name" name ="name" value="李四">
</div>
<input type="text" name="name" name ="name" value="sssss">
<input type="text" name="name" name ="name" value="ttttt">
// 8.获取div标签后的所有元素,长度为2,值为sssss和ttttt
alert($('div ~ .name').length); <div>
<input type="text" name="name" name ="name" value="张三">
<input type="text" name="name" name ="name" value="李四">
</div>
<div>
<input type="text" name="name" name ="name" value="sssss">
</div>
<input type="text" name="name" name ="name" value="sssss">
<input type="text" name="name" name ="name" value="ttttt">
6.简单过滤选择器:匹配符合条件的元素
7.属性选择器:【attribute】匹配包含给定属性的元素
// 9.获取所有元素都有value属性的所有元素
alert($('[value]').length);
alert($('.name[value]').length); // 所有class为name的带有value的属性
jQuery学习二的更多相关文章
- Jquery 学习二
一.事件编程 1.基本事件(以方法形式存在的) 基本语法: 原生Javascript代码中的事件绑定方式: DOM对象.事件 = 事件的处理程序 jQuery代码中的事件绑定方式: jQuery对 ...
- jquery 学习(二) - 属性操作
html代码 <div class="n1" zdy="z1">AAA <p>1111111</p> <input t ...
- jQuery学习(二) 自定义扩展函数
jQuery函数调用写法很优雅,在项目开发过程中,有需要自定义函数经常被使用到,将这些函数放置到项目ExtTool.js中,为了编码方式的统一,也希望这些自定义函数与jQuery函数一致的调用方式.在 ...
- JQuery学习二(获取元素控件并控制)
$(’#id‘).+function; 例如: 1 <head> 2 <title>JQuery</title> 3 <script src="js ...
- jQuery学习(二)——使用JQ完成页面定时弹出广告
1.JQuery效果 2.步骤分析: 第一步:引入jQuery相关的文件 第二步:书写页面加载函数 第三步:在页面加载函数中,获取显示广告图片的元素. 第四步:设置定时操作(显示广告图片的函数) 第五 ...
- jQuery学习(二)
操作DOM对象: 修改文本: jQuery对象的text()和html()方法可以用来获取节点的文本内容和HTML文本.而当你给方法传入参数时,这两个方法可以被用于设置jQuery的文本内容. 还是以 ...
- JQuery学习二-字典操作
1. 数组中添加map var arr = []; var key = 'Jeremy'; var value = '!!!!' arr.push({ 'key': key, 'value': val ...
- jQuery学习-事件之绑定事件(二)
在上一篇<jQuery学习-事件之绑定事件(一)>我们了解了jQuery的add方法,今天我们来学习下dispatch方法: dispatch: function( event ) { ...
- jQuery学习之二 jQuery选择器
一.jQuery选择器是什么1.CSS选择器2.jQuery选择器 二.jQuery选择器的优势1.简洁的写法2.支持从CSS1到CSS3选择器3.完善的处理机制 传统js选择器假如要操作的元素不存 ...
随机推荐
- Nginx入门(三)——正向代理
server { resolver 114.114.114.114; #指定DNS服务器IP地址 listen 443; location / { proxy_pass https://$host$r ...
- finalize关键字小结
1.先看一下Object类中的finalize方法:可见里面什么也没有,说明让我们自己重写 * @throws Throwable the {@code Exception} raised by th ...
- vue npm,Git随笔
下载模块: npm install <package-name> --save-dev 上线: npm run build 基本使用流程:1. npm install vue-cli - ...
- Go 语言解释器 Yaegi
Yaegi 是一个优雅的 Go 语言解释器,可以执行 Go 脚本和插件. 特性 完整支持 Go 语言规范 用 Go 编写,只使用标准库 简单的解释器 API: New(), Eval(), Use() ...
- 关于windows中 redis 闪退问题
就在刚刚,因为 Redis 闪退原因,搞了快半小时,电脑关机前还能用,关机后一打开就秒退,所以我先发个解决方案再继续码.. 按照步骤一步一步来 ( 设置 redis 密码看文章最后 ) 给你省个事,我 ...
- mybatis-传多个参数
第一种方案:下标传参 DAO层的函数方法 Public User selectUser(String name, String area); 对应的Mapper.xml <select id=& ...
- Oracle 中MERGE语句的用法
原文章出处(http://blog.csdn.net/lichkui/article/details/4306299) MERGE语句是Oracle9i新增的语法,用来合并UPDATE和INSERT语 ...
- 用python写一个GitHub Trending Api
GitHub 给了开发者相当丰富的 API 接口 https://developer.github.com/v3/,包括认证,搜索,活动等接口,但就是没有提供获取 Trending 的接口.因此,需要 ...
- grafana 的配置文件,和使用mysql数据库做持久化
grafana 配置文件 vim /etc/grafana/grafana.ini 下面有些参数在新版中6.x版本中已经过时,请参考下面官网最新帮助文档为准 https://grafana.com/d ...
- mac 启动mysql
sudo /usr/local/mysql/support-files/mysql.server stop sudo /usr/local/mysql/support-files/mysql.serv ...