四、JS04 初识 jQuery

四、初识 jQuery

4.1 jQuery 简介

4.1.1 jQuery 简介

  • jQuery 是一个快速,小型且功能丰富的 javaScript 函数库
  • 借助易于使用的API(可在多种浏览器中使用),使HTML文档的遍历和操作,事件处理,动画和Ajax等事情变得更加简单
  • Query是JavaScript的一个工具库,工具库就是指封装好的JavaScript函数,可以直接在程序中进行调用

4.1.2 jQuery 的用途

jQuery 是 JavaScript 的程序库之一,因此,许多使用 JavaScript 能实现的交换特效,使用 jQuery 也能够完美实现

下面简单介绍一下 jQuery 的应用场合

1、访问和操作 DOM 元素

  • 使用 jQuery 可以很方便地获取和修改页面中指定的元素
  • jQuery 提供了一套方便、快捷的方法,可以对元素进行删除、移动、复制
  • 大大提高了用户对页面的体验度

2、控制页面元素

  • 通过引入 jQuery ,程序开发人员可以很便捷地控制页面的 CSS 文件
  • jQuery 操作页面的样式可以很好地兼容各种浏览器

3、对页面事件的处理

  • 引入 jQuery 后,可以是页面的表现层与功能开发分离
  • 开发者更多地专注于程序的逻辑与功效
  • 通过事件绑定,可以很轻松地实现两者结合

4、方便地使用 jQuery 插件

  • 引入 jQuery 后,可以使用大量的 jQuery 插件来完善页面的功能和效果
  • 如 jQuery UI 插件库、Form 插件、Validate 插件库
  • 这些插件的使用极大地丰富了页面的展示效果

5、与 Ajax 技术的完美结合

  • 利用 Ajax 异步读取服务器数据的方法,极大地方便了程序的开发
  • 增强了页面的交互,提升了用户体验

4.1.3 jQuery 的优势

  • 轻量级 jQuery 单独体积较小,压缩之后,大约只有 100KB
  • 强大的选择器 jQuery 支持几乎所有的 CSS 原则器,以及 jQuery 自定义的特有选择器
  • 出色的 DOM 封装 jQuery 封装了大量常用的 DOM 操作,使开发者在编写 DOM 操作相关的程序的时候,更加得心应手
  • 可靠的事件处理机制 jQuery 的事件处理机制吸收了 JavaScript 中的事件处理函数的精华,使 jQuery 在处理事件绑定更可靠
  • 出色的浏览器兼容性 jQuery 能同时兼容 IE 6.0+、Firefox 3.6+、Safari 5.0+、Opera 和 Chrome 等多种浏览器
  • 隐式迭代 当使用 jQuery 查找到相同名称的元素后隐藏他们时,无需循环遍历每个返回的元素,它会自动操作所匹配的对象集合
  • 丰富的插件支持 jQuery 的易扩展性,吸引了来自全球的开发者来编写 jQuery的扩展插件

5.2 jQuery 语法

5.2.1 编写第一个 jQuery 程序

  • 编写程序前,需要先导入所对应的 jQuery包
  • 编写一个程序:在页面完成加载时,弹出一个对话框,显示 “Hello”
  • 示例
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出窗口特效title>
head>
<body>
<script type="text/javascript" src="../JQuery/jquery-1.12.4.js">script>\
<script type="text/javascript" >
  $(document).ready(function (){
    alert("Hello");
  });
script>
body>
html>
  • 以上 $(document).ready() 语句中的 ready() 方法类似于 JS 中的 onload() 方法
  • ready() 是jQuery中的页面载入事件,意味着在页面加载完成时,执行事件

window.onload 与 $(document).ready() 的对比

