JQuery基础一_式样篇

1-3环境搭建

进入官方网站获取最新的版本 http://jquery.com/download/  ,这里需要注意 jQuery 分 2 个系列版本 1.x 与 2.x,主要的区别在于 2.x 不再兼容 IE6、7、8浏览器,这样做的目的是为了兼容移动端开发。由于减少了一些代码,使得该版本比 jQuery 1.x 更小、更快。

如果开发者比较在意老版本 IE 用户,只能使用 jQuery 1.9 及之前的版本了。我们这本课程为了兼容性问题,使用的是 1.9 版本。jQuery 每一个系列版本分为:压缩版(compressed) 与 开发版(development),我们在开发过程中使用开发版(开发版本便于代码修改及调试),项目上线发布使用压缩版(因为压缩版本体积更小,效率更快)。

jQuery是一个JavaScript脚本库,不需要特别的安装,只需要我们在页面 <head> 标签内中,通过 script 标签引入 jQuery 库即可。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <title>环境搭建</title>
</head>
<body>
    <script type="text/javascript"> alert($) </script>
</body>
</html>

------------------------------------------------------------------

1-4jQuery对象与DOM对象

对于才开始接触jQuery库的初学者,我们需要清楚认识一点:

jQuery对象与DOM对象是不一样的

可能一时半会分不清楚哪些是jQuery对象,哪些是DOM对象,下面重点介绍一下jQuery对象,以及两者相互间的转换。

通过一个简单的例子,简单区分下jQuery对象与DOM对象:

<p id=”imooc”></p>

我们要获取页面上这个id为imooc的p元素,然后给这个文本节点增加一段文字:“您好!通过慕课网学习jQuery才是最佳的途径”,并且让文字颜色变成红色。

普通处理,通过标准JavaScript处理:

var p = document.getElementById(‘imooc‘);
p.innerHTML = ‘您好!通过慕课网学习jQuery才是最佳的途径‘;
p.style.color = ‘red‘;

通过原生DOM模型提供的document.getElementById(“imooc”) 方法获取的DOM元素就是一个DOM对象,再通过innerHTML与style属性处理文本与颜色。

jQuery的处理:

