jQuery设计思想

前面的话

在深入了解jQuery的各个细节之前，需要对jQuery的设计思想有一个大致的了解。在遇到问题时， 知道应该使用jQuery的哪一个功能，然后迅速从手册中找到具体的用法。本文将详细介绍jQuery的设计思想

选择元素

jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他javascript库的根本特点

使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素

【模拟CSS选择元素】

$(document) //选择整个文档对象
$('#myId') //选择ID为myId的网页元素
$('div.myClass') // 选择class为myClass的div元素
$('input[name=first]') // 选择name属性等于first的input元素

【特有表达式选择】

$('a:first') //选择网页中第一个a元素
$('tr:odd') //选择表格的奇数行
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
$('div:gt(2)') // 选择所有的div元素，除了前三个
$('div:animated') // 选择当前处于动画状态的div元素

【多种筛选方法】

$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').first(); //选择第1个div元素
$('div').eq(5); //选择第6个div元素

写法

【方法函数化】

在原生javascript中，赋值操作符用的比较多。而在jQuery中，多使用函数传参的方式，也就是方法函数化

//原生
window.onload = function(){};
//jQuery
$(function(){});
//原生
div.onclick = function(){};
//jQuery
div.click(function(){});
//原生
div.innerHTML = '123';
//jQuery
div.html('123');

【链式操作】

选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来

$('div').find('h3').eq(2).html('Hello');

分解开来，就是下面这样：

$('div') //找到div元素
.find('h3') //选择其中的h3元素
.eq(2) //选择第3个h3元素
.html('Hello'); //将它的内容改为Hello

这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起

jQuery还提供了.end()方法，使得结果集可以后退一步

$('div')
.find('h3')
.eq(2)
.html('Hello')
.end() //退回到选中所有的h3元素的那一步
.eq(0) //选中第一个h3元素
.html('World'); //将它的内容改为World

【取赋值合体】

操作网页元素，最常见的需求是取得它们的值，或者对它们进行赋值。jQuery使用同一个函数来完成取值(getter)和赋值(setter)，即"取值器"与"赋值器"合一。到底是取值还是赋值，由函数的参数决定

