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 ...
随机推荐
- 设计模式C++描述----08.原型(Prototype)模式
一. 概述 定义:用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. 换句话说,就是不用重新初始化对象,而是动态地获得对象运行时的状态. 再说明白点,就是要一个拷贝过构造函数类似功能的接 ...
- GUI编程(Tkinter) 笔记分享
Python GUI编程(Tkinter) Python 提供了多个图形开发界面的库,几个常用 Python GUI 库如下: Tkinter: Tkinter 模块(Tk 接口)是 Python 的 ...
- 基于SkyWalking的分布式跟踪系统 - 微服务监控
上一篇文章我们搭建了基于SkyWalking分布式跟踪环境,今天聊聊使用SkyWalking监控我们的微服务(DUBBO) 服务案例 假设你有个订单微服务,包含以下组件 MySQL数据库分表分库(2台 ...
- 《JavaScript设计模式与开发实践》-- 发布-订阅模式
详情个人博客:https://shengchangwei.github.io/js-shejimoshi-fabudingyue/ 发布-订阅模式 1.定义 发布-订阅模式:发布-订阅模式又叫观察者模 ...
- 在虚拟机上的关于FTP FTP访问模式（匿名）
小知识 nfs和ftp类似另外一款共享软件 用21号端口 传控制 20号端口 传数据 Windows和虚拟机之间 接下来进行实验 首先在yum资源库中下载 输入命令:yum install vsft ...
- 暑期集训20190730 取模(mod)
[题目描述] 给定一个长度为n的非负整数序列a,你需要支持以下操作: 1:给定l,r,输出a[l]+a[l+1]+…+a[r]. 2:给定l,r,x,将a[l],a[l+1],…,a[r]对x取模. ...
- 【51nod 1251】 Fox序列的数量（以及带限制插板法讲解）
为什么网上没有篇详细的题解[雾 可能各位聚聚觉得这道题太简单了吧 /kk 题意 首先题目是求满足条件的序列个数,条件为:出现次数最多的数仅有一个 分析 感谢 刚睡醒的 JZ姐姐在咱写题解忽然陷入自闭的 ...
- Linux下安装jdk8步骤
作为Java开发人员,在Linux下安装一些开发工具是必备技能,本文以安装jdk为例,详细记录了每一步的操作命令,以供参考. 下载jdk8 登录网址:http://www.oracle.com/tec ...
- 20190630A（贪心）
题目描述 约翰留下他的N只奶牛上山采木.他离开的时候,她们像往常一样悠闲地在草场里吃草.可是,当他回来的时候,他看到了一幕惨剧:牛们正躲在他的花园里,啃食着他心爱的美丽花朵!为了使接下来花朵的损失最小 ...
- Python - selenium自动化-Chrome(headless)
什么是 Headless Chrome Headless Chrome 是 Chrome 浏览器的无界面形态,可以在不打开浏览器的前提下,使用所有 Chrome 支持的特性运行你的程序.相比于现代浏览 ...