window.onload $(document).ready()
执行时机 必须等待网页中所有的内容加载完毕后
(包括图片、Flash、视频等) 才能执行
网页中所有的 DOM 文档结构绘制完毕后即刻执行,可
能与 DOM 元素关联的内容(图片、Flash、视频等)
并没有加载完毕
编写个数 同一页面不能同时编写多个
执行以下代码:
window.οnlοad=function(){
alert(“小明学习不好”);
}
window.οnlοad=function(){
alert(“小明学习不好”);
}
结果只会输出一次"小明学习不好"
同一页面能同时编写多个
执行以下代码:
$(document).ready(function(){
alert(“小明学习不好”);
});
(document).ready(function(){
alert(“小明学习不好”);
});
结果输出两次"小明学习不好"
简化写法 可以简写成
$(function(){
//执行代码
});
  • 实际开发中,通常需要在页面加载后使用 JavaScript 执行一些初始化工作
  • 一般的做法是在 $(document).ready() 方法中执行这些工作

5.2.2 jQuery 语法结构

  • jQuery 的语句主要包括三大部分:$()、document 和 ready()
  • 这三大部分在 jQuery 中分别被称为工厂函数、选择器和方法
  • 语法结构如下
$(selector).action();

1、工厂函数 $()

  • 美元符号等价于 jQuery,即 $()=jQuery()
  • $() 的作用是将 DOM 对象转化为 jQuery 对象,只有将 DOM 对象转为 jQuery 对象后,才能使用 jQuery 方法
  • 当 $() 的参数是 DOM 对象时,该对象无须使用双引号包括起来

2、选择器 selector

  • jQuery 支持 CSS 1.0 到 CSS 3.0 规则中几乎所有的选择器,如标签选择器、类选择器、ID 选择器和后代选择器
  • 使用 jQuery 选择器和 $() 工厂函数可以非常方便地获取需要操作的 DOM 元素
  • 语法格式如下
$(selector)
  • ID 选择器、标签选择器、类选择器的用法如下所示
$("#userName");			//获取 DOM 为 id 为 userName 的元素
$("div");				//获取 DOM 中所有的 div 元素
$(".content");			//获取 DOM 中 class 为 content 的元素

3、方法 action()

  • jQuery 中提供了一系列方法,在方法中,一类重要的方法就是事件处理方法
  • 主要是用来绑定 DOM 元素的事件和事件处理方法
  • 许多基础事件、如鼠标事件、键盘事件和表单事件等、都可以通过事件方法进行绑定
  • 对应的在 jQuery 中则写作 click()、mouseover() 和 mouseout() 等

jQuery 中常用的方法

方法名 描述
jQuery对象.addClass([样式名]) 向被选元素添加一个或多个类样式,样式名可以是一个,也可以多个
多个样式名需要用空格隔开
jQuery对象.css(“属性”,“属性值”); 为匹配的元素添加一个 CSS 样式
jQuery对象.css(“属性1”:“属性值1”,“属性2”:“属性值2”,…); 为匹配的元素同时这是多个 CSS 属性
jQuery对象.children(); 查找匹配的元素的所有直接的子元素
jQuery对象.siblings(); 查找除匹配的元素的所有兄弟元素
jQuery对象.next(); 返回匹配元素的下一个同辈元素
jQuery对象.show(); 显示匹配对象元素
jQuery对象.hide()); 隐藏匹配对象元素

5.2.3 jQuery 程序的代码风格

1、“$” 的使用

  • 在 jQuery 程序中,使用最多的时美元符号 “$”
  • 无论是页面元素的选择器,还是功能函数的前缀,都必须使用该符号
  • 它是 jQuery 程序的标志,即 $ 等同于 jQuery

2、链式操作

  • jQuery 代码中采用了一种链式编程模式
  • 它可以对一个对象进行多重操作,并将操作结果返回给该对象,以便于将返回结果应用于该对象的下一次操作
  • 代码示例
DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>你是人间的四月天title>
    <link rel="stylesheet" href="css/april.css">
head>
    <style>
    body,h1,h2,p,div{margin: 0; padding: 0;}
body{font-size: 14px; line-height: 28px; font-family: "΢���ź�";}
#book{
    margin: 0 auto;
    width: 800px;
    overflow: hidden;
    padding-top: 10px;
    }
