jquery教程

栏目: IT技术 · 发布时间: 4年前

内容简介: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教程》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

程序员之禅

程序员之禅

[德] Christian Grobmeier / 荣耀、朱艳 / 人民邮电出版社 / 2015-8 / 39.00元

禅是一种生活态度和生活方式。程序员是一份特别辛苦的职业,也是一个承受各种压力的群体。在物欲横流的今天,禅对于程序员有着特殊的意义和价值。 本书的作者是一名德国程序员老兵,深谙程序员的喜怒哀乐。他曾经发表了一篇题为“程序员之禅的十条法则”的博客文章,引发众多程序员热烈的讨论和强烈的共鸣。本书共10章,结合程序员日常生活和工作的方方面面,作者通过对禅的知识、理解、体验、思考和感悟,提出很多中肯的......一起来看看 《程序员之禅》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码