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. Makefile文件基本格式

    以下是Makefile的基本模板 #指定编译器CC = g++#指定编译参数CFLAGS = -std=c++11 #指定头文件路径,此处用于指定非标准库的头文件路径INC = -I./ -I /us ...

  2. Java8 新特性 函数式接口

    什么是函数式接口   函数式接口是Java8引用的一个新特性,是一种特殊的接口:SAM类型的接口(Single Abstract Method).但是它还是一个接口,只是有些特殊罢了.  函数式接口的 ...

  3. JavaSE 笔试题: 自增变量

    JavaSE 笔试题 自增变量 public class Test { public static void main(String[] args) { int i = 1; i = i++; int ...

  4. [转帖]算法精解：DAG有向无环图

    算法精解:DAG有向无环图 https://www.cnblogs.com/Evsward/p/dag.html DAG是公认的下一代区块链的标志.本文从算法基础去研究分析DAG算法,以及它是如何运用 ...

  5. php redis扩展安装步骤

    因为redis不是php技术自带的技术,因此我们如果要通过php程序来操作redis,需要redis设计者提供对应的操作接口(函数类)我们使用phpredis.tar.gz文件在源码编译生成一个red ...

  6. ZYNQ笔记（5）：软中断实现核间通信

    ZYNQ包括一个 FPGA 和两个 ARM,多个 ARM 核心相对独立的运行不同的任务,每个核心可能运行不同的操作系统或裸机程序,但是有一个主要核心,用来控制整个系统以及其他从核心的允许.因此我们可以 ...

  7. Win 10卡顿怎么办？解决win10卡顿的方法大汇总

    最近微软开始向Windows 10用户推送创造者更新(Creators Update),相信也有很多小伙伴已经尝鲜了这一最新的版本.而对于win10的使用体验,很多小伙伴第一个抱怨的问题便是win10 ...

  8. python selenium IE Firxfor pyinstaller

    以前在python环境下selenium 主要用的是chromdriver,这次发现老是报错(Timeout), 实际又是正确的, 可能是和chrome版本不正确,再加上我程序蹦来就在windows环 ...

  9. 从nsurlsession、Alamofire到moya

    更好的理解(抽象).更少的构建(配置).更方便的表达(语言) 一.iOS系统的网络编程(DSL概念) ios缺省的网络编程只是给出了网络编程的基本概念: urlsession.request.resp ...

  10. 认清楚服务器的真正身份--深入ARP工作原理

    我们知道IP地址是ISP分配给我们的,IP不能作为服务器的唯一的身份,那么服务器真正的身份是什么呢?MAC IP地址直接的通信在底层要转换到MAC直接的通信,那他们如何通信的呢? 1.简介 出场人物: ...