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 MVC标签

    1.我们平时使用表单的时候,一般都是这样: <form id="form" action="Login.do" method="post&quo ...

  2. Tarjan 算法求 LCA / Tarjan 算法求强连通分量

    [时光蒸汽喵带你做专题]最近公共祖先 LCA (Lowest Common Ancestors)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili tarjan LCA - YouTube Tarj ...

  3. scala集合有哪些

    不可变集合图示:  

  4. .net core使用AutoMapper

    AutoMapper文档:http://docs.automapper.org/en/stable/The-MyGet-build.html 新的版本抛弃了静态API方法,我们将使用依赖注入来完成. ...

  5. Python 2 代码转 Python 3的一些转化

    Python 2 代码转 Python 3的一些转化 1.“print X” 更改为“print(X)” 2.xrange改为range 3.m.itervalues() 改为 m.values() ...

  6. idea git使用记录

    ps:记录idea中git的使用过程 在IntelliJ IDEA使用.gitignore插件的方法和作用 在IntelliJ IDEA使用.gitignore插件的方法和作用 idea git st ...

  7. Docker在linux系统下的安装

    系统要求 本安装教程仅限于CentOS7,其他系统不适用.centos-extras仓库必须是启用状态,这个仓库默认状态是启用,如果不是启用状态,请修改. 卸载旧版本的Docker Docker的旧版 ...

  8. sql server 根据字段去重

    使用 row_number() over (partition by 要去重的字段 order by 排序字段) 数据库表结构 学生成绩表 UserGrade Id        int       ...

  9. Linux下快速安装Python3和pip

    如果本机安装了python2,尽量不要管他,使用python3运行python脚本就好,因为可能有程序依赖目前的python2环境, 比如yum!!!!! 不要动现有的python2环境! 一.安装p ...

  10. Options of the DB storage of prometheus

    参考: // Options of the DB storage. type Options struct { // The timestamp range of head blocks after ...