内容简介:jQuery也就是JavaScript和查询(Query)即 辅助JavaScript开发的类库。jQuery是一个兼容多浏览器的javascript库。核心理念是 write less,do more (写得更少,做得更多)。
jquery教程
jQuery简介
jQuery也就是JavaScript和查询(Query)即 辅助JavaScript开发的类库。
jQuery是一个兼容多浏览器的javascript库。
核心理念是 write less,do more (写得更少,做得更多)。
jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多 JavaScript高手加入。
曾经,jQuery是最流行的JavaScript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery!
jQuery的优点:轻量级、强大的选择器、出色的DOM操作、可靠的事件处理机制、完善的Ajax、出色的浏览器兼容性、便捷的链式操作、丰富的插件支持、完善的文档、学习成本低、开源 等等
大多数 JavaScript 类库一般都具备的特性包括:
选择器(Selector)、DOM操作、实用函数、事件处理、Ajax等
jQuery使用
进入jQuery官网或其他平台下载jQuery文件,并且引入页面:
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
下载: http://www.jq22.com/jquery-info122
通常每个版本号有两个版本可供下载
生产版 - 用于实际的网站中,已被精简和压缩
开发版 - 用于测试和开发,未压缩,是可读的代码
注意:2.0及之后的版本,不再兼容 IE 6 7 8
也可以引入服务器上的jQuery文件
<script type=“text/javascript” src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
在jQuery库中,$ 就是jQuery的一个简写形式(别称)
例如: $(“#nan”) === jQuery(“#nan”)
当浏览器解析完DOM之后,执行ready小括号内的函数
$(document).ready( function () { …} )
可简写为:$(function () {…} )
在JQ中如何查找元素节点
$(字符串)
参数:必须css选择器形式的字符串。
JQuery_选择网页元素
1、模拟css选择元素
参考css选择器的参考手册
2、独有的表达式
3、支持多种筛选方式
JQuery的写法特点
1、方法函数化 (基本上在JQ,基本不用=号,我们都通过函数调用的方式完成一些操作)
2、链式操作
3、取值赋值一体化
JQ和JS的关系
【注】JQ是通过JS封装的,
【注】JQ中$()调用返回的是一个JQ构造函数生成的对象。JQ对象后面只能跟JQ自己的方法。
【结论】:JQ和JS可以共存,但是不能混用。
JQ常用的方法
filter 过滤
not filter的反义词
has 拥有
prev 找到当前节点兄弟节点中的上一个节点
next 找到当前节点兄弟节点中的下一个节点
find() 查找子节点
eq(下标) 通过下标获取想要的元素
index() 返回当前这个节点,在【兄弟节点】中的下标
addClass 新增class样式
removeClass 删除class样式
val 表单元素的value值
size() JQ,获取选择器获取到的元素节点的个数
each 只能被JQ对象调用,进行对于我们获取到的元素遍历
获取宽的方法
width() //width
innerWidth()//width + padding
outerWidth();//width+padding+border
outerWidth(true);//width+padding+border+margin
$("button").click(function(){ //普通获取css样式 alert($("#div1").css("width")); / //width alert("width: " + $("#div1").width()); //width + padding alert("innerWidth: " + $("#div1").innerWidth()); //width + border + padding alert("outerWidth: " + $("#div1").outerWidth()); //width + border + padding + margin alert("outerWidth: " + $("#div1").outerWidth(true)); })
获取高的方法
height();
innerHeight();
outerHeight();
outerHeight(true)
节点操作:
• insertBefore()//c插到a之前 before()//a之前插c
• insertAfter()//c插到a之后 after()//a之后插c
• appendTo()//c插到a末尾 append()//a末尾插c
• prependTo()//c插到a前面 prepend()//a前面插c
• remove()//找到节点,删除这个节点
//找到span节点,插入到div节点的前面 $("span").insertBefore($("div")).css("backgroundColor", 'red'); //div前面是span $("div").before($("span")).css("backgroundColor", 'blue'); //找到div节点,插入span节点的后面 $("div").insertAfter($("span")); //找到span节点,插入到div节点的子节点末尾 $("span").appendTo($("div")); //找到span节点,插入div节点的子节点的首位 $("span").prependTo($("div")); //找到节点,删除这个节点 $("div").remove();
JQ事件
on 绑定事件
off 取消事件绑定
【注】在JQ所有的事件绑定的方法,底层都是通过事件监听器封装。
scrollTop() 获取当前页面的滚动高度
$(document).click(function(){ alert($(window).scrollTop()); })
ev JQ兼容后的事件对象
获取鼠标坐标
ev.pageX ev.pageY 原点:整个文档的左上角,包含滚动高度的
ev.clientX ev.clientY 原点:可视窗口的左上角为原点
ev.screenX ev.screenY 原点:电脑屏幕的左上角
$(document).mousedown(function(ev){ alert(ev.clientX + ", " + ev.clientY); alert(ev.pageX + ", " + ev.pageY); alert(ev.which); alert(ev.screenX + "," + ev.screenY) })
ev.which
1、如果是在鼠标事件下 代表button
1 左键
2、滚轮
3、右键
2、如果keydown 代表是键码(不区分大小写)
3、如果keypress 代表字符码(区分大小写)
e.target JQ兼容后的触发对象
JQ兼容后的:
preventDefault 阻止默认行为
stopPropagation 阻止事件冒泡
$("a").click(function(ev){ ev.preventDefault(); ev.stopPropagation(); })
offset和position方法
offset //直接距离最左边和最上边的坐标
offset().left
offset().top
position //什么都算,计算距离第一个有定位的父节点的距离
position().left
position().top
offsetParent()//找第一个有定位的父节点,如果没有会往上层去找,直到找到html节点为止。
$(document).click(function(){ alert($("#div2").offset().left); alert($("#div2").offset().top); alert($("#div2").position().left) $("#div2").parent().css("backgroundColor", 'black'); //找到父节点 $("#div2").parents("div").css("backgroundColor", 'black'); //找到所有祖先节点 $("#div2").offsetParent().css("backgroundColor", 'black'); })
JQ的特效函数
1、从左上角收起和展开的特效
• show() 显示
$("#div2").show();
• hide() 隐藏
第一个参数:毫秒数,动画持续的时候
第二个参数:回调函数,动画结束的时候执行的
$("#div2").hide(2000, function(){ // $("#div1").html("移入完成"); // })
2、透明度的淡入淡出效果
• fadeIn() fadeOut()
• fadeTo()
第一个参数:毫秒数,动画持续的时候
第二个参数:透明度的数值 只能传入0~1的小数
第三个参数:回调函数,动画结束的时候执行的
$("#div2").fadeOut(2000, function(){ $("#div1").html("移入完成"); }) $("#div2").fadeTo(2000, 0.5, function(){ $("#div1").html("移入完成"); })
3、卷闸效果
• slideDown() slideUp()
$("#div2").slideUp(2000, function(){ $("#div1").html("移入完成"); }) $("#div2").slideUp(2000, function(){ $("#div1").html("移入完成"); })
4、animate方法
animate 动画
第一个参数:变化的css样式和目的值
第二个参数:动画持续的时间
第三个参数:运动形态 支持两种运动形态
匀速(linear) 慢块慢(默认)(swing)
第四个参数:回调函数。
【注】在JQ中实现链式运动,只需要在animate方法后面通过链式操作再跟animate方法就行了。
【注】每次调用animate的方法之前,将上一次动画stop(true)一下
delay(毫秒数) 延迟
$("#div1").hover(function(){ $("#div2").animate({ width: 300, height: "300px", }, 4000, function(){ $("#div1").html("移入完成"); }) }, function(){ $("#div2").animate({ width: 200, height: "200px", opacity: 1 }, 4000, function(){ $("#div1").html("移出完成"); }) })
JQ和JS的关系:JQ和JS可以共存,但是不能混用。
get方法可以打破上面的界限。
get() 需要传参下标 get方法可以将我们原有的JQ对象,转成对应的JS对象.
remove和detach,clone
remove
功能:删除节点
返回值:就是被删除的这个节点,并不会保留之前的行为
var node = $("#div1").remove();
detach
功能:删除节点
返回值:就是被删除的这个节点,会保留之前的行为
var node = $("#div1").detach();
clone()
clone(true) 既会克隆节点,也会克隆这个节点之前的行为
功能:克隆节点
返回值:克隆出来的新节点
var node = $("#div1").clone();
text()和ready()方法
text() 获取标签的文本(纯文本) 类似JS中innerText
获取该标签,和该标签子节点中纯文本内容
alert($("#div1").text());
ready(),当整个标签加载完毕以后就执行了
$(document).ready()
window.onload 等这个窗口上内容的加载完毕以后,再去触发这个事件
节点操作
parents(css选择器)(获取当前节点所有的祖先节点)
parent()(获取当前节点的父节点)
closest() (必须传入参数,只获取从自己开始数,第一个符合条件的元素节点,包括他自己)
siblings() 当前节点所有兄弟节点,参数也可以传入css选择器样式。
nextAll() 当前节点开始往下所有的兄弟节点
prevAll() 当前节点开始往上所有的兄弟节点
parentsUntil()
nextUntil()
prevUntil()
$("span.box").parent().css("backgroundColor","red")//获取当前节点的父节点 $("span.box").parents("div").css("backgroundColor","red")//获取当前节点所有的祖先节点 $("span").closest(".box").css("backgroundColor", 'red'); $("span").closest("div").css("backgroundColor", 'red') $("#h2").siblings("h1").css("backgroundColor", 'blue')//当前节点所有兄弟节点,参数也可以传入css选择器样式。 $("#h2").prevAll("h1").css("backgroundColor", 'blue')//当前节点开始往上所有的兄弟节点 $("#h2").nextAll("strong").css("backgroundColor", 'blue')//当前节点开始往下所有的兄弟节点 $("#h2").prevUntil("div").css("backgroundColor", 'orange');//a到c之间的元素,往上 $("#h2").nextUntil("em").css("backgroundColor", 'orange');//a到c之间的元素,往下
warp包装
wrap() 独立包装
wrapAll() 整体包装,跟着符合条件的第一个节点
wrapInner() 内联包装
unwrap() 取消包装,如果有父节点,把父节点取消掉,除body以外
$("span").wrap("<p title = 'hello' id = 'p1'></p>"); $("span").wrapAll("<p title = 'hello' id = 'p1'></p>"); $("span").wrapInner("<p title = 'hello' id = 'p1'></p>"); $("span").unwrap();
add和slice
add() 组合css选择器
slice(start, end) [start, end)
$("p").slice(2, 3).css("backgroundColor", 'orange'); $("p").add("span").add("button").click(function(){ $(this).css("backgroundColor", 'red'); })
数据串联化方法
serialize() 拼接成querystring (name1=value1&name2=value2)
serializeArray() 拼接成 外层是数组,里面的每一个数据是对象的形式
var str = $("input").serialize(); alert(str); var arr = $("input").serializeArray(); alert(arr);
事件细节
ev 就是兼容事件对象
ev.data 实现间接传入参数
ev.target(兼容后触发对象)
ev.type(输出事件类型)
$("div").click(function(ev){ alert(ev.type); }) var node = document.getElementById("btn1"); node.onclick = function(ev){ alert(ev); } $("#btn1").on("click", {username: "大牛", age: 10}, function(ev){ alert(ev.data.username); alert(ev.data.age); })
trigger
主动触发 触发官方支持的一些事件类型以外,还支持触发一些我们自定义的事件。
//希望能够执行按钮上的函数 $("#btn1").click(function(){ $("#btn1").trigger("click"); })
工具方法
JQ的方法
格式:().xxx() ().yyy();
工具方法本质上,和我们自己JS封装函数没有任何区别。
格式:.xxx() .yyy()
【注】下面这些 工具 方法可以兼容到IE6的。
• type() 类似于JS typeof(复合数据类型统一返回的是object)
var arr = new Array(); alert($.type(arr)); alert(typeof arr);
• trim() 删除字符串的首尾空格
声明成语法,ECMA5以后推出新的字符串的函数 字符串.trim();
var str = " he l lo "; alert("|" + str.trim() + "|");
• inArray()
ECMA5以后,新增了一个数组的方法 数组.indexOf();
• proxy() 功能类似于bind
• noConflict()
var num = $.noConflict();
• $.parseJSON() JSON.parse()
• makeArray() 将伪数组转成数组。 ECMA6新推 Array.from()
nodes = $.makeArray(nodes);
JQ提供了两个插件方法,通过这两个插件方法,我们可以在不修改JQ源代码的基础,给JQ新增方法
.extend() 拓展JQ工具方法 .xxx() $.yyy()
.fn.extend() 拓展JQ的对象方法 ().xxx() $().yyy();
$.extend({ show: function(){ alert("工具方法"); } }) $.fn.extend({ show: function(){ alert("JQ方法"); } }) $(function(){ $("#btn1").click(function(){ $.show(); $("#btn1").show(); }) })
JQ的ajax方法
ajax的load方法
$(selector).load(url,data,callback)
功能:将url下面的数据下载到,直接下载到的数据,填充到前面被选中元素节点的innerHTML中。
还可以通过选择器的方式,然后进行对于填充部分的数据,进行选择。
dataType 先去声明我将要下载的数据是什么数据类型
默认:自动检测,自动解析,解析判定方式,看下载数据的后缀
dataType: 值
"json" 自动将json格式字符串转成对应的数据结构
"jsonp" 自动将ajax请求,jsonp跨域
"text" 返回的数据,必定文本类型的字符串
"xml" 自动解析,返回的xml数据
【注】JQ的ajax方法可以使用dataType,指定我们的数据是什么格式
$.ajax({ url:"url", type:"get/post", dataType:"json/jsonp/text/xml/html/script", data:{}, success:function(data, textStatus, jqXHR){}, error:funciton(XMLHttpRequest, textStatus, errorThrown){}; jsonpCallback:"fn" });
以上所述就是小编给大家介绍的《jquery教程》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 立体字母建模教程【C4D教程】
- PS学习教程 PS制作字体发光效果教程
- 【C4D教程】卡通风可爱小乌龟建模教程
- 卡通风仙人掌建模教程【C4D教程】
- 3D立体字体制作教程,C4D建模教程
- 3D小乌龟制作教程,C4D建模教程
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。