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. 解决github打不开

    今天重庆电信的“临时工”把github废了. 主要是github.githubassets.com和customer-stories-feed.github.com访问不到 通过修改host的方式上g ...

  2. react-native项目如何在xcode上打开ios项目

    如何打开ios项目? 导入或者双击ios/thirtydays.xcodeproj

  3. 【RabbitMQ学习之一】RabbitMQ入门

    环境 win7 rabbitmq-server-3.7.17 Erlang 22.1 RabbitMQ使用Erlang语言开发消息中间件.RabbitMQ基于AMQP(高级消息队列协议)协议,更适合业 ...

  4. html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案

    html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案 大家都知道需要在点击时候后 播放 ps:如果点击ajax 回来播放也不行,必须点击立即播放 要背景自动播放只能采取下面方案< ...

  5. mke2fs和mkfs命令使用

    1.mke2fs命令 在Linux系统下,mke2fs命令可用于创建磁盘分区上的”ext2/ext3”文件系统. (1)语法 mke2fs(选项)(参数) (2)常用选项 -b<区块大小> ...

  6. Image动画

    前几课讲的静态Image挺有趣的,但是如果能有动画的效果,那就更有趣了,mPython做出动画效果也不难.用images的列表,list. 下面就是一个列表: eggs bacon tomatoes ...

  7. [转帖]PostgreSQL 参数调整(性能优化)

    PostgreSQL 参数调整(性能优化) https://www.cnblogs.com/VicLiu/p/11854730.html 知道一个 shared_pool 文章写的挺好的 还没仔细看 ...

  8. ES7.3.0配置

    # elasticsearch.yml cluster.name: my-application node.name: node-1 node.master: true node.ingest: tr ...

  9. Java可视化计算器

    利用java中的AWT和SWING包来做可视化界面. 首先来简单了解一下这两个包: AWT和Swing都是Java中用来做可视化界面的.AWT(Abstract Window Toolkit):抽象窗 ...

  10. SUSE12SP3-Samba配置

    简介 samba官网:https://www.samba.org/ 维基百科: https://zh.wikipedia.org/wiki/Samba Samba,是种用来让UNIX系列的操作系统与微 ...