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. gunicorn 参数

    gunicorn -w 4 -b 0.0.0.0:8080 yourpyfilename:app --log-level DEBUG --timeout 60gunicorn的命令对应参数含义如下: ...

  2. LuoguP3069 【[USACO13JAN]牛的阵容Cow Lineup

    题目链接 看了看其他大佬的文章,为什么要控制右端呢 其实就是一个很简单的模拟队列趴... 难点就在于根据题意我们可以分析得一段合法区间内,不同种类个数不能超过k+2 哦当然,由于种类数范围过大,要对种 ...

  3. STM32Cube基础工程配置

    开发板:正点原子STM32F4探索者 (2019-08-10 22:04:39) 开发环境:MDK5.28.0.0 + STM32CubeMX5.3.0 + STM32CubeF4 V1.24.0 内 ...

  4. ubuntu docker 下mongodb集群和分片

    首先我们计划启动了三个mongo服务:master,salve,arbiter 1.准备工作 新建文件夹如图(每个文件夹下面有db和configdb文件夹): 生成认证文件并修改权限 openssl ...

  5. 探索ASP.NET MVC5系列

    探索ASP.NET MVC5系列之~~~6.Session篇(进程外Session)     探索ASP.NET MVC5系列之~~~5.缓存篇(页面缓存+二级缓存)     探索ASP.NET MV ...

  6. dapper.common新增概念object to sql

    Dapper.Common About author Email:@qq.com QQ: QQGroup: Config DbContextFactory.AddDataSource(new Data ...

  7. kubernetes(k8s)集群安装calico

    添加hosts解析 cat /etc/hosts 10.39.7.51 k8s-master-51 10.39.7.57 k8s-master-57 10.39.7.52 k8s-master-52 ...

  8. 【WEB基础】HTML & CSS 基础入门（10）布局与定位

    块级元素和行内元素 HTML里的元素可以分为块级元素和行内元素两大类:

  9. Java自学-接口与继承 UML图

    UML 图 步骤 1 : UML 图 -- 类之间的关系 UML-Unified Module Language 统一建模语言,可以很方便的用于描述类的属性,方法,以及类和类之间的关系 步骤 2 : ...

  10. 关于银企直连中银行通信类 配置篇 EPIC_PROC

    简单介绍:SAP银行企业直连,英文全称:Electronic Payment Integration(For China),简称EPIC,是SAP中国为本地化的需求开发的一款产品,以银企直连为支撑,主 ...