和jQuery的初次约会

来源：互联网发布：java compare 编辑：程序博客网时间：2024/04/30 12:06

有了前期HTML、CSS和JavaScript的基奠,再学习jQuery，似乎并没有听说的那么难，通过搭建知识网，jQuery可以说不再是什么新知识。Why?我们结合JavaScript到jQuery一点点总结分析。

1、什么是JavaScript

JavaScript，简称JS，是一种具有面向对象能力的、解释型的直译式脚本语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的Web客户端脚本语言，不需要在一个语言环境下运行，只需要支持它的浏览器即可。JavaScript的主要作用是，验证发往服务器端的数据、增加Web互动、加强用户体验度等。

2、什么是JavaScript库

JavaScript库，故名思议，即把各种常用的代码片段从HTML中分离出来，组织并放在一个js文件里进行有效地封装，组成一个包供程序调用，这个包就是JavaScript库。也就是我们所说的JQuery。

3、什么是jQuery

jQuery是一个轻量级的JavaScript函数库，以“写的更少，做的更多”为宗旨，以一行简单的标记被添加到网页中极大地简化了JavaScript 编程。换句话说，jquery是jquery是对javascript的一个扩展，封装，让javascript更好用，更简单，用更少的代码，漂亮的完成更多的功能。

了解了什么是jQuery，简单了解下 jQuery 基础语法和特性，具体应用在最后的示例中会有体现。

基础语法

$(selector).action()
"$"定义 jQuery,是应用jQuery的标识
selector（选择器）“查询”和“查找” HTML 元素
action(事件处理) 执行对元素的操作

特性

选择器
事件处理
集合操作
动态特效

jQuery的特性集合了CSS和JavaScript包含的内容，这里不再总结，具体应用在后面的示例中会有体现。

类似于CSS,jQuery也有选择器，其中每个选择器又可以通过id选择器、类选择器或者标签来获取相应的元素。

元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。
  $("p") 选取 <p> 元素。
  $("p.intro")通过类选择器，选取所有 class="intro" 的 <p> 元素。
  $(" p#demo")通过id选择器，选取所有 id="demo" 的 <p> 元素。

属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。
  $("[href]") 选取所有带有 href 属性的元素。
  $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

CSS选择器

$("p").css("background-color","red");

下面通过一个小例子来对比使用jQuery和JavaScript的实现。

使用jquer实现

<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){ $("p").click(function(){ $(this).hide(); });});</script></head><body><p>如果您点击我，我会消失。</p></body></html>

使用JavaScript实现

<!DOCTYPE html><html><head><script>function myFunction(){document.getElementById("ppp").innerHTML="";}</script></head><body><button onclick="myFunction()">点击这里</button><p id ="ppp">如果您点击我，我会消失。</p></body></html>

对比这两段代码，JQuery封装后的优点就很突出了（可能少量效果不明显，有兴趣的朋友可写个长的Demo进行比较）。用更少的代码，漂亮的完成更多的功能，这就是jQuery存在的价值体现。

0 0