jQuery 是一个“写的更少,但做的更多”的轻量级 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。jQuery 很容易学习。jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数。jQuery 是一个 JavaScript 函数库。jQuery 库包含以下特性:

  •HTML 元素选取      •HTML 元素操作

  •CSS 操作          •HTML 事件函数

  •JavaScript 特效和动画  •HTML DOM 遍历和修改

  •AJAX          •Utilities

1.向页面添加jQuery 库

  1. <script src="<%: Url.Content("~/Scripts/jquery-1.4..min.js") %>" type="text/javascript"></script>
  2. <%--使用 Google CDN--%>
  3. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
  4. /jquery/1.4./jquery.min.js"></script>
  5. <%--使用 Microsoft CDN--%>
  6. <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
  7. /jquery-1.4..min.js"></script>

2.jQuery 语法

  jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。基础语法:$(selector).action(),其中美元符号$定义 jQuery选择符,(selector)“查询”和“查找” HTML 元素,action()执行对元素的操作。

  1. //实例
  2. $(this).hide() - 隐藏当前元素
  3. $("p").hide() - 隐藏所有段落
  4. $("p.test").hide() - 隐藏所有 class="test" 的段落
  5. $("#test").hide() - 隐藏所有 id="test" 的元素

  所有 jQuery 函数位于一个 document ready 函数中。这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:

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

  1. //文档就绪函数
  2. $(document).ready(function(){
  3. -- jQuery functions go here --
  4. });

3.jQuery 选择器

  jQuery 选择器允许您对元素组或单个元素进行操作。jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。选择器允许您对 HTML 元素组或单个元素进行操作。在 HTML DOM 术语中,选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

  1. //jQuery 使用 CSS 选择器来选取 HTML 元素。
  2. $("p") - 选取 <p> 元素。
  3. $("p.intro") - 选取所有 class="intro" <p> 元素。
  4. $("p#demo") - 选取 id="demo" 的第一个 <p> 元素。
  1. //jQuery 使用 XPath 表达式来选择带有给定属性的元素。
  2. $("[href]") - 选取所有带有 href 属性的元素。
  3. $("[href='#']") - 选取所有带有 href 值等于 "#" 的元素。
  4. $("[href!='#']") - 选取所有带有 href 值不等于 "#" 的元素。
  5. $("[href$='.jpg']") - 选取所有 href 值以 ".jpg" 结尾的元素。
  1. //更多的选择器实例
  2. $(this) - 当前 HTML 元素
  3. $("p") - 所有 <p> 元素
  4. $("p.intro") - 所有 class="intro" <p> 元素
  5. $(".intro") - 所有 class="intro" 的元素
  6. $("#intro") - id="intro" 的第一个元素
  7. $("ul li:first") - 每个 <ul> 的第一个 <li> 元素
  8. $("[href$='.jpg']") - 所有带有以 ".jpg" 结尾的属性值的 href 属性
  9. $("div#intro .head") - id="intro" <div> 元素中的所有 class="head" 的元素

4.jQuery 事件

  jQuery 事件处理方法是 jQuery 中的核心函数。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

  1. //实例:当按钮的点击事件被触发时会调用一个隐藏所有 <p> 元素的方法
  2. <script type="text/javascript">
  3. $(document).ready(function(){
  4. $("button").click(function(){
  5. $("p").hide();
  6. });
  7. });
  8. </script>
  1. //jQuery 事件
  2. $(document).ready(function) - 将函数绑定到文档的就绪事件(当文档完成加载时)
  3. $(selector).click(function) - 触发或将函数绑定到被选元素的点击事件
  4. $(selector).dblclick(function) - 触发或将函数绑定到被选元素的双击事件
  5. $(selector).focus(function) - 触发或将函数绑定到被选元素的获得焦点事件
  6. $(selector).mouseover(function) - 触发或将函数绑定到被选元素的鼠标悬停事件

