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，在网页中<script>标签引入JQuery；
2.从CDN中载入JQuery对应版本（BootCDN，JQuery）。
<!-- 本地引入 -->
<head>
<script src="jquery-2.2.4.js"></script>
</head>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：可选，参数是请求成功后所执行的函数名。
- 点赞
- 收藏
- 关注作者
评论（0）