01 jQuery配置、jQuery语法结构、jQuery对象与DOM对象的互相转换
配置jQuery环境
下载jQuery 官网:jquery.com
学习或开发建议选择未压缩版,便于学习,发布建议选择压缩版,便于用户极速体验(点击下载若出现的是代码页
面,Ctrl+A全选复制到 js 文件中,注意:不要让浏览器翻译代码页面,否则粘贴时编译器会显示报错)
在代码中引入jQuery文件
以上就配置成功了
jQuery语法结构
语法:
$(selector).action();
$(selector).action();这三大部分在jQuery中分别被称为工厂函数、选择器和方法
1、工厂函数 $()
在jQuery中,美元符号 “$” 等价于 jQuery, 即 $()=jQuery()。$()的作用是将DOM对象转化为jQuery对象,只有
DOM对象转化为jQuery对象后才能使用jQuery方法
2、选择器 selector
jQuery支持CSS1.0到CSS3.0规则中几乎所有的选择器,如标签选择器、类选择器、ID选择器和后代选择器等
语法:
$(selector)
ID选择器、类选择器和标签选择器的用法如下所示
$("#userName"); //获取DOM中id为userName的元素 $("div"); //获取DOM中标签名为div的元素 $(".content"); //获取DOM中class为content的元素
当然,jQuery中提供的选择器远不止以上几种,还有很多
3、方法 action()
jQuery中提供了一系列方法,在这些方法中,一类重要的方法就是事件处理方法,主要用来绑定DOM元素的
时间和事件处理方法
实例代码:
<input type="button" value="开灯" id="btn" /> <script src="js/jquery-1.6.4.js"></script> <script> $("#btn").click(function (){ alert('欢迎学习jQuery'); }); </script>
以上代码,click()就是一个单机事件,绑定了id为btn的元素上,当用户点击 “开灯" 按钮时,就会弹出一个消息框 “欢迎学习jQuery”
jQuery对象与DOM对象的互相转换
实例代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM对象与jQuery对象的互相转换</title> </head> <body> <div id="Kong"></div> <script src="../js/jquery-1.6.4.js"></script> <script> var back = document.getElementById("Kong"); //将DOM对象转为jQuery对象 $(back).css({ "width": "300px", "height": "300px", "background-color": "red" }); //将jQuery对象转为DOM对象 var obj = $(back).get(0); var obj1 = $(back)[0]; alert(obj === obj1); //返回true </script> </body> </html>
01 jQuery配置、jQuery语法结构、jQuery对象与DOM对象的互相转换的更多相关文章
- jQuery编程基础精华01(jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器)
jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...
- jQuery对象与DOM对象
jQuery对象与DOM对象是不一样的 可能一时半会分不清楚哪些是jQuery对象,哪些是DOM对象,下面重点介绍一下jQuery对象,以及两者相互间的转换. 通过一个简单的例子,简单区分下jQuer ...
- jQuery对象和dom对象的辨析和相互转化
jquery对象和dom对象总是让人感觉很难分清,其实只要做到1对两者概念有明确认识2找出不同点 A DOM 1概念 DOM对象(Document Object Model,文档对象模型)可以把htm ...
- jquery接触初级----jquery 对象和Dom对象
1. DOM 对象,每一份DOm对象(Document Object model)都可以表示成一棵树,一个基本的网页如下: <!DOCTYPE html> <html lang=&q ...
- jQuery对象与DOM对象的相互转化
jQuery是一个类数组对象,DOM对象就是一个单独的DOM元素,他们都是可以操作的DOM元素. 一.jQuery对象转化为DOM对象 有以下两种方法: 方法一:利用数组下标的方式读取jQuery中的 ...
- jQuery 对象和 DOM 对象
jQuery(DOM对象) 或者 $(DOM对象) 此函数的作用是将DOM对象,转换为jQuery的对象 DOM对象其实就是javascript的函数对象,可以用来操作所有HTML元素.比如: a标签 ...
- jQuery对象和DOM对象之间的转换
jQuery对象不能使用DOM对象的任何方法,DOM对象也不能使用jQuery对象的任何方法.在需要使用时需要对其进行转换. jQuery对象前使用"$",这不是必须的,不这么使用 ...
- 判断一个对象是jQuery对象还是DOM对象
今天调试一段代码的时候,看到其中一个变量,想知道它到底是jquery对象还是dom对象. 虽然直接console出这个对象,看它的内部可以判断出来.但是我想有没有什么更方便的方法呢. 后来我想到了一个 ...
- jQuery对象和DOM对象的区别
jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...
随机推荐
- 聊一聊Java中的各种运算符
计算机之所以叫“计算机”,其最基本用途之一就是运算,对应刚刚接触Java的小伙伴而言,熟悉并掌握Java中的各种运算符及其在表达式中的运算优先级是十分必要的. 算术运算 算术运算主要用来处理数学中的加 ...
- Java 读取properties 配置文件的几种方式
基于ClassLoder读取配置文件 Properties properties = new Properties(); // 使用ClassLoader加载properties配置文件生成对应的输入 ...
- C和C++引用传递和数组传参引用
引用传递有两种传参方式,具体可参考文章 概括地讲,就是 *声明一个形参是指针,所以需要传递指针实参,对应的函数实现也应当遵循指针的语法.这种实现思路并不针对于C或者C++,因为它们都有指针,所以都可以 ...
- 超融合与传统IT架构对比:成本价格优势有哪些
之前文章中,我们已经介绍了超融合给用户 IT 基础架构带来的各个方面的价值,其中成本只是超融合架构的优势之一.但很多用户还是会非常关心这个话题,希望能有更具体的了解,所以本文整理超融合和传统 FC S ...
- Java设计模式:23种设计模式
1. 软件设计模式概述 2. GoF 的 23 种设计模式的分类和功能 3. UML中的类图及类图之间的关系 4. 开闭原则——面向对象设计原则 5. 里氏替换原则——面向对象设计原则 6. 依赖倒置 ...
- 使用ESP8266 打造一款物联网产品---新版ESP8266-RTOS-SDK(V3.1以上)串口使用指南
问题背景: 使用乐鑫的ESP8266做一个物联网的项目,要使用串口0通信,串口1作为打印log.本来是一个非常简单的事情.没想到居然里面有个大坑.本着前任踩坑,后任抱娃的原则. 这里就做个记录,给后面 ...
- 在线热备份数据库之innobackupex 增量备份InnoDB
在线热备份数据库之innobackupex 增量备份InnoDB 什么是增量备份?其原理是什么? 增量备份是基于上一次备份后对新增加的内容进行备份,优点相较于完整备份而言备份内容少时间短,能够节省磁盘 ...
- 关于js中函数的一点总结
1函数中this作用域 this根据当前环境来决定作用域,可以使用call和apply的方法来改变当前的this指向 <script> var name = "global&qu ...
- CDQ分治(学习笔记)
离线算法——CDQ分治 CDQ (SHY)显然是一个人的名字,陈丹琪(MM)(NOI2008金牌女选手). 从归并开始(这里并没有从逆序对开始,是想直接引入分治思想,而不是引入处理对象) 一个很简单的 ...
- MyBatis --- 映射关系【一对一、一对多、多对多】,懒加载机制
映射(多.一)对一的关联关系 1)若只想得到关联对象的id属性,不用关联数据表 2)若希望得到关联对象的其他属性,要关联其数据表 举例: 员工与部门的映射关系为:多对一 1.创建表 员工表 确定其外键 ...