5.jQuery HTML 操作

  1. //jQuery HTML 操作
  2. $(selector).html(content) - 改变被选元素的(内部)HTML
  3. $("p").html("jQuery");
  4. $(selector).append(content) - 向被选元素的(内部)HTML 追加内容
  5. $("p").append("jQuery")
  6. $(selector).prepend(content) - 向被选元素的(内部)HTML “预置”(Prepend)内容
  7. $("p").prepend("jQuery")
  8. $(selector).after(content) - 在被选元素之后添加 HTML
  9. $("p").after("jQuery")
  10. $(selector).before(content) - 在被选元素之前添加 HTML
  11. $("p").before("jQuery")

6.jQuery CSS 函数

  1. //jQuery CSS 函数
  2. $(selector).css(name,value) - 为匹配元素设置样式属性的值
  3. $("p").css("background-color","red");
  4. $(selector).css({properties}) - 为匹配元素设置多个样式属性
  5. $("p").css({"background-color":"red","font-size":"200%"});
  6. $(selector).css(name) - 获得第一个匹配元素的样式属性值
  7. $(this).css("background-color");
  8. $(selector).height(value) - 设置匹配元素的高度
  9. $("#id100").height("200px");
  10. $(selector).width(value) - 设置匹配元素的宽度
  11. $("#id200").width("300px");

7.jQuery AJAX 函数

  jQuery 提供了用于 AJAX 开发的丰富函数(方法)库。通过 jQuery AJAX,使用 HTTP Get 和 HTTP Post,可以从远程服务器请求 TXT、HTML、XML 或 JSON,可以直接把远程数据载入网页的被选 HTML 元素中。写的更少,做的更多。

  1. //jQuery AJAX 函数
  2. $(selector).load(url,data,callback) - 把远程数据加载到被选的元素中
  3. $.ajax(options) - 把远程数据加载到 XMLHttpRequest 对象中
  4. $.get(url,data,callback,type) - 使用 HTTP GET 来加载远程数据
  5. $.post(url,data,callback,type) - 使用 HTTP POST 来加载远程数据
  6. $.getJSON(url,data,callback) - 使用 HTTP GET 来加载远程 JSON 数据
  7. $.getScript(url,callback) - 加载并执行远程的 JavaScript 文件
  8. //(url) 被加载的数据的 URL(地址)
  9. //(data) 发送到服务器的数据的键/值对象
  10. //(callback) 当数据被加载时,所执行的函数
  11. //(options) 完整 AJAX 请求的所有键/值对选项
  12. //(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)

8.jQuery 效果

  1. //jQuery 隐藏和显示
  2. $("#hide").click(function () {
  3. $("p").hide();
  4. });
  5. $("#show").click(function () {
  6. $("p").show();
  7. });
  8.  
  9. //jQuery 切换
  10. $("button").click(function () {
  11. $("p").toggle();
  12. });
  13.  
  14. //jQuery 滑动
  15. $(".flip").click(function () {
  16. $(".panel").slideDown();
  17. });
  18. $(".flip").click(function () {
  19. $(".panel").slideUp()
  20. })
  21. $(".flip").click(function () {
  22. $(".panel").slideToggle();
  23. });
  24.  
  25. //jQuery 淡化
  26. $(selector).fadeIn(speed, callback) - 淡入被选元素
  27. $(selector).fadeOut(speed, callback) - 淡出被选元素
  28. $("button").click(function () {
  29. $("div").fadeOut();
  30. });
  31. $(selector).fadeTo(speed, opacity, callback) - 把被选元素淡出为给定的不透明度
  32. $("button").click(function () {
  33. $("div").fadeTo("slow", 0.25);
  34. });
  35. //speed 参数可以设置这些值:"slow", "fast", "normal" 或 毫秒。
  36. //callback 参数是在该函数完成之后被执行的函数名称。
  37.  
  38. //jQuery 自定义动画
  39. $(selector).animate({params},[duration],[easing],[callback]) - 对被选元素执行自定义动画
  40. animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
  41. <script type="text/javascript">
  42. $(document).ready(function(){
  43. $("#start").click(function(){
  44. $("#box").animate({height:},"slow");
  45. $("#box").animate({width:},"slow");
  46. $("#box").animate({height:},"slow");
  47. $("#box").animate({width:},"slow");
  48. });
  49. });
  50. </script>
  51. //HTML 元素默认是静态定位,且无法移动。
  52. //如需使元素可以移动,请把 CSS 的 position 设置为 relative 或 absolute。

