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>

MARSGGBO♥原创







2019-8-13

JQuery学习笔记之选择器的更多相关文章

  1. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  2. JQuery学习笔记——基础选择器

    第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...

  3. jQuery学习笔记(2)-选择器的使用

    一.选择器是什么 有了jQuery的选择器,我们几乎可以获取页面上任意一个或一组对象 二.Dom对象和jQuery包装集 1.Dom对象 JavaScript中获取Dom对象的方式 <div i ...

  4. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  5. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  6. jQuery学习笔记（一）：入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

  7. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  8. jQuery 学习笔记：jQuery 代码结构

    jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...

  9. jQuery学习笔记之插件开发（4）

    jQuery学习笔记之插件开发(4) github源码地址 插件:了让原有功能的增强. 1.插件的种类(3种):局部.全局.选择器插件 1.1封装对象方法的插件 这种类型的插件是把一些常用或者重复使用 ...

随机推荐

  1. Spring 事物隔离级别，事物传播行为

    Spring 框架中对于事物的管理,主要定义了一下四种属性: 事物的隔离(Isolation)级别 事物的传播行为(Propagation Behavior) 事物的超时时间(TImeout) 是否为 ...

  2. concurrent （二）AQS

    参考文档: https://www.cnblogs.com/waterystone/p/4920797.html

  3. button 在chrome浏览器下被点击时会出现一个橙色的边框

    问题描述: button在chrome浏览器下被点击时会出现一个橙色的边框 在button上添加 :focus{outline:none;}也无法解决. 解决办法: 在button上添加 :focus ...

  4. idea导入工程

    idea导入svn中的工程,一般是多模块的工程. 1 在idea中导入一个工程的目录,可以建立对应的文件夹 dy-task ,svn选择对应的分支导入 2 在dy-task同目录下建立其他目录 dy- ...

  5. python 关于celery的异步任务队列的基本使用（celery+redis）【采用配置文件设置】

    工程结构说明:源文件下载请访问https://i.cnblogs.com/Files.aspx __init__.py:实例化celery,并加载配置模块 celeryconfig.py:配置模块 t ...

  6. Docker从入门到实践（3）

    三.安装 Docker Docker 分为 CE 和 EE 两大版本.CE 即社区版(免费,支持周期 7 个月),EE 即企业版,强调安全,付费使用,支持周期 24 个月. Docker CE 分为  ...

  7. Win 10 没有 Hyper-V 解决方案

    1.首先新建一个记事本文件. 2.在记事本中写入. pushd "%~dp0" dir /b %SystemRoot%\servicing\Packages\*Hyper-V*.m ...

  8. 一个萝卜一个坑#M坑—Polynomial、Polyder

    Polynomial 作用:对输入值执行多项式系数计算,输入输出都可为实数标量或向量. 库:Simulink / Math Operations Polyval 作用:多项式计算,即求多项式在某一点的 ...

  9. 详细的Hadoop的入门教程-完全分布模式Fully-Distributed Operation

    1. 前面在伪分布模式下已经创建了一台机器,为了统一命名,hostname更名为hadoop01.然后再克隆2台机器:hadoop02. hadoop03:将第一台机器hadoop01上的伪分布停止, ...

  10. python数据分析三剑客之: pandas操作

    pandas的操作 pandas的拼接操作 # pandas的拼接操作 级联 pd.concat , pd.append 合并 pd.merge , pd.join 一丶pd.concat()级联 # ...