JQuery ==== 极大的简化了的Javascript编程库一览

JQuery库,特性

  • 是一个javascript函数库;
  • 包含以下特性:
    • HTML元素操作,选取
    • CSS操作
    • HTML事件函数
    • Javascript特效和动画
    • HTML DOM遍历和修改
    • AJAX
    • Utilities
  • 向页面中添加jquery库:位于一个javascript文件中,包含了所有的jquery函数
    <head>
    <script type="text/javascript" src="jquery.js"></script>
    </head>
  • 实例:http://www.w3school.com.cn/tiy/t.asp?f=jquery_hide_p

JQuery语法

  • 例如,$(this).hide,$("#test").hide,$(".test").hide$("p").hide;
  • 基础语法:
    $(selector).action()
    美元符号定义jQuery,选择符selector定义查询和查找html元素,action完成对元素的操作
    $(this).hide() - 隐藏当前元素
    $("p").hide() - 隐藏所有段落
    $("p.test").hide() - 隐藏所有 class="test" 的段落
    $("#test").hide() - 隐藏所有 id="test" 的元素
  • 文档就绪函数
    $(document).ready(function{
        --- jQuery functions go here ----
    });
    
    为了防止在文档完全加载之前运行jquery代码,如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:试图隐藏一个不存在的元素,获得未完全加载的图像的大小

JQuery选择器

  • 选择器允许对元素组单个元素进行操作;
  • 元素选择器和属性选择器允许通过标签名,属性名或者内容对HTML元素进行选择;
  • 选择器允许您对 DOM 元素组或单个 DOM 节点进行操作;
  • 元素选择器
    $("p")选取<p>元素
    $("p.intro")选取所有class="intro"的<p>元素
    $("p#demo")选取 id="demo" 的第一个 <p> 元素
  • 属性选择器
    使用XPath表达式来选择带有给定属性的元素
    $("[href]")选取带有href属性的元素
    $("[href='#']") 选取所有带有 href 值等于 "#" 的元素
    $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素
    $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素
  • CSS选择器
    jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
    $("p").css("background-color","red"); 所有 p 元素的背景颜色更改为红色
  • 更多选择器实例
    $(this)    当前 HTML 元素
    $("p")    所有 <p> 元素
    $("p.intro")    所有 class="intro" 的 <p> 元素
    $(".intro")    所有 class="intro" 的元素
    $("#intro")    id="intro" 的第一个元素
    $("ul li:first")    每个 <ul> 的第一个 <li> 元素
    $("[href$='.jpg']")    所有带有以 ".jpg" 结尾的属性值的 href 属性
    $("div#intro .head")id="intro" 的 <div> 元素中的所有 class="head" 的元素

JQuery事件

  • jquery是为事件处理特别设计的;
  • 时间处理函数是指当HTML中发生某些事件的时候所调用的方法,通常放到head部分的事件处理方法中:
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){     //按钮点击事件调用一个函数
        $("p").hide();                  //该方法隐藏所有<p>元素
      });
    });
    </script>
  • jquery名称冲突:var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。
  • 结论,原则:
    • 把所有 jQuery 代码置于事件处理函数中
    • 把所有事件处理函数置于文档就绪事件处理器中
    • 把 jQuery 代码置于单独的 .js 文件中
    • 如果存在名称冲突,则重命名 jQuery 库
  • jquery事件,方法的一些例子
    Event 函数    绑定函数至
    $(document).ready(function)      将函数绑定到文档的就绪事件(当文档完成加载时)
    $(selector).click(function)      触发或将函数绑定到被选元素的点击事件
    $(selector).dblclick(function)   触发或将函数绑定到被选元素的双击事件
    $(selector).focus(function)      触发或将函数绑定到被选元素的获得焦点事件
    $(selector).mouseover(function)  触发或将函数绑定到被选元素的鼠标悬停事件

JQuery效果

  • jquery可以创建隐藏,显示,切换,滑动,以及自定义的动画效果
  • jquery效果例子
    $(selector).hide()    隐藏被选元素
    $(selector).show()    显示被选元素
    $(selector).toggle()    切换(在隐藏与显示之间)被选元素
    $(selector).slideDown()    向下滑动(显示)被选元素
    $(selector).slideUp()    向上滑动(隐藏)被选元素
    $(selector).slideToggle()    对被选元素切换向上滑动和向下滑动
    $(selector).fadeIn()    淡入被选元素
    $(selector).fadeOut()    淡出被选元素
    $(selector).fadeTo()    把被选元素淡出为给定的不透明度
    $(selector).animate()    对被选元素执行自定义动画
  • 具体例子

JQuery Callback函数

  • Callback在当前动画100%之后执行;
  • 如果希望在一个涉及动画的函数之后来执行语句,使用callback函数
    典型语法:
    $(selector).hide(speed, callback) 实在第一个hide之后操作的函数
    错误:
    $("p").hide(1000);
    alert("The paragraph is now hidden");
    正确:
    $("p").hide(1000,function(){
    alert("The paragraph is now hidden");
    });

JQuery HTML操作

  • jquery包含很多供改变和操作HTML的强大函数;
  • jquery html操作:
    $(selector).html(content)    改变被选元素的(内部)HTML
    $(selector).append(content)    向被选元素的(内部)HTML 追加内容
    $(selector).prepend(content)    向被选元素的(内部)HTML “预置”(Prepend)内容
    $(selector).after(content)    在被选元素之后添加 HTML
    $(selector).before(content)    在被选元素之前添加 HTML

JQuery CSS 函数

  • jQuery 拥有三种用于 CSS 操作的重要函数:
    • $(selector).css(name,value)
    • $(selector).css({properties})
    • $(selector).css(name)
  • css 函数:
        描述
    $(selector).css(name,value)    为匹配元素设置样式属性的值
    $(selector).css({properties})    为匹配元素设置多个样式属性
    $(selector).css(name)    获得第一个匹配元素的样式属性值
    $(selector).height(value)    设置匹配元素的高度
    $(selector).width(value)    设置匹配元素的宽度

JQuery AJAX函数

  • jquery拥有AJAX开发的丰富的函数方法库;
  • AJAX初探:AJAX = Asynchronous JavaScript and XML.AJAX 是一种创建快速动态网页的技术。AJAX 通过在后台与服务器交换少量数据的方式,允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下,对网页的一部分进行更新。
  • AJAX和Jquery : 通过jquery ajax 使用HTTP Get和HTTP Post,您都可以从远程服务器请求TXT,HTML,XML,或JSON。可以直接把远程数据载入网页的被选中的HTML元素中!
  • 写的更少,做的更多jquery和load函数是一种简单但是很强大的ajax函数,语法如下:
    $(selector).load(url,data,callback)
    请使用 selector 来定义要改变的 HTML 元素,使用 url 参数来指定数据的 web 地址。
    只有当您希望向服务器发送数据时,才需要使用 data 参数。只有当您需要在执行完毕之后触发一个函数时,您才需要使用 callback 参数。
  • Low level AJAX
  • $.ajax(options)是低级曾的语法比高级函数多许多功能,但是同时数据更难使用,option参数设置的是name|valued对,定义url数据,密码,数据类型,过滤器,字符集,超时以及错误函数
  • 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 数据
    $.getScript(url,callback)    加载并执行远程的 JavaScript 文件
    (url) 被加载的数据的 URL(地址)
    (data) 发送到服务器的数据的键/值对象
    (callback) 当数据被加载时,所执行的函数
    (type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)
    (options) 完整 AJAX 请求的所有键/值对选项

  

你可能感兴趣的:(JavaScript)