JQuery学习笔记

阅读量：5162 次

发布时间：2019-06-13

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

11月23日

JQuery2.x版本：production jQuery2.1.4（优化压缩后的版本，主要用于部署网站时使用）

：Development JQuery2.1.4（未压缩版本，一般网站建设使用）

：map file for JQuery 2.1.4（一般用于增强调试，不需要下载）

test01.html

$表示当前使用的是jQuery对象来操纵网页，在<script>区域中，$(document).reday是jQuery的页面加载事件，这事件是传统的window.load事件替代方法，当DOM载入就绪时，就会执行括号定义的代码。

加载的事件说明：使用jQuery的选择器选择div元素，使用函数css更改div字体；

为页面上的div元素添加click事件，当点击div时候会弹出消息框。

向HTML页面添加一个新的div元素，并关联click事件。

12月1日

jQuery选择器：

1.基本选择器：id选择器（如 $(“#divId”)） id为divId的元素

标签名称选择器（如 $(“a”)） <a>标签

CSS样式类选择器（如 $(“.bgRed”)）

多个放在一起用”,”分隔开即可。

扩展

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

12月5日

2.层次选择器：层次关系的选择规则

ancestor descendant后代选择器（常用）

$(".bgRed div")选择CSS类为bgRed的元素所有<div>

parent>child父类选择器

$(".myList>li")选择myLis类的直接子节点<li>对象

prev+next相邻选择器

$("#hibiscus+img")选择id为hibiscus后面同级别的img对象

prev～slibings 平级选择器

$("#someDiv～[title]")选择id为someDiv的对象后面的所有带有title的元素

3.过滤选择器：

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

4.jQuery事件：

jQuery 隐藏方法hide()、show()展示方法和toggle()切换方法

1.只能运用在id或class中

2.可设置时延

3.hide()和show()为单独方法，toggle()为前两者的综合

操作DOM：Document Object model(文档对象模型)

12月6日

动态创建内容：$(html)动态创建一个DOM对象

方法：append()：在被选元素的结尾插入内容。

prepend()：在被选元素的开头插入内容。

after():在被选元素之后插入内容。

before():在被选元素之前插入内容。

语法：$(“#idAppend”).click(

function(){

//追加内容

$(“#idcontent”).append(“<b>使用append添加元素</b><br/>”);

}

);

$(“#idappendTo”).click(

Function(){

//追加内容，语法与append颠倒

$(“<b>使用appendto添加元素</b></br>”).appendTo(“#idcontent”);

}

);

动态删除节点：

remove()方法：用来删除指定的DOM元素，它会将节点从DOM元素树中移除。但会返回一个指向DOM元素的引用，并不是真正的将jQuery引用的元素对象删除，可以继续通过这个引用来操作元素。

empty()方法：不会删除节点，只是清空节点中的内容，DOM元素依然保持在DOM元素树中。

12月8日

jQuery事件处理：

页面初始化语法:

$(document).ready(function(){

//页面加载事件的代码

});

注意：为了能正确使用ready事件，必须确保<body>标签中没有定义onload事件，否则不会触发ready事件。而且onload事件必须要等到所有元素下载完成后才会执行，这会影响执行的效率。

简介的语法：

$().ready(function) 或者直接写成 $(function)

切换事件：

hover方法：元素在鼠标悬停与鼠标移除的事件中进行切换。

hover方法的语法：hover([over],out)

toggle方法：可以依次调用多个制定的函数，直到最后一个函数，接着重复对这些函数轮流进行调用。

toggle语法：$(selector).toggle(function(),function(),function())

jQuery插件

下载jquery插件。

开发自己的插件。

插件方法分为两类：

1.对象级别的插件开发:指在jQuery的选择器对象上添加对象方法，值有存在一个jQuery对象的实例时，才能调用该插件。比如confirmOn插件，可以看作一个对象级别的插件。

2.类级别的插件开发：指在类级别添加静态方法，并且可以将函数置于jQuery的命名空间中，比如经典的$.ajax()、$.trim()等就是类级别插件。

开发插件注意事项：

$.fn.extend表示要创建一个对象级别的插件。

12月14日：

关于ExtJS、JQuery UI和easy UI的选择问题

首先根据你的需求，你需要这些框架具有你需要的，ExtJS、easy ui都具备你需要用到的那几款，比如messagebox、tree、grid。相比较jQuery UI的不够全面，比如grid，但是jquery有很多各种插件，包括grid,但它不在jQuery UI内。而Ext JS和easy ui最新版提供的GRID都有20种以上实现不同功能grid。

轻重比较，说ExtJS比较大，jquery较小，那只是浅显的理解。首先ExtJS是一个完整的Framework,是重量级别的，easy ui 是基于jquery库的一套UI组件库，是轻量级的，ExtJS是应用application级的，而jquery是page页面级的。当然application也是由page组成的，那就需要你自己去完成了，考虑你的需求，和使用框架的初衷，选择使用哪一种。同时ExtJs由于是重量级框架，完全风格，提供API非常完备也非常庞大，所以学习成本也想相对较大。

兼容性ExtJS兼容IE全系列浏览器和其他非IE现代浏览器，jquery UI向来不太考虑ie低版本浏览器的兼容，从态度上的鄙视。easy UI是基于jquery的，jquery2.X以上的版本不再支持IE6、7、8,，已郑重声明，请看官方网站，easyUI最新版本1.3.3使用jQuery2.0,由于又很多HTML5特性，不再支持IE6\7\8，低版本由一些小部分的兼容不够好，请自己做技术选型的时候去测试，你要使用那个版本。在兼容问题上，他们都有瑕疵，看你的接收程度。