背景
在现在就业的过程中, 会运用 jQuery 是你的加分项, 那么什么是 jQuery, 嗯, jQuery 是 JavaScript 的函数库, 是一种轻量级的 JavaScript 库, 写得少, 做的多, 导致 jQuery 有很多技术人员在使用它做项目.
jQuery 库包含:
html 元素的获取, HTML 元素操作, CSS 的操作, HTML 事件函数, JavaScript 特效和动画, HTML dom 的遍历和修改, Ajax,utilities.
jQuery 安装:
下载 jQuery 库, 下载地址
production version
用于实际的网站中
development version
用于测试和开发
jQuery 库是一个 JavaScript 文件
- <head>
- <script src="jquery-1.10.2.min.js">
- </script>
- </head>
JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言.
从 CDN 中载入 jQuery
- // 百度
- <head>
- <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
- </head>
- // 谷歌
- <head>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
- </head>
- // 微软
- <head>
- <script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
- </head>
jQuery 目录
jQuery 目录. PNG
jQuery 语法
基础语法:
美元符号定义 jQuery
选择符 () "查询" 和 "查找" HTML 元素
jQuery 的方法执行对元素的操作
jQuery 代码
- $(document).ready(function(){
- // 这里是 jQuery 代码
- });
- $(function(){
- // 这里是 jQuery 代码
- });
- $( function() {} );
DOM 加载完成后才可以对 DOM 进行操作, 如果文档没有完全加载之前运行函数, 会导致操作失败.
jQuery 选择器
元素选择器,#id 选择器,.class 选择器
$("p:first")
选取第一个 <p> 元素
$("ul li:first")
选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")
选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")
选取带有 href 属性的元素
$("a[target='_blank']")
选取所有 target 属性值等于 "_blank" 的 <a> 元素
jQuery 事件
jQuery 事件处理方法是 jQuery 中的核心函数.
- <script type="text/javascript">
- $(document).ready(function(){
- $("button").click(function(){
- $("p").hide();
- });});
- </script>
jQuery 名称冲突 $ 符号
jQuery 使用名为 noConflict() 方法来解决该问题
$(selector).dblclick(function)
触发或将函数绑定到被选元素的双击事件
$(selector).mouseover(function)
触发或将函数绑定到被选元素的鼠标悬停事件
jQuery 隐藏 / 显示
hide() 和 show() 方法来隐藏和显示 HTML 元素
- $("#hide").click(function(){
- $("p").hide();
- });
- $("#show").click(function(){
- $("p").show();
- });
- $(selector).hide(speed,callback);
- $(selector).show(speed,callback);
- $("button").click(function(){
- $("p").hide(1000);
- });
toggle() 方法来切换 hide() 和 show() 方法
显示被隐藏的元素, 隐藏已显示的元素
- $("button").click(function(){
- $("p").toggle();
- });
- $(selector).toggle(speed,callback);
jQuery 淡入淡出
fadeIn()
jQuery fadeIn() 用于淡入已隐藏的元素
fadeOut()
jQuery fadeOut() 方法用于淡出可见元素
fadeToggle()
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
fadeTo()
jQuery fadeTo() 方法允许渐变为给定的不透明度
- $(selector).fadeIn(speed,callback);
- $("button").click(function(){
- $("#div1").fadeIn();
- $("#div2").fadeIn("slow");
- $("#div3").fadeIn(3000);
- });
- $(selector).fadeOut(speed,callback)
- $("button").click(function(){
- $("#div1").fadeOut();
- $("#div2").fadeOut("slow");
- $("#div3").fadeOut(3000);
- });
- $(selector).fadeToggle(speed,callback);
- $("button").click(function(){
- $("#div1").fadeToggle();
- $("#div2").fadeToggle("slow");
- $("#div3").fadeToggle(3000);
- });
- $(selector).fadeTo(speed,opacity,callback);
- $("button").click(function(){
- $("#div1").fadeTo("slow",0.15);
- $("#div2").fadeTo("slow",0.4);
- $("#div3").fadeTo("slow",0.7);
- });
jQuery 滑动
slideDown()
用于向下滑动元素
slideUp()
用于向上滑动元素
slideToggle()
可以在 slideDown() 与 slideUp() 方法之间进行切换
- $(selector).slideDown(speed,callback);
- $("#flip").click(function(){
- $("#panel").slideDown();
- });
- $(selector).slideUp(speed,callback);
- $("#flip").click(function(){
- $("#panel").slideUp();
- });
- $(selector).slideToggle(speed,callback);
- $("#flip").click(function(){
- $("#panel").slideToggle();
- });
jQuery 动画
animate() 方法用于创建自定义动画
image.PNG
- $(selector).animate({params},speed,callback);
- $("button").click(function(){
- $("div").animate({left:'250px'});
- });
- $("button").click(function(){
- $("div").animate({
- left:'250px',
- opacity:'0.5',
- height:'150px',
- width:'150px'
- });
- });
- $("button").click(function(){
- $("div").animate({
- left:'250px',
- height:'+=150px',
- width:'+=150px'
- });
- });
- $("button").click(function(){
- $("div").animate({
- height:'toggle'
- });
- });
- $("button").click(function(){
- var div=$("div");
- div.animate({height:'300px',opacity:'0.4'},"slow");
- div.animate({width:'300px',opacity:'0.8'},"slow");
- div.animate({height:'100px',opacity:'0.4'},"slow");
- div.animate({width:'100px',opacity:'0.8'},"slow");
- });
jQuery 停止动画
Stop() 方法适用于所有 jQuery 效果函数
- $(selector).stop(stopAll,goToEnd);
- $("#stop").click(function(){
- $("#panel").stop();
- });
jQuery Callback 函数
- $("p").hide(1000,function(){
- alert("The paragraph is now hidden");
- });
jQuery 链
许在一条语句中运行多个 jQuery 方法
$("#p1").CSS("color","pink").slideUp(2000).slideDown(2000);
jQuery 获取和 jQuery 设置
text()-- 设置或返回所选元素的文本内容
HTML()-- 设置或返回元素的内容 (包括 HTML 标记)
val()-- 设置或返回表单字段的值
jQuery 添加元素
append()-- 在被选元素的结尾插入内容
prepend()-- 在被选元素的开头插入内容
after()-- 在被选元素之后插入内容
before()-- 在被选元素之前插入内容
jQuery 删除元素
remove()
删除被选元素 (及其子元素)
也可以接受一个参数, 允许对被删除元素进行过滤
image.PNG
empty()
从被选元素中删除子元素
image.PNG
jQuery CSS
addClass()-- 向被选元素添加一个或多个类
removeClass()-- 从被选元素删除一个或多个类
toggleClass()-- 对被选元素进行添加, 删除类的切换操作
CSS()-- 设置或返回样式属性
jQuery 尺寸
width()-- 设置或返回元素的宽度 (不包括内边距, 边框或外边距)
height()-- 设置或返回元素的高度 (不包括内边距, 边框或外边框)
innerWidth()-- 返回元素的宽度 (包括内边距)
innerHeight()-- 返回元素的高度 (包括内边距)
outerWidth()-- 返回元素的宽度 (包括内边距和边框)
outHeight()-- 返回元素的高度 (包括内边距和边框)
jQuery 遍历
//img.mukewang.com/wiki/5b20ede10169b4a203530240.jpg
jQuery 祖先
parent()
返回被选元素的直接父元素
只会向上一级对 DOM 数进行遍历
parents()
返回被选元素的所有祖先元素
所有祖先
parentsUntil()
返回介于两个给定元素之间的所有祖先元素
jQuery 后代
children()
返回被选元素的所有直接子元素
find()
返回被选元素的后代元素
jQuery 同胞
siblings()
返回被选元素的所有同胞元素
- $("h2").siblings();
- next()
返回被选元素的下一个同胞元素
nextAll()
返回被选元素的所有跟随的同胞元素
nextUntil()
返回介于两个给定参数之间的所有跟随的同胞元素
prev() prevAll() prevUntil()
返回前面的同胞元素
jQuery 过滤
first()
返回被选元素的首个元素
last()
回被选元素的最后一个元素
eq()
返回被选元素中带有指定索引号的元素
索引号从 0 开始, 因此首个元素的索引号是 0 而不是 1
Filter() 方法 Not() 方法
不匹配这个标准的元素会被从集合中删除, 匹配的元素会被返回
Not() 方法返回不匹配标准的所有元素
jQuery Ajax
Ajax 是与服务器交换数据的技术
在不重载全部页面的情况下, 实现了对部分网页的更新
Ajax = 异步 JavaScript 和 xml
Load() 方法
- $(selector).load(URL,data,callback);
- $("#div1").load("demo_test.txt");
- $("button").click(function(){
- $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
- if(statusTxt=="success")
- alert("外部内容加载成功!");
- if(statusTxt=="error")
- alert("Error:"+xhr.status+":"+xhr.statusText);
- });
- });
- $.get(URL,callback);
- $("button").click(function(){
- $.get("demo_test.asp",function(data,status){
- alert("数据:" + data + "\n 状态:" + status);
- });
- });
- $.post(URL,data,callback);
- $("button").click(function(){
- $.post("demo_test_post.asp",
- {
- name:"",
- url:"http://www..com"
- },
- function(data,status){
- alert("数据:" + data + "\ 状态:" + status);
- });
- });
jQuery noConflict() 方法
- $.noConflict();
- jQuery(document).ready(function(){
- jQuery("button").click(function(){
- jQuery("p").text("jQuery 仍在运行");
- });
- });
- var jq = $.noConflict();
- jq(document).ready(function(){
- jq("button").click(function(){
- jq("p").text("jQuery 仍在运行");
- });
- });
- $.noConflict();
- jQuery(document).ready(function($){
- $("button").click(function(){
- $("p").text("jQuery 仍在运行");
- });
- });
请点赞! 因为你的鼓励是我写作的最大动力!
官方微信公众号
吹逼交流群: 711613774
吹逼交流群
来源: http://www.jianshu.com/p/abd4555e5467