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 ...
随机推荐
- Asp.Net Core中配置使用Kindeditor富文本编辑器实现图片上传和截图上传及文件管理和上传(开源代码.net core3.0)
KindEditor使用JavaScript编写,可以无缝的于Java..NET.PHP.ASP等程序接合. KindEditor非常适合在CMS.商城.论坛.博客.Wiki.电子邮件等互联网应用上使 ...
- 通俗地说逻辑回归【Logistic regression】算法(一)
在说逻辑回归前,还是得提一提他的兄弟,线性回归.在某些地方,逻辑回归算法和线性回归算法是类似的.但它和线性回归最大的不同在于,逻辑回归是作用是分类的. 还记得之前说的吗,线性回归其实就是求出一条拟合空 ...
- 题解【洛谷】CF134A
题解 CF134A [Average Numbers] 这题就是简单的模拟. 只不过要优化一下常数什么的 思路: 为了不浪费时间总是取平均数,直接用一个 S 储存总和,每次都减去 a_i 再除以 n ...
- 深度学习tensorflow实战笔记 用预训练好的VGG-16模型提取图像特征
1.首先就要下载模型结构 首先要做的就是下载训练好的模型结构和预训练好的模型,结构地址是:点击打开链接 模型结构如下: 文件test_vgg16.py可以用于提取特征.其中vgg16.npy是需要单独 ...
- mysql约束条件
约束条件 (测试markdown 编辑器专用) null 允许为空 not null 不允许为空 key 键值类型 default 设置默认类型,缺省值为NULL extra 额外设置 CREATE ...
- python学习之【第七篇】:Python中的集合及其所具有的方法
1.前言 python中的集合set与列表类似,它们最大的区别是集合内不允许出现重复元素,如果在定义时包含重复元素,会自动去重. 集合是无序的,集合中的元素必须是不可变类型.集合可以作为字典的key. ...
- 零基础Linux入门学习方法--如何做好笔记及长效知识复习记忆
“工欲善其事必先利其器”. 此次学习的0基础教材为刘遄(Liu Chuán)老师的<Linux就该这么学>.学习目的是通过RHCE认证.有关RHCE认证介绍会在认识Linux及红帽认证中记 ...
- m113
今天的比赛很有感触,所以来写一下题解: T1可以发现一些规律是:面积扩大的速度显然比周长扩大的速度快,然后就可以枚举周长来看能为成的面积,其实最优的情况一定是六边型的情况,通过手膜我们可以发现对于边长 ...
- access,trunk,hybrid端口分析
1.access 接收:当数据没有tag时打上pvidtag进入,若有则看是否与pvid相等,相等则接收,不想等则丢弃. 转发:看tag是否等于pvid,若等则去tag发送,否则不处理. 2.trun ...
- VueRouter爬坑第一篇-简单实践
VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...