var $p = $(‘#imooc‘);
$p.html(‘您好!通过慕课网学习jQuery才是最佳的途径‘).css(‘color‘,‘red‘);

通过$(‘#imooc‘)方法会得到一个$p的jQuery对象,$p是一个类数组对象。这个对象里面包含了DOM对象的信息,然后封装了很多操作方法,调用自己的方法html与css,得到的效果与标准的JavaScript处理结果是一致的。

通过标准的JavaScript操作DOM与jQuyer操作DOM的对比,我们不难发现:

  1. 通过jQuery方法包装后的对象,是一个类数组对象。它与DOM对象完全不同,唯一相似的是它们都能操作DOM。
  2. 通过jQuery处理DOM的操作,可以让开发者更专注业务逻辑的开发,而不需要我们具体知道哪个DOM节点有那些方法,也不需要关心不同浏览器的兼容性问题,我们通过jQuery提供的API进行开发,代码也会更加精短。

PS:大家这里做个大概印象就OK,后面会有深入的讲解。

------------------------------------------------------------------

1-5jQuery对象转化成DOM对象

jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。我们使用jQuery的同时也能混合JavaScript原生代码一起使用。在很多场景中,我们需要jQuery与DOM能够相互的转换,它们都是可以操作的DOM元素,jQuery是一个类数组对象,而DOM对象就是一个单独的DOM元素。

如何把jQuery对象转成DOM对象?

利用数组下标的方式读取到jQuery中的DOM对象

HTML代码

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

JavaScript代码

var $div = $(‘div‘) //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = ‘red‘ //操作dom对象的属性

用jQuery找到所有的div元素(3个),因为jQuery对象也是一个数组结构,可以通过数组下标索引找到第一个div元素,通过返回的div对象,调用它的style属性修改第一个div元素的颜色。这里需要注意的一点是,数组的索引是从0开始的,也就是第一个元素下标是0

通过jQuery自带的get()方法

jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点,get方法中提供一个元素的索引:

var $div = $(‘div‘) //jQuery对象
var div = $div.get(0) //通过get方法,转化成DOM对象
div.style.color = ‘red‘ //操作dom对象的属性

其实我们翻开源码,看看就知道了,get方法就是利用的第一种方式处理的,只是包装成一个get让开发者更直接方便的使用。

------------------------------------------------------------------

1-6DOM对象转化成jQuery对象

相比较jQuery转化成DOM,开发中更多的情况是把一个dom对象加工成jQuery对象。$(参数)是一个多功能的方法,通过传递不同的参数而产生不同的作用。

如果传递给$(DOM)函数的参数是一个DOM对象,jQuery方法会把这个DOM对象给包装成一个新的jQuery对象

通过$(dom)方法将普通的dom对象加工成jQuery对象之后,我们就可以调用jQuery的方法了

HTML代码

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

JavaScript代码

var div = document.getElementsByTagName(‘div‘); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css(‘color‘, ‘red‘); //给第一个元素设置颜色

通过getElementsByTagName获取到所有div节点的元素,结果是一个dom合集对象,不过这个对象是一个数组合集(3个div元素)。通过$(div)方法转化成jQuery对象,通过调用jQuery对象中的first与css方法查找第一个元素并且改变其颜色。

===================================================

2-1jQuery选择器之id选择器

id选择器也是基本的选择器,jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。原生语法的支持总是非常高效的,所以在操作DOM的获取上,如果能采用id的话尽然考虑用这个选择器

值得注意:

id是唯一的,每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id,将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的------------------------------------------------------------------------------------------------------------------

2-2jQuery选择器之类选择器


类选择器,顾名思义,通过class样式类名来获取节点

描述:

$( ".class" )

类选择器,相对id选择器来说,效率相对会低一点,但是优势就是可以多选

同样的jQuery在实现上,对于类选择器,如果浏览器支持,jQuery使用JavaScript的原生getElementsByClassName()函数来实现的

右边实现一个原生getElementsByClassName()函数的实现代码与jQuery实现代码的比较

我们不难发现:

jQuery除了选择上的简单,而且没有再次使用循环处理

不难想到$(".imooc").css()方法内部肯定是带了一个隐式的循环处理,所以使用jQuery选择节点,不仅仅只是选择上的简单,同时还增加很多关联的便利操作,后续我们还会慢慢的学到其他的优势。

 
 
时间: 2024-10-15 17:10:42

JQuery基础一_式样篇的相关文章

jquery 基础汇总---导图篇

最近在慕课网学习了一些jquery的基础知识,为了方便记忆,整理出来的导图 jQuery基础总共分为4个部分,分别是样式篇.事件篇.动画篇.DOM篇. 样式篇,主要介绍jQuery的基础语法,选择器以及jQuery的一些属性和样式, 选择器的简介详见:http://www.cnblogs.com/amy-1205/p/5849568.html 事件篇,主要是鼠标事件,表单事件,键盘事件,事件的绑定和解绑以及自定义事件 动画篇,学习后制作出以下效果:隐藏和显示.上卷下来.淡入淡出.也可以通过自定义

jQuery基础修炼圣典—DOM篇

一.DOM节点的创建 1.创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如果我们通过AJAX获取到数据之后然后才能确定结构的话,这种情况就需要动态的处理节点了 本文向大家介绍一下如何使用JavaScript创建div节点元素,主要包括创建div节点元素的属性和创建div节点元素的样式两大部分内容,相信本文介绍一定会让你有所收获. 先介绍下需要用到的浏览

jQuery基础修炼圣典—DOM篇(二)jQuery遍历

1.children()方法 jQuery是一个合集对象,如果想快速查找合集里面的第一级子元素,此时可以用children()方法.这里需要注意:.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈,这里可以理解为就是父亲-儿子的关系) 理解节点查找关系: <div class="div"> <ul class="son"> <li class="grandson">1

jQuery基础——DOM篇

jQuery基础--DOM篇 在javascript中如何创建节点? 创建节点(常见的:元素.属性和文本) 添加节点的一些属性 加入到文档中 流程中涉及的一点方法: 创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHTML 加入文档:appendChild 例子: document.addEventListener('click',function(){ //创建2个div元素 var rightdiv = document.cre

jQuery基础——事件篇

jQuery基础--事件篇 鼠标事件 click与dbclick事件 click方法监听用户单击操作,dbclick监听用户双击操作,这两个方法类似. dbclick与click事件不同的是: click事件触发需要以下几点: click事件其实是由mousedown与mouseup 2个动作构成,所以点击的动作只有在松手后才触发 dblclick事件触发需要以下几点: dblclick又是由2个click叠加而来的,所以dblclick事件只有在满足以下条件的情况下才能被触发 鼠标指针在元素里

jQuery基础——样式篇

jQuery基础--样式篇 jQuery 分 2 个系列版本 1.x 与 2.x,主要的区别 在于 2.x 不再兼容 IE6.7.8 为移动端而优化,由于减少了一些代码,使得该版本比 jQuery 1.x 更小且更快. 如果开发者比较在意老版本 IE 用户,只能使用 jQuery 1.9 及之前的版本了. $(document).ready 的意思是等页面的文档(document)中的节点都加载完毕后,在执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正

Jquery基础教程第二版学习记录

本文仅为个人jquery基础的学习,简单的记录以备忘. 在线手册:http://www.php100.com/manual/jquery/第一章:jquery入门基础jquery知识:jquery能做什么:为什么需要jquery. 第二章:选择符工厂函数$()css选择符属性选择符自定义选择符DOM遍历方法 第三章:事件jQuery.noConflict([extreme]):运行这个函数将变量$的控制权让渡给第一个实现它的那个库.常用方法:(包括键盘,鼠标事件)blur([[data],fn]

【jQuery基础学习】09 jQuery与前端(这章很水)

这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图片 styles文件夹用来存放css样式表 scripts文件夹用来存放js脚本 网页结构 头部:网站的品牌log,登录信息 内容:放置网站的主体内容 尾部:放置网站的其它友情链接和版权信息之类的 关于网站样式 首先写一个样式表,来包含全局的样式.定义整个网站的reset.css样式表,编写一些全局

SEO基础知识_绝密教程

<p align="center"> </p> <p>   </p> <p align="center"> 第一次接触SEO,请阅读本基础指南入门,也可以注册论坛:<a  1-1.html" target="_blank"><span style="color:black;">从一句话入门</span><span s