img{float: left; margin-right: 10px;}
h1{font-size: 32px; line-height: 45px;}
.intro{clear: both; display: none;}
h2{line-height: 45px; background: #999999; padding-left: 15px; color: #ffffff;}
.intro p{text-indent: 2em;}
.title{
    font-size: 24px;
    color: #0000ff;
}

    style>
<body>
<div id="book">
    <img src="images/book.gif" /><h1>你是人间的四月天h1>
    <p>
        笑响亮了四面风<br/>
        轻灵在春的光艳中交舞看变<br/>
        你是一月早天的云烟<br/>
        黄昏吹着风的软<br/>
        ....<br/>
        <a href="#" class="whole">查看全部a><br/>
    p>
    <div class="intro">
        <h2>内容简介h2>
        <p>你是人间四月天是永正图书推出的“比烟花寂寞”系列之三。“比烟花寂寞”系列包括《民国女子》《爱眉小札》《你是人间四月天》《你是我眉心未完的诗》。这系列以前所未有的包装形式推出,引起读者尖叫连连。一经上市,便引发各大报纸、媒体的一致报道。
        p><p>有人崇拜她,把她当做女神、偶像;也有人放出话来,“喜欢她的女人,品行有问题;喜欢她的男人,脑子有问题。”
    p><p>她是缺乏幽娴品德的女人,她喜好与人辩论,她用诗句表达她的哀愁,她精通文理,学贯中西。她对文学和艺术,具有本能的、直接的感悟。生长富贵,命运坎坷,修养让她把热情藏在里面,热情却是她生活的支柱。
        她,就是那个万千宠爱于一身的一代才女——林徽因。
    p><p>《你是人间四月天》是林徽因的一本小说、诗歌、散文、剧本集,几乎收录了林徽因所有的经典文学作品。其散文成就颇大,虽然数量不多,但风格独特,知识性强。诗歌尤多,其诗作融人中国古典诗歌和西方唯美派的一些表现手法,每篇文章都是她灵动思绪和满腹才华的凝结。她的语言温婉淡雅,如行云流水,又如拂面的春风。可以说。她的文字拥有超越时间的魅力。笔下流露出令人惊讶的对民间百态的深谙。p>
    div>
div>
<script type="text/javascript" src="js/jquery-1.12.4.js">script>
<script type="text/javascript" >
    $(document).ready(function (){
        alert("ni");
        $("#book h1").click(function(){
            $(this).addClass("title").next().css("color","green");
        })

        $(".whole").click(function(){
            $(".intro").show();
        })
    })

script>
body>
html>
  • 由上面可以看出,在设置完 “class” 属性后,紧接着又在后面设置了下一个元素的字体颜色
  • 这就是 jQuery 强大的连缀模式

3、隐式迭代

  • 当获取多个元素时,设置元素字体时,不需要遍历所有元素,就可以直接设置元素的样式
  • 这就是隐式迭代,在 jQuery 中获取一个集合后会默认遍历内部的所有元素

5.3 DOM 对象和 jQuery 对象

5.3.1 jQuery 对象与 DOM 对象的相互转换

DOM 对象:通过 DOM 的方法获取的元素节点就是 DOM 对象及 DOM元素

jQuery 对象:通过 jQuery 包装 DOM 对象后产生的对象

DOM 对象和 jQuery 对象都由一些特有的方法

DOM 对象无法调用 jQuery 对象的方法

jQuery 对象 也无法调用 DOM 对象的方法

这就需要用到对象的相互转换了

1、将 jQuery 对象转为 DOM 对象

  • jQuery 对象类似于一个数组的对象,可以通过 [index] 的方法得到相应的 DOM 对象
  • 格式如下
var $txtName=$("#txtName");		//jQuery 对象
var txtName=$txtName[0];		//DOM 对象
  • jQuery 对象转换成 DOM 对象在实际开发中并不多见
  • 除非希望使用 DOM 对象特有的成员

2、DOM 对象转换成 jQuery 对象

  • 将 DOM 对象使用函数 $() 包装起来,就可以获得一个 jQuery 对象
  • 格式如下
var txtName=document.getElementById("txtName");		//DOM 对象
var $txtName=$(txtName);		//jQuery 对象

你可能感兴趣的:(jquery,javascript,ajax)