jQuery学习笔记——样式基础

通往光的路

于 2019-01-08 16:44:31 发布

阅读量357

点赞数

分类专栏： jQuery Java Script

本文链接：https://blog.csdn.net/vikeyyyy/article/details/86083607

版权

jQuery 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

Java Script

1 篇文章 0 订阅

订阅专栏

jQuery是一套Javascript脚本库，Javascript脚本库类似于.NET的类库, 我们将一些工具方法或对象方法封装在类库中, 方便用户使用。

jQuery是脚本库, 而不是脚本框架， "库"不等于"框架", 比如"System程序集"是类库,而"ASP.NET MVC"是框架，jQuery并不能帮助我们解决脚本的引用管理和功能管理,这些都是脚本框架要做的事。脚本库能够帮助我们完成编码逻辑,实现业务功能，使用jQuery将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅, 更加健壮，网络上有丰富的jQuery插件。

jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。jQuery库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

jQuery的特点:

1.提供了强大的功能函数

使用这些功能函数, 能够帮助我们快速完成各种功能, 而且会让我们的代码异常简洁.

2.解决浏览器兼容性问题

javascript脚本在不同浏览器的兼容性一直是Web开发人员的噩梦, 常常一个页面在IE7,Firefox下运行正常, 在IE6下就出现莫名其妙的问题. 针对不同的浏览器编写不同的脚本是一件痛苦的事情. 有了jQuery我们将从这个噩梦中醒来, 比如在jQuery中的Event事件对象已经被格式化成所有浏览器通用的, 从前要根据event获取事件触发者, 在ie下是event.srcElements 而ff等标准浏览器下下是event.target. jQuery则通过统一event对象,让我们可以在所有浏览器中使用event.target获取事件对象.

3.实现丰富的UI

jQuery可以实现比如渐变弹出, 图层移动等动画效果, 让我们获得更好的用户体验。

jQuery获取和引用

下载jQuery类库，jQuery的项目下载放在了Google Code上, 下载地址:

http://code.google.com/p/jqueryjs/downloads/list

这里需要注意 jQuery 分 2 个系列版本 1.x 与 2.x，主要的区别在于 2.x 不再兼容 IE6、7、8浏览器，这样做的目的是为了兼容移动端开发。由于减少了一些代码，使得该版本比 jQuery 1.x 更小、更快。如果开发者比较在意老版本 IE 用户，只能使用 jQuery 1.9 及之前的版本了。

有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。

Development version - 用于测试和开发（未压缩，是可读的代码）

jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：

<head> 
<script src="jquery-1.10.2.min.js"></script> 
</head>

jQuery对象与DOM对象

DOM对象

DOM 全称是 Document Object Model，是文档对象模型。通过DOM元素，可以方便的操作HTML中的节点，比如获取节点的内容，添加某些元素，删除某些元素。也就是说，DOM元素和HTML息息相关，它将HTML中的一个个标签封装成DOM元素，以便于JavaScript进行操作。

<html>
    <body>
        <div id="info">
            <p>Test</p>
        </div>
    <script>
        window.onload = function(){
            document.getElementById("info").innerHTML="success";
        }
    </script>
    </body>
</html>

其中document.getElementById("info")就是将id为info的标签封装成为一个DOM元素，接下来便可以方便的操作这个DOM对象，例如修改它的文本内容等等。

jQuery对象

JQuery对象就是用JQuery包装DOM之后产生的对象。JQuery对象是JQuery独有的，可以使用JQuery的各种方法。

$("#test").html();

意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法。这段代码的作用等同于用DOM实现代码：

document.getElementById("id").innerHTML;

虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法。用#id作为选择器获取得的是jQuery对象，document.getElementById("id")得到的DOM对象，这两者并不等价。

JQuery对象与DOM对象之间互相转换

JQuery对象 -> DOM对象

两种转换方式将一个JQuery对象转换成DOM对象：[index]和.get(index);

jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。

var v1 = $("#test") ; //jQuery对象
var v2 = $v1[0]; //DOM对象

通过.get(index)方法，得到相应的DOM对象。

var v1 = $("#test"); //jQuery对象
var v2 = v1.get(0); //DOM对象

DOM对象 -> JQuery对象

对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。如$(document.getElementById("test"))

var v1=document.getElementById("test"); //DOM对象
var v2=$(v1); //jQuery对象

DOM对象转换为JQuery对象之后就可以使用JQuery的方法了。

需要再次强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。

jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()
美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素

JQuery中的“$”

$其实就是jQuery的别称。是jQuery提供的一个函数，用来将DOM元素、选择器包装成jQuery对象。

var v1 = $('#id');
var v2 = jQuery('#id');

以上两者是等同的。所以"$"其实是一个符号，$()代替了jQuery(),当然你也可以使用其他的字符来代替"$"

var jq = jQuery.noConflict();
var v1 = jq('#id'); // 等同于var v1 = $('#id');

文档就绪事件

在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){
--- jQuery functions go here ----
});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

获得未完全加载的图像的大小
试图隐藏一个不存在的元素

this的相关问题

this指代的是什么？这个应该是比较好理解的，this就是指代当前操作的DOM对象。在jQuery中，this可以用于单个对象，也可以用于多个对象。

$('btn').click(function(){
    alert(this.innerHTML);  // 单个对象，this指代当前id为btn的DOM对象
});

$('div').each(function(index){
    alert(this.innerHTML);  // 多个对象，this指代当前循环中索引为index的DOM对象 
});

jQuery中的this和$(this)有什么区别

$("div").each(function(index){
     alert($(this));  // [object Object] jQuery对象
     alert(this);    // [object HTMLDivElement] DOM对象
});

可以观察到，this指代的是DOM对象，$(this)指代的是包装当前DOM对象的jQuery对象。

通往光的路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记——样式基础

jQuery是一套Javascript脚本库，Javascript脚本库类似于.NET的类库, 我们将一些工具方法或对象方法封装在类库中, 方便用户使用。 jQuery是脚本库, 而不是脚本框架， "库"不等于"框架", 比如"System程序集"是类库,而"ASP.NET MVC"是框架，jQuery并不能帮助我们解决脚本的引用管理和功能管理,这些都是脚本框架要做...
复制链接

扫一扫