jQuery学习-白红宇

jQuery学习

阅读量：6431 次

发布时间：2019-06-23

本文共 3939 字，大约阅读时间需要 13 分钟。

jQuery

jquery.js->完整无压缩版

jquery.min.js->经过工具压缩或服务器开启gzip压缩,主要用于产品和项目

编写简单的jQuery代码

在jQuery库中,$就是jQuery的一个简写形式,例如$("#foo")和jQuery("#foo")是等价的。$.ajax和jQuery.ajax是等价的,如果没有特别说明,程序中的$都输jQuery的一个简写形式。

//这段代码类似于传统的window.onload方法        $(document).ready(function(){           alert("hello world");        });

实现一个导航栏

$(document).ready(function () {            $(".level1 > a").click(function(){            //当鼠标点击到a标签(它是class含有level1的子元素)给其加一个名为current的class,然后将紧邻其后面的元素显示出来,同时将它的父辈的同辈元素都去掉一个名为current的class                $(this).addClass("current")                        .next().show()                        .parent().siblings()                        .children("a")                        .removeClass("current")                        .next().hide();                return false;            });        });

DOM对象(Document Object Model,文档对象模型)

jQuery对象就是通过jQuery包装DOM对象后产生的对象,jQuery对象无法使用DOM对象的任何方法,DOM对象也不能使用jQuery里的方法。

jQuery对象转成DOM对象

jQuery提供了两种方法将一个jQuery对象转换成DOM对象既[index]和get(index).

var $cr = $("#cr");var cr = $cr[0];var $cr = $("#cr");var cr = $cr.get(0);DOM对象转成jQuery对象var cr = document.getElementById("cr");var $cr = $(cr);

jQuery选择器

实现列表下拉效果

jQuery选择器

基本选择器:Jquery最常用的选择器,它通过元素的ID,CLASS和标签名来查找DOM元素(每个ID名称只可以使用一次,class允许重复使用)

根据ID匹配一个元素 : $("#id")根据类名来匹配元素:   $(".id")根据标签来匹配元素:   $("p")匹配所有元素:        $("*")

层次选择器:通过DOM元素之间的层次关系来获取特定的元素

$("div span") 获取div里面所有的span元素$("div > span")选取div下元素名是span的子元素$(".one + div")选取class为one的下一个div同辈元素，可用$(".one").next("div")替代$("#two ~ div")选取id为two的元素后面所有div同辈元素可用$("#two").nextAll("div")来替代

过滤选择器:通过过滤定则来筛选出所需的DOM元素,选择器都以一个冒号(:)开头

$("div:first")选取所有DIV元素的第一个DIV元素$("div:last")选取所有的DIV元素的最后后一个DIV元素等......

内容过滤选择器

$("div:contains('我')")选取文本含有我的元素$("div:has(p)"):选取含有的元素的DIV元素

如果选择器含有特殊字符需要转义使用

jQuery的DOM操作

查找元素节点:使用jQuery选择器

查找属性节点:利用jQuery找到需要的元素后,就可以使用attr()方法来获取它的各种属性值

创建节点:使用jQuery的append()等方法来创建节点

append():向每个匹配的元素内部追加内容appendTo():将匹配的元素追加到指定的元素中prepend():向每个匹配的元素内部前置内容prependTo():同~等....

删除节点:jQuery提供了三种删除节点的方法remove(),detach(),empty()

包裹节点:如需要将某个标签包裹起来,jQuery()提供了wrap()，wrapAll()来包裹相应的节点

属性操作:

使用addClass()向标签来追加一个类,使用removeClass()从标签删除掉一个类html()用来读取某个元素的html内容text()用来读取某个元素的文本内容val()用来设置和获取元素的值

遍历节点

children():用于取得匹配元素的子元素的集合next():匹配元素后面紧邻的同辈元素prev():匹配元素前面紧邻的同辈元素siblings():用去匹配元素前后所有的同辈元素

jQuery中的事件和动画

加载DOM:window.onload方法是在网页中所有元素完全加载到浏览器之后才执行,$(document).ready()方法,在DOM就绪的时候就可以被调用。

$(function(){});$(document)也可以使用简写为$().当$()不带参数的时候,默认参数就是document因此可以简写为$().ready(function(){})

事件绑定:jQuery可以使用bind()方法来对匹配元素进行特定事务的绑定,bind(type,[,data],fn)第一个参数为事件类型eg:click,focus;第二个参数为可选参数;第三个参数用来绑定处理函数

jQuery合成事件:hover():模拟光标悬停事件,toggle()用于模拟鼠标连续单机事件

事件冒泡:事件会按照DOM层次结构像水泡一样不断向上至顶端

$('element').bind('click',function(event){	event.stopPropagation();//停止冒泡})

阻止默认行为:jQuery中提供了preventDefault()方法来组织元素的默认行为,如果同时对事件停止冒泡和默认行为,可以在事件处理返回false; 对于只需要出发一次,随后就要接触绑定的情况,jQuery提供了一种简写one()方法,当处理函数出发一次之后,立即被删除。

jQuery的动画:

$('element').show(1000),show()方法和hide()方法在不带任何参数的情况下相当于css("display","none/block/inline");当使用show()或者hide()方法可以为其指定一个速度fadeIn(),fadeOut()方法改变元素的不透明度自定义动画:animate()

jQuery对表单的操作

对checkbox的操作全选/全不选

$("#checkNo").click(function(){  $('[name=items]:checkbox'). attr('checked',false);            });            $("#checkRev").click(function(){               $('[name=items]:checkbox').           each(function(){                  this.checked!=this.checked;               });            });            $("#send").click(function () {                var str="";              $('[name=items]:checkbox:checked')                .each(function(){                   str += $(this).val();                });                alert(str);            })

....很多不详细列举