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 请求的所有键/值对选项

　　

posted @ 2012-11-26 17:31  事件轮询，回不到过去  阅读(447)  评论(0)  编辑  收藏  举报