9.jQuery 名称冲突

  1. //实例:重命名 jQuery 库
  2. <script type="text/javascript">
  3. var jq=jQuery.noConflict();
  4. jq(document).ready(function(){
  5. jq("button").click(function(){
  6. jq("p").hide();
  7. });
  8. });
  9. </script>

10.由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护:

  • 把所有 jQuery 代码置于事件处理函数中
  • 把所有事件处理函数置于文档就绪事件处理器中
  • 把 jQuery 代码置于单独的 .js 文件中
  • 如果存在名称冲突,则重命名 jQuery 库

jQuery基础【1】的更多相关文章

  1. jQuery基础课程

    环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...

  2. JQuery基础总结上

    最近在慕课网学习JQuery基础课程,发现只是跟随网站的课程学习而不去自己总结扩展的话,很难达到真正学会理解的地步. 于是先在网站上草草过了一遍课程,然后借着今天的这个时间边记录边重新整理学习一下. ...

  3. jQuery基础之选择器

    摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...

  4. jquery基础知识汇总

    jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...

  5. 【jQuery基础学习】09 jQuery与前端(这章很水)

    这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...

  6. 【jQuery基础学习】00 序

    作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...

  7. 8、网页制作Dreamweaver(jQuery基础:安装、语法)

    在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...

  8. jquery 基础汇总---导图篇

    最近在慕课网学习了一些jquery的基础知识,为了方便记忆,整理出来的导图 jQuery基础总共分为4个部分,分别是样式篇.事件篇.动画篇.DOM篇. 样式篇,主要介绍jQuery的基础语法,选择器以 ...

  9. jquery基础教程读书总结

    最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...

  10. JQuery基础学习总结

    JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...

随机推荐

  1. $(this).form("validate") 始终返回false

    onsubmit 提交前触发,返回 false 来阻止提交动作. validate 进行表单字段验证,当全部字段都有效时返回 true .该方法和 validatebox 插件一起使用. 解决:注释掉 ...

  2. testlink问题--linux环境下

    搭建testlink 时出现问题,相关解决办法: 1.Maximum Session Idle Time before Timeout 修改php.ini文件,修改成session.gc_maxlif ...

  3. mogodb查询

    Find: {$and: [ {"MethodName":"CommLogin"} ,{"CreateTime":{$gte:"2 ...

  4. TensorFlow—CNN—CIFAR数据集分类

  5. TZOJ 1545 Hurdles of 110m(01背包dp)

    描述 In the year 2008, the 29th Olympic Games will be held in Beijing. This will signify the prosperit ...

  6. Message: u'The given selector btn dropdown-toggle btn-info is either invalid or does not result in a WebElement

    html代码: <html> <head> <meta http-equiv="content-type" content="text/ht ...

  7. centos7下编译安装php-7.0.15(PHP-FPM)

    centos7下编译安装php-7.0.15(PHP-FPM) 一.下载php7源码包 http://php.net/downloads.php 如:php-7.0.15.tar.gz 二.安装所需依 ...

  8. sql小技巧——关闭自动提交,防止误操作

    set IMPLICIT_TRANSACTIONS ON--关闭自动提交on 防止误操作,除非显式提交commit后,才会真正提交到数据库中,并且可以随时回滚操作.如下: set IMPLICIT_T ...

  9. win, cmd下安装mysql(win真tm难用)

    常用命令: 修改root用户密码 update mysql.user set authentication_string=password('1234qwer') where user='root' ...

  10. db2学习笔记

    a.服务端安装 v11.1_win64_expc.zip 官网下载 b.客户端安装 Toad for DB2 Freeware 6.1 百度找找 .建数据库 create database HRA_G ...