WEB开发-带你JQuery入门学习

在学习了HTML，CSS，javaScript后，为了让脚本开发更简单，更高效，接着就来学习一下JQuery库。jQuery 是一个轻量级的“写的少，做的多”的 JavaScript 函数库。它是目前最流行的 JS 代码库，而且提供了大量的扩展，并且兼容所有的主流浏览器。

JQuery 能做什么

1.HTML 元素选取和操作

2.HTML 事件函数

3.CSS 操作

4.JS 特效和动画

5.AJAX

6.扩展工具库等等

JQuery 使用

1.官网下载 JQuery.js，在网页中

JQuery语法

使用JQuery可以选取HTML元素，并对元素进行某些操作。

语法：$(selector).action()        $：定义的JQuery；selector：查找和查询HTML的元素；action：执行的操作。

文档就绪事件

主要指在DOM加载完成之后才能进行DOM操作。

// 第一种写法 $(document).ready(function(){ // jQuery 代码块 }); // 第二种简写 $(function(){ // jQuery 代码块 });

JQuery主要操作

1.选择器

选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。

如：元素（$("p")）， id名称（$("#id")），类名称（$(".class")），当前元素（$(this)）

2.事件

事件是指当 HTML 中发生某些事件时所调用的方法。

如：点击（click），提交（submit），获得焦点（focus），失去焦点（blur），改变事件（change），滚动（scroll），鼠标悬停（hover）

$("p").click(function(){ // 点击操作 }); $("p").hover( function(){ // 光标悬停操作 }, function(){ // 光标离开操作 } ); $("dropdown").change(function(){ // 下拉框内容改变操作 });

3.元素特效

显示（show()），隐藏（hide()），向下滑动（slideDown()），向上滑动（slideUp()），动画（animate()），停止（stop()）

$("p").show(); $("p").toggle(); $("p").hide("slow",function(){ // 隐藏后的操作 });

4.遍历

根据相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达所要找的元素为止。

祖先-向上遍历（parent()，parents()，parentsUntil()）

后代-向下遍历（children()，find()）

同胞-水平遍历（siblings()，next()，nextAll()，prev()，prevAll()）

过滤-缩小检索范围（first()，last()，eq()，filter()）

5.AJAX

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。

load()：从服务器加载数据，并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback); // URL：必需，参数规定您希望加载的 URL。 // data：可选，参数规定与请求一同发送的查询字符串键/值对集合。 // callback：可选，参数是 load() 方法完成后所执行的函数名称。

get()：从指定的资源请求数据，可能返回缓存数据。

$.get(URL,callback); // URL：必需，参数规定您希望请求的 URL。 // callback：可选，参数是请求成功后所执行的函数名。

post()：向指定的资源提交要处理的数据，不会缓存数据。

$.post(URL,data,callback); // URL：必需，参数规定您希望请求的 URL。 // data：可选，参数规定连同请求发送的数据。 // callback：可选，参数是请求成功后所执行的函数名。

jQuery web前端

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。