$('h1').html(); //html()没有参数，表示取出h1的值
$('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值

常见的取值和赋值函数如下

.html() 取出或设置html内容
.text() 取出或设置text内容
.attr() 取出或设置某个属性的值
.width() 取出或设置某个元素的宽度
.height() 取出或设置某个元素的高度
.val() 取出某个表单元素的值

需要注意的是，如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值

[注意].text()例外，它取出所有元素的text内容

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • jQuery设计思想完整篇

    jQuery设计思想完整篇

    jQuery是目前使用最广泛的javascript函数库. 据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库.微软公司甚至把jQuery作为他们的官方库. 对于网页开发者来说,学会jQuery是必要的.因为它让你了解业界最通用的技术,为将来学习更高级的库打下基础,并且确实可以很轻松地做出许多复杂的效果. 虽然jQuery上手简单,比其他库容易学会,但是要全面掌握,却不轻松.因为它涉及到网页开发的方方面面,提供的各种方法和内部变化有上千种之多.初学者常常感到,入门很方便

  • jQuery设计思想

    前面的话 在深入了解jQuery的各个细节之前,需要对jQuery的设计思想有一个大致的了解.在遇到问题时, 知道应该使用jQuery的哪一个功能,然后迅速从手册中找到具体的用法.本文将详细介绍jQuery的设计思想 选择元素 jQuery的基本设计思想和主要用法,就是"选择某个网页元素,然后对其进行某种操作".这是它区别于其他javascript库的根本特点 使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素 [模拟CS

  • Javascript继承机制的设计思想分享

    Javascript继承机制的设计思想分享

    我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承. 我花了很多时间,学习这个部分,还做了很多笔记.但是都属于强行记忆,无法从根本上理解. 直到昨天,我读到法国程序员Vjeux的解释,才恍然大悟,完全明白了Javascript为什么这样

  • JavaWeb框架MVC设计思想详解

    JavaWeb框架MVC设计思想详解

    Servlet:在Servlet中拼接html内容 JSP:在html中拼接java JSP+JavaBean:利用javaBean将大量的代码提取走 Servlet+JSP+JavaBean:Servlet是控制器,javabean封装数据,jsp展示数据 javaweb的经典三层结构: dao javabean servlet ==> service jsp javabean: javabean是一个遵循特定写法的java类 1.这个java类必须有一个无参的构造函数 2.属性必须私有化 3

  • php命名空间设计思想、用法与缺点分析

    本文实例讲述了php命名空间设计思想.用法与缺点.分享给大家供大家参考,具体如下: 相比C#等语言,你可以在php函数里面随意定义变量并赋值,而不用担心覆盖了全局变量,或者类变量:你也可以随意的定义类变量,而不用担心会和函数名冲突,因为变量前面都有个$. php的命名空间和全局变量.局部变量的设计思想一样,都是为了尽可能的减少命名冲突.php的命名空间可以和文件系统类似,有相对命名空间和绝对命名空间. 定义命名空间 必须是第一个语句,前面不能有任何语句,注释可以. 必须是绝对命名空间. name

  • 深入理解Java线程池从设计思想到源码解读

    深入理解Java线程池从设计思想到源码解读

    线程池:从设计思想到源码解析 前言初识线程池线程池优势线程池设计思路 深入线程池构造方法任务队列拒绝策略线程池状态初始化&容量调整&关闭 使用线程池ThreadPoolExecutorExecutors封装线程池 解读线程池execute()addWorker()Worker类runWorker()processWorkerExit() 前言 各位小伙伴儿,春节已经结束了,在此献上一篇肝了一个春节假期的迟来的拜年之作,希望读者朋友们都能有收获. 根据穆氏哲学,投入越多,收获越大.我作此文时

  • 深入了解Java线程池:从设计思想到源码解读

    深入了解Java线程池:从设计思想到源码解读

    目录 为什么需要线程池 线程池设计思路 线程池的工作机制 线程池的参数及使用 线程池的状态 提交任务 任务队列 线程工厂 拒绝策略 关闭线程池 Executors 静态工厂 合理地配置线程池 线程池的监控 源码分析 execute addWorker Worker runWorker getTask processWorkerExit 面试题 为什么需要线程池 我们知道创建线程的常用方式就是 new Thread() ,而每一次 new Thread() 都会重新创建一个线程,而线程的创建和销毁

  • Java Spring的核心与设计思想你知道吗

    Java Spring的核心与设计思想你知道吗

    目录 Spring是什么? 什么是容器? 什么是IoC? 传统程序开发 控制反转式程序开发 两种开发方式对比总结 理解SpringIoC DI概念说明 面试问题总结 总结 Spring是什么? 我们通常所说的 Spring 指的是 Spring Framework(Spring 框架),它是⼀个开源框架,有着活跃⽽庞 ⼤的社区,这就是它之所以能⻓久不衰的原因.Spring ⽀持⼴泛的应⽤场景,它可以让 Java 企业级的 应⽤程序开发起来更简单. ⽤⼀句话概括 Spring:Spring 是包含

  • MySQL架构设计思想详解

    MySQL架构设计思想详解

    目录 前言 1. MySQL整体架构 2. 连接器 3. 查询缓存 4. 分析器 5. 优化器 6. 执行器 7. 总结 前言 很多开发同学对SQL优化如数家珍,却对MySQL架构一知半解.岂不是只见树叶,不见森林,终将陷入细节中不能自拔. 今天就一块学习MySQL分层架构,深入了解MySQL底层实现原理,以及每层的作用,我们常见的SQL优化到底在哪一层做了优化? 1. MySQL整体架构 由图中可以看到MySQL架构主要分为Server层和存储引擎层. Server层又分为连接器.缓存.分析器

  • 利用jQuery设计一个简单的web音乐播放器的实例分享

    利用jQuery设计一个简单的web音乐播放器的实例分享

    一.准备数据库 首先,我们设计MYSQL数据库如下: CREATE TABLE `songs` ( `song_id` int(11) NOT NULL AUTO_INCREMENT, `url` varchar(500) NOT NULL, `artist` varchar(250) NOT NULL, `title` varchar(250) NOT NULL, PRIMARY KEY (`song_id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AU

随机推荐