Scribd Logo
Upload

Welcome to Scribd!

  • Jquery Train

    Uploaded by

    zongwei feng
    9 views28 pages

    Original Title

    Jquery train

    Copyright

    © © All Rights Reserved

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as ppt, pdf, or txt
    9 views28 pages

    Jquery Train

    Uploaded by

    zongwei feng

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as ppt, pdf, or txt
    of 28

    jQuery 基础培训

    开发二组
    jQuery 介绍

    • 什么是 jQuery

    1.jQuery 是继 property 之后又一个优秀的轻量级 Js 库，压缩后的库文件只有几十


    K 大小

    2.jQuery 库开发的宗旨是写的更少，做的更多，以更少的代码实现丰富的功能。

    3.jQuery 还简化了 js 操作 Dom 的代码，并且代码的可读性也比 js 要强。

    4.jQuery 有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、
    弹出窗口等等基本前台页面上的组件都有对应插件，并且用 jQuery 插件做出来的
    效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
    jQuery 能做什么

    •jQuery 能做什么
    获取页面内容
    修改页面外观
    修改页面内容
    在页面中响应用户交互
    给页面添加动画
    无刷新获取服务端响应 (AJAX)
    提供各种工具函数
    jQuery 下载和使用

    • jQuery 下载和引用

    1. 可以从 www.jQuery.com 下载最新的 jQuery 库。 jQuery 核心库只


    有一个 JS 文件，大小为 30 几 K

    2. jQuery 目前最新版本为 1.12.4 和 2.2.4 ， 2.0 版本与 1.xx 版本功能相


    同，只是 2.0 版本不支持低版本 IE

    3. 在自己的功能引用 jQuery 只需在 Html Head 里添加


    <head>
    <script type="text/javascript" src="jquery.js"></script>
    </head>
    学习的主要内容
    •jQuery 需要学习的主要内容

    1.jQuery 核心函数
    2.jQuery 选择器
    3.Dom 操作
    4.事件及动画
    5.jQuery Ajax
    6.常用工具函数
    7.插件

    5
    基本语法
    • jQuery 基本语法
    1. jQuery 都是通过将 Dom 对象包装为 jQuery 对象后使用 jQuery 提
    供的方法功能。
    基础语法是： $(selector).action()
     美元符号定义 jQuery
     选择符（ selector ）“查询”和“查找” HTML 元素
    jQuery 的 action() 执行对元素的操作
    2. 一般在使用 jQuery 的时候所有的 jQuery 代码都位于一个 docume
    nt ready 函数中
    $(document).ready(function(){ $(function(){
    // jQuery methods go here... // jQuery methods go here...
    }); });

    以上两种方式是一样的，把代码写在文档就绪事件里这是为了
    防止文档在完全加载（就绪）之前运行 jQuery 代码。
    jQuery 核心函数

    • jQuery 的核心函数 jQuery(), 它有以下几种


    书写方式
     语法 1 ：用来选择 Dom 元素，并设定选择元素上下文可
    选
    • 接受一个字符串，其中包含了用于匹配元素集合的 CSS 选择器：
    • jQuery(selector, [context])
     语法 2
    • 使用原始 HTML 的字符串来创建 DOM 元素：
    • jQuery(html,[ownerDocument])

     语法 3
    • 绑定一个在 DOM 文档载入完成后执行的函数：
    • jQuery( callback )
    jQuery 选择器
    •jQuery 选择器
    •选择器是 jQuery 的根基，在 jQuery 中，对事件处理、遍历 DOM 和 Ajax 操作都依赖于选择器
    。 jQuery 通过 CSS 选择器来选择元素，试用 xpath 表达式过滤特定属性的元素，所以说 jQuer
    y 的选择器语法跟 CSS 有着很大的关联。
    •jQuery 中的选择器分为基本选择器，层次选择器，过滤选择器，表单选择器这四种。

    •一、基本选择器
    •基本选择器是 jQuery 中最常用的选择器 , 也是最简单的选择器 , 它通过元素 id, class 和标
    记名来查找 DOM 元素
    基本选择器
    • 改变 id 为 one 的元素的背景色为 红色
    $("#one").css("backgroundColor","red");
    • 改变元素名为 <p> 的所有元素的背景色为 # bbffaa ，
    字体颜色为红色
    $("p").css({color:"red",backgroundColor:"#bbffaa"});
    • 改变第一个 <p> 元素的背景色为红色
    $("p").eq(0).css("backgroundColor","red");
    • 改变所有 <h1> 元素和 id 为 one 的元素的背景色为
    # bbffaa
    $("h1,#one").css("backgroundColor","#bbffaa");
    • 得到 ID 为 one 元素的颜色
    $("#one").css(“color");
    层次选择器
    •层次选择器
    如果想通过 DOM 元素之间的层次关系来获取特定元
    素 , 例如后代元素 , 子元素 , 相邻元素 , 兄弟元素等 , 则
    需要使用层次选择器

    注意 : (“prev ~ div”) 选择器只能选择 “ # prev ” 元素后面


    的同辈元素 ; 而 jQuery 中的方法 siblings() 与前后位置
    无关 , 只要是同辈节点就可以选取
    过滤选择器
    •过滤选择器主要是通过特定的过滤规则来筛
    选出所需的 DOM 元素 , 该选择器都以
    “ :” 开头
    •按照不同的过滤规则 , 过滤选择器又可分为：
    • 基本过滤
    • 内容过滤
    • 可见性过滤
    • 属性过滤
    • 子元素过滤
    • 表单对过滤
    • 表单属性过滤
    基本过滤选择器
    内容过滤
    可见性过滤
    属性过滤器
    属性过滤器是以 XPATH 语法书写的

    23/6/8
    子元素过滤

    23/6/8
    表单过滤器

    23/6/8
    表单属性过滤器

    23/6/8
    jQuery 文档操作
    • jQuery DOM 操作
    • jQuery 中非常重要的部分，就是操作 DOM 的能力。
    • jQuery 提供一系列与 DOM 相关的方法，这使访问和操
    作元素和属性变得很容易。
     jQuery 的 DOM 操作主要有三部分内容
    1. jQuery 基本文档操作
    2. jQuery 属性操作
    3. jQuery CSS 操作

    23/6/8
    jQuery 基本 dom 操作

    23/6/8
    文档属性操作
    • 方法 描述
    • addClass() 向匹配的元素添加指定的类名 $("p:first").add
    Class("intro"); 。
    • attr() 设置或返回匹配元素的属性和值。
    $("img").attr("width","180");
    • hasClass() 检查匹配的元素是否拥有指定的类。
    alert($("p:first").hasClass("intro"));
    • html() 设置或返回匹配的元素集合中的 HTML 内容。
    $("p").html("Hello <b>world</b>!");
    • removeAttr() 从所有匹配的元素中移除指定的属性。
    • removeClass() 从所有匹配的元素中删除全部或者指定的
    类。
    • toggleClass() 从匹配的元素中添加或删除一个类。
    • val() 设置或返回匹配元素的值。

    23/6/8
    CSS 操作
    • css() 设置或返回匹配元素的样式属性。
    • height() 设置或返回匹配元素的高度。
    • offset() 返回第一个匹配元素相对于文档的
    位置。
    • offsetParent() 返回最近的定位祖先元素。
    • position() 返回第一个匹配元素相对于父元
    素的位置。
    • scrollTop() 设置或返回匹配元素相对滚动
    条顶部的偏移。
    • scrollLeft() 设置或返回匹配元素相对滚动
    条左侧的偏移。
    • width() 设置或返回匹配元素的宽度。
    23/6/8
    jQuery 事件及动画

    一．jQuery 事件

     页面载入事件： $(documet.ready(function{}))

     事件处理（如 :bind,trigger,unbind 等）

     事件交互（ hover,toggle 等）

     普通事件（ click,mouseover,mouseup,select 等）

    23/6/8
    jQuery 事件及动画
    二、动画效果
    • 隐藏和显示
    $("p").hide();$("p").show();
    • jQuery 切换
    $("p").toggle().fadeOut().fadeIn().fadeTo()
    • 滑动效果
    slideDown() ,slideUp(),slideToggle

    23/6/8
    jQuery Ajax
     jQuery 提供了供 AJAX 开发的丰富函数（方法）库。
    通过 jQuery AJAX ，使用 HTTP Get 和 HTTP Post
    ，您都可以从远程服务器请求 TXT 、 HTML 、 XML 或
    JSON 。
     jQuery AJAX 请求方式
    • $(selector).load(url,data,callback) 把远程数据加载到被选的元素中
    • $.ajax(options) 把远程数据加载到 XMLHttpRequest 对象中
    • $.get(url,data,callback,type) 使用 HTTP GET 来加载远程数据
    • $.post(url,data,callback,type) 使用 HTTP POST 来加载远程数据
    • $.getJSON(url,data,callback) 使用 HTTP GET 来加载远程 JSON
    数据
     参数说明
    • (url) 被加载的数据的 URL （地址）
    • (data) 发送到服务器的数据的键 / 值对象
    • (callback) 当数据被加载时，所执行的函数
    • (type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)
    • (options) 完整 AJAX 请求的所有键 / 值对选项

    23/6/8
    jQuery 自定义插件
    • jQuery 为开发插件提拱了两个方法，分别是：
    1. jQuery.fn.extend(object); 给 jQuery 对象添加方法。
    2. jQuery.extend(object); 为扩展 jQuery 类本身 . 为类添加新的方法。
     jQuery.fn.extend(object);
    • jQuery.fn.extend(object); 对 jQuery.prototype 进得扩展，就是为 jQuery 类添加“成员函数”。 jQuery 类的实例可
    以使用这个“成员函数”。

    比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便 alert 当前编辑框里的内容。可以这么做：


    $.fn.extend({
    alertWhileClick:function(){
    $(this).click(function(){
    alert($(this).val());
    });
    }

    });

    $("#input1").alertWhileClick(); // 页面上为： <input id="input1" type="text"/>

    $("#input1") 　为一个 jQuery 实例，当它调用成员方法 alertWhileClick 后，便实现了扩展，每次被点击时它会先弹出


    目前编辑里的内容。

    23/6/8
    jQuery 自定义插件
    jQuery.extend(object); 　

    为 jQuery 类添加添加类方法，可以理解为添加静态方法。如：

    $.extend({

    add:function(a,b){return a+b;}
    });
    便为　 jQuery 　添加一个为 add 　的　“静态方法”，之后便可以在引入 jQ
    uery 　的地方，使用这个方法了， $.add(3,4);

    23/6/8
    谢谢大家！
    开发二组

    You might also like