关于jquery:WEBjQuery

8次阅读

共计 3179 个字符，预计需要花费 8 分钟才能阅读完成。

jQuery 是一个疾速、简洁的 JavaScript 框架。jQuery 设计的主旨是“write Less，Do More”，即提倡写更少的代码，做更多的事件。它封装 JavaScript 罕用的性能代码，提供一种简便的 JavaScript 设计模式，优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。
jQuery 的外围个性能够总结为：具备独特的链式语法和短小清晰的多功能接口；具备高效灵便的 css 选择器，并且可对 CSS 选择器进行扩大；领有便捷的插件扩大机制和丰盛的插件。jQuery 兼容各种支流浏览器，如 IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+ 等。

(1) 能够极大的简化 JS 代码

JavaScript 形式：

var ele = document.getElementsByTagName("p");            // 标签
var ele = document.getElementsByClassName("info");        // 款式
var ele = document.getElementById("name");                //id 属性

jQuery 选择器的三种形式：

var ele = $("p");                        // 拜访标签
var ele = $(".info");                    // 拜访 css 的 class 款式
var ele = $("#name");                    // 拜访 id 属性

(2) 能够像 CSS 选择器一样获取 html 元素
css 中获取所有的 div, 给 div 增加款式:

div{css 属性。。。}

jQuery 中获取所有 div, 给 div 增加边框款式:

$("div").css("border", "2px solid red");

(3) 能够通过批改 css 属性管制页面的成果
(4) 能够兼容罕用的浏览器
比方: JS 中的 innerText 属性、removeNode()函数、replaceNode()函数这些函数在某些浏览器中是无奈应用的。
jQuery 中提供了相应的函数（text 函数、remove 函数、replaceWith 函数）
罕用浏览器：谷歌浏览器、火狐浏览器、苹果浏览器、欧朋浏览器~~~~

<script type="text/javascript" src="jquery.min.js"></script>

请留神，<script> 标签应该位于页面的 <head> 局部。

Query 提供的文档就绪事件函数（简写模式）：

<script> 
$(function(){// 在浏览器加载残缺个 html 网页后立刻执行}); 
</script>

其残缺写法为：

<script>
$(document).ready(function(){// 在浏览器加载残缺个 html 网页后立刻执行});
</script>

按钮的点击事件被触发时：

$("button").click(function() {..some code...} )

(1)元素名选择器 
$("div") -- 选中所有的 div 元素 
$("span") -- 选中所有的 span 元素 

(2)class/ 类选择器 
$(".s1") -- 选中所有 class 值为 s1 的元素(class 值为 s1 的元素可能是任何元素) 
$("span.s1") -- 选中所有 class 值为 s1 的 span 元素 

(3)id 选择器 
$("#one") -- 选中 id 为 one 的元素 

(4)多元素选择器 
$("div,span,.s1,#one") -- 选中所有的 div 元素, 以及所有的 span 元素, 以及所 有 class 值为 s1 的元素, 以及 id 为 one 的元素

$("div span") -- 选中所有 div 外部的所有 span 元素 
$("#one span") -- 选中 id 为 one 的元素外部的所有 span 元素 $("#two+span") -- 选中 id 为 two 的元素前面紧邻的 span 兄弟元素 $("#two").next("span") -- 选中 id 为 two 的元素前面紧邻的 span 兄弟元素 
$("#two").prev("span") -- 选中 id 为 two 的元素后面紧邻的 span 兄弟元素 
$("#two~span") -- 选中 id 为 two 的元素前面所有的 span 兄弟元素 $("#two").nextAll("span") -- 选中 id 为 two 的元素前面所有的 span 兄弟元素 
$("#two").prevAll("span") -- 选中 id 为 two 的元素后面所有的 span 兄弟元素 
$("#two").siblings("span") -- 选中 id 为 two 的元素前、后所有的 span 兄弟元 素

(1) 选中第一个 div 元素 
$("div:first") 
$("div:eq(0)") 
$("div").eq(0) 

(2) 选中最初一个 div 元素 
$("div:last") 
$("div:eq(-1)") 
$("div").eq(-1) 

(3) 选中第 n + 1 个 div 元素(n 从零开始) 
$("div:eq(n)") 
$("div").eq(n)

AJAX 概述：
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的状况下，AJAX 通过后盾加载数据，并在网页上进行显示，实现部分刷新。
应用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

jQuery 与 AJAX：
jQuery 提供多个与 AJAX 无关的办法。
通过 jQuery AJAX 办法，您可能应用 HTTP Get 和 HTTP Post 从近程服务器上申请文本、HTML、XML 或 JSON – 同时您可能把这些内部数据间接载入网页的被选元素中。

部分刷新：

jQuery load() 办法：

$(selector).load(URL,data,callback);

必须的 URL 参数规定您心愿加载的 URL。
可选的 data 参数规定与申请一起发送的查问字符串键 / 值对汇合。
可选的 callback 参数是 load() 办法实现后所执行的函数名称。

jQuery $.get() 办法：
$.get() 办法通过 HTTP GET 申请从服务器上申请数据。

$.get(URL,callback);

必须的 URL 参数规定您心愿申请的 URL。
可选的 callback 参数是申请胜利后所执行的函数名。

jQuery $.post() 办法：
$.post() 办法通过 HTTP POST 申请从服务器上申请数据。

$.post(_URL_,_data_,_callback_);

必须的 URL 参数规定您心愿申请的 URL。
可选的 data 参数规定连同申请发送的数据。
可选的 callback 参数是申请胜利后所执行的函数名。
经典案例：

<script>
    $(document).ready(function() {
        $.ajax({
            type: "POST",
            url: "https://p.3.cn/prices/mgets",
            contentType: "application/json;charset=utf-8",
            data: {        // 拼接的参数
                "skuIds": "J_100003717483"
            },
            dataType: "jsonp",
            success: function(data) {    // 返回的后果            
                $('#rtnData').text("返回数据：" + JSON.stringify(data));
                $('#itemId').text("商品编号：" + data[0].id);
                $('#itemPrice').html("商品价格：<span style='color:red'>" + data[0].p +"</span>");
            },
            error: function(data) {alert("提交失败" + JSON.stringify(data));
            }
        });
    });
</script>

正文完