JQuery学习笔记之选择器
2024-09-27 15:48:37
JQuery与DOM对象
<div id="test1" class="test2"></div>
DOM对象获取方式:
var dom_div1 = document.getElementById('test1');
var dom_div2 = document.getElementByClassName('test2');
JQuery对象获取方式:
var $jq_div1 = $('#test1'); // id选择器
var $jq_div2 = $('.test2'); // 类选择器
var $jq_div3 = $('div'); // 元素选择器
DOM对象与JQuery对象互相转换:
// dom -> jq
var dom2jq_div1 = $(dom_div1);
var dom2jq_div2 = $(dom_div2);
// jq -> dom
var jq2dom_div1 = jq_div1[0];
var jq2dom_div2 = jq_div2.get(0);
二者区别如下:
- 通过jQuery方法包装后的对象,是一个类数组对象。它与DOM对象完全不同,唯一相似的是它们都能操作DOM。
- 通过jQuery处理DOM的操作,可以让开发者更专注业务逻辑的开发,而不需要我们具体知道哪个DOM节点有那些方法,也不需要关心不同浏览器的兼容性问题,我们通过jQuery提供的API进行开发,代码也会更加精短
选择器
上面一小节已经介绍了:
- id选择器
- 类(class)选择器
- 元素选择器
层选择器
下面介绍层选择器,有如下四种:
- 子选择器
- 后代选择器
- 相邻兄弟选择器
- 一般兄弟选择器
区别示例如下:
基本筛选选择器
<body>
<h2>基本筛选器</h2>
<h3>:first/:last/:even/:odd</h3>
<div class="left">
<div class="div">
<p>div:first</p>
<p>:even</p>
</div>
<div class="div">
<p>:odd</p>
</div>
<div class="div">
<p>:even</p>
</div>
<div class="div">
<p>:odd</p>
</div>
<div class="div">
<p>:even</p>
</div>
<div class="div">
<p>div:last</p>
<p>:odd</p>
</div>
</div>
<h3>:eq/:gt/:lt</h3>
<div class="left">
<div class="aaron">
<p>:lt(3)</p>
</div>
<div class="aaron">
<p>:lt(3)</p>
</div>
<div class="aaron">
<p>:eq(2)</p>
</div>
<div class="aaron">
</div>
<div class="aaron">
<p>:gt(3)</p>
</div>
<div class="aaron">
<p>:gt(3)</p>
</div>
</div>
<script type="text/javascript">
//找到第一个div
$('.div:first').css("color", "#CD00CD");
$('.div:last').css("color", "#CD00CD");
$('.div:odd').css("border", "3px groove red");
$('.div:even').css("border", "3px groove blue");
$('.aaron:eq(2)').css("border", "3px groove blue");
$('.aaron:lt(3)').css("color", "#CD00CD");
$('.aaron:gt(3)').css("border", "3px groove blue");
</script>
</body>
</html>
内容筛选选择器
可见性筛选选择器
属性筛选选择器
子元素筛选选择器
表单元素选择器
其实也可以用属性筛选选择器,例如:
$('input[type=text]') == $('input:text')
表单对象属性筛选选择器
<input type="checkbox" checked="checked">
<input type="checkbox">
<input type="radio" checked>
<input type="radio">
<select name="garden" multiple="multiple">
<option>imooc</option>
<option selected="selected">慕课网</option>
<option>aaron</option>
<option selected="selected">博客园</option>
</select>
<script type="text/javascript">
//查找所有input所有勾选的元素(单选框,复选框)
//移除input的checked属性
$('input:checked').removeAttr('checked')
//查找所有option元素中,有selected属性被选中的选项
//移除option的selected属性
$('option:selected').removeAttr('selected')
</script>
特殊选择器this
<p id="test1">点击测试:通过原生DOM处理</p>
<p id="test2">点击测试:通过原生jQuery处理</p>
<script type="text/javascript">
var p1 = document.getElementById('test1')
p1.addEventListener('click',function(){
//直接通过dom的方法改变颜色
this.style.color = "red";
},false);
</script>
<script type="text/javascript">
$('#test2').click(function(){
//通过包装成jQuery对象改变颜色
$(this).css('color','blue');
})
</script>
最新文章
- mmorpg手游中的战斗系统
- angularjs组件之input mask
- codeforces 710E E. Generate a String(dp)
- MySql 查询一周内最近7天记录
- hdoj 2046 骨牌铺方格
- linux mint 下mysql中文支持问题
- USACO Section 5.3 Milk Measuring (IDDFS+dp)
- 谈谈jconsole和jvisualvm
- expected single matching bean but found 2
- Linq学习系列-----1.2 一个简单方法的改进思考及不同的执行形式
- 海思Hi3559A/CV100 DDR4驱动配置手册
- C#总结小程序
- 从外部设置传入Go变量
- Oracle 唯一 约束(unique constraint) 与 索引(index) 关系说明
- navLI鼠标滑上显示下拉导航
- 互斥锁pthread_mutex_init()函数
- maven 工程mybatis自动生成实体类
- python函数语法学习
- HTML5与CSS3设计模式 中文版 高清PDF扫描版
- duilib入门简明教程 -- 界面布局(9) (转)
热门文章
- 安装-supervisor
- 在Github或Gitee上用hexo搭建个人博客
- Scopus数据库简介
- 【计算机视觉】ImageNet介绍
- 【视频开发】IR-CUT作用
- xshell怎么配置鼠标颜色
- npm install 报错 error Unexpected end of JSON input while parsing near &#39;...sShrinkwrap";:false,";d&#39; 解决办法
- BJFU-225-基于链表的两个递增有序序列的合并
- Linux设置SSH隧道连接
- FileChannel详解