WEB-jQuery

1 jQuery概述

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.1 优势

(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函数 )
常用浏览器:谷歌浏览器、火狐浏览器、苹果浏览器、欧朋浏览器~~~~

1.2 html引入jQuery

请注意,

其完整写法为:

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

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

image.png

3 选择器

3.1 基本选择器

(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的元素

3.2 层级选择器

$("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兄弟元 素

3.3 基本过滤选择器

(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)

4 AJAX

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

jQuery 与 AJAX:
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

局部刷新:
image.png

4.1 jQuery-AJAX交互

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 参数是请求成功后所执行的函数名。
经典案例:

你可能感兴趣的:(jquery,前端)