JQuery

介绍

  jQuery是一个优秀的JavaScript框架,本质上就是对javascript的封装,它是轻量的js库(压缩后只有21K)。它是兼容各种浏览器。jQuery使用户能更方便的处理事件。实现动画效果,并且方便的为网站提供AJAX交互。

  jQuery的宗旨是------"WRITE LESS,DO MORE",也就是写更少的代码,做更多的事情。jQuery能够使用户的HTML页保持代码和
Html内容分离,也就说,不用再在HTML里面插入一堆JavaScript来调用命令。

配置

向您的页面添加 jQuery 库, jQuery 库位于单个的 JavaScript 文件中,其中包含所有 jQuery 函数。

1. jQuery就是对javascript的封装,那么我们需要去下载这个封装的文件。
    存在两份 jQuery 拷贝可供下载,一是缩小版(由 Google Closure Compiler),另一个是未压缩版(供 debugging 或 reading)。
    两份拷贝均可以从 jQuery.com下载
    jQuery minfied (23K)
    jQuery regular (154K)

2. 下载jquery-3.1.1.min.js并将该文件(文件名可以被修改)放入到项目中,通过下面的标记把 jQuery 添加到网页中:

<script type="text/javascript" src="jquery-3.1.1.min.js"></script>

请注意,这里的<script> 标签应该位于页面的 <head> 部分。 

Demo  

<html>
<head>
<title>千岛湖</title>

<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function_1());
    function function_1() {
        alert("haha");
    }
</script>

</head>

<body>
</body>
</html>

Note:记住将 jquery-3.1.1.min.js放到对应路径

库的替代

Google 和 Microsoft 对 jQuery 的支持都很好。
如果您不愿意在自己的计算机上存放 jQuery 库,那么可以从 Google or Microsoft 加载 CDN jQuery 核心文件。

使用 Google 的 CDN

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>

使用 Microsoft 的 CDN

<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>

 

JQuery的便利
JavaScript 语言,我们要想获取页面元素基本上都会使用:
document.getElmentById("");
document.getElmentsByName("");
document.getElmentsByTagName("");
在JQuery 中获取页面元素就比较简单了。主要有以下方式。
1. 元素选择器
$("span") 选取 <span> 元素
$("p.intro") 选取所有 class="intro" 的 <p> 元素
$("p#demo") 选取 id="demo" 的第一个 <p> 元素。

2.属性选择器
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

posted @ 2017-01-12 11:35  牧 天  阅读(156)  评论(0)    收藏  举报