【最全最详细】jQuery学习笔记

一、jQuery基础

1.1 jQuery的特点

1）jQuery是一种框架，对于浏览器的兼容问题，95％不用再去考虑了。

2）jQuery利用选择器（借鉴了CSS选择器的语法）查找要操作的节点（DOM对象），然后将这些节点封装成一个jQuery对象（封装的目的有两个：①是为了兼容不同的浏览器。

②也为了简化代码）。通过调用jQuery对象的方法或者属性来实现对底层的DOM对象的操作。

3）jQuery特点简单概括就是：选择器+ 调方法。

1.2 jQuery编程的步骤

step1：引入jQuery框架（https://www.360docs.net/doc/258150709.html,下载），min为去掉所有格式的压缩版

step2：使用选择器查找要操作的节点（该节点会被封装成一个jQuery对象，并返回）var $obj=$('#di');//ID选择器，查找的节点ID为d1

step3：调用jQuery对象的方法或者属性

$obj.css('font-size','60px');//调用jQuery的css()方法

◆注意事项：jQuery是一个大的匿名函数，且内部有很多函数（类似Java中的内部类），

它的大部分函数返回对象都是jQuery对象（它自己），所以可以继续“．”，例如：

function f1(){

var $obj=$('#d1');//为了强调返回的是jQuery对象，命名习惯用$开头来声明变量

$obj.css('font-size','60px').css('font-style','italic'); } 1.3 jQuery对象与DOM对象如何相互转换

1）dom对象如何转化为jQuery对象

使用函数：$(dom对象)即可，例如：

function f2(){

var obj=document.getElementById('d1');

var $obj=$(obj);//将dom节点封装成jQuery对象

$obj.html('hello java'); } 2）jQuery对象如何转化为dom对象

方式一：$obj.get(0); 方式二：$obj.get()[0];

function f3(){

var $obj=$('#d1'); //方式一：var obj=$obj.get(0);

var obj=$obj.get()[0];//方式二obj.innerHTML='hello perl'; } 1.4如何同时使用prototype和jQuery

step1：先导入prototype.js，再导入jQuery.js

step2：将jQuery的$函数换一个名字：var $a=jQuery.noConflict();//注意大小写

◆注意事项：函数名就是一个变量，指向函数对象，例如：

function f1(){//无效var obj=$('d1'); }

//无效是因为jQuery是后引入的，所以prototype被jQuery替换

function f1(){//为了避免冲突，可以将jQuery的$函数换一个名字$a

var $a=jQuery.noConflict(); var obj=$('d1');

obj.innerHTML='hello prototype'; $a('#d1').html('hello jQuery'); } 1.5 EL表达式和jQuery函数的区别

1）${}：EL表达式，在服务器端运行（JSTL标签库也在服务器端运行，EL和JSTL标签库本质是Java代码）。

2）$()：jQuery函数，在浏览器中运行（JavaScript也在浏览器中运行）。

二、选择器

2.1什么是选择器

jQuery模仿CSS选择器的语法提供了一种用来方便查找要操作的节点的语法规则。2.2基本选择器

1）#id：ID选择器，如：$('#d1').css('color','red');//编号1变

2）.class：类选择器，如：$('.s1').css('font-size','60px');//编号2和3变

3）element：元素选择器，如：$('div').css('font-size','60px');//编号1和2变

4）selector1,selector2...selectorn：选择器合并，如：$('#d1,p').css('font-size','60px');//编号1和3变

5）*：所有选择器，如：$('*').css('font-size','60px');

6）案例：

hello jquery

hello java

hello perl

注意事项：当jQuery选择器查找到了多个DOM节点，则仍然是封装成“一个”jQuery 对象，在调用jQuery对象的属性或者方法时，默认情况下，会作用于底层所有的

DOM节点之上。如：$('.s1').css('font-size','60px');则编号2和3都变。

2.3层次选择器

1）select1 select2：所有后代（要符合select2的要求）。

例如：$('#d1 div').css('font-size','60px');//d2d3d4d5变

2）select1>select2：只考虑子节点（要符合select2的要求），孙子不管～

例如：$('#d1>div').css('font-size','60px');//d2d3d5变

3）select1+select2：下一个兄弟（要符合select2的要求），儿子不管～

例如：$('#d3+div').css('font-size','60px');//d5变，d2不管

4）select1~select2：下面所有的兄弟（要符合select2的要求），上面的兄弟不管～兄弟中的儿子也不管～

例如：$('#d2~div').css('background-color','yellow');//d3d5变

5）案例：

hello 1

web前端学习笔记

做笔记 用一些文本描述另外一些文本的语意 p标签里面只能放文本，表单，图片 对于”text-indent:2em;”属性，只能加在块元素上面，內联元素时不起作用的 内联元素不能设置height，width，margin-top，margin-bottom，padding-top，padding-bottom ie8／ie9/Firefox不能识别附加有*号的css属性语句，IE6/IE7可以识别附加有*号的css属性语句 IE7/IE8/IE9／Firefox可以识别上面附加”!important”的语句， IE6无法识别”important” Ajax Readystate 变量，此属性只读，状态用长度为4的整型表示.定义如下： 0 （未初始化） 对象已建立，但是尚未初始化（尚未调用open方法） 1 （初始化）

已调用send()方法，正在发送请求 2 （发送数据） send方法调用完成，但是当前的状态及http头未知 3 （数据传送中） 已接收部分数据，因为响应及http头不全，这时通过responseBody 和responseText获取部分数据会出现错误， 4 （完成） 数据接收完毕，此时可以通过通过responseBody和responseText获取完整的回应数据 state 服务器常用的状态码及其对应的含义如下： 200：服务器响应正常。 304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。 400：无法找到请求的资源。 401：访问资源的权限不够。 403：没有权限访问资源。 404：需要访问的资源不存在。 405：需要访问的资源被禁止。 407：访问的资源需要代理身份验证。 414：请求的URL太长。 500：服务器内部错误。

jQuery基础教程第四版 第3章学习笔记

本文由我司收集整编，推荐下载，如有疑问，请与我司联系 jQuery 基础教程第四版第3 章学习笔记 2017/08/30 114 第3 章 3.1 在页面加载后执行任务 3.1.1 代码执行的时机选择①当文档完全下载到浏览器中时，会触发window.onload 事件，意味着页面上的全部元素对于JavaScript 而言都是可以操作的。②通过(document).ready()注册的事件处理程序，则会在DOM 完全就绪并可以使用时调用。意味着所有元素对 脚本而言都是可以访问的，但是，却不意味着所有关联的文件都已经下载完毕。 3.1.2 基于一个页面执行多个脚本①.onload 属性一次只能保存对一个函数的引用，因此不能在现有的基础上再增加新行为。②每次调用(document).ready()方法时都会向内部的行为队列添加一个新函数，当页面加载完成后，所有的函数都会被执行。而且，这些函数会按照注册他们的顺序依次执行。 3.1.3 .ready()的简写形式①(document).ready()结构，实际上是基于document 这个DOM 元素构建而成的jQuery 对象上调用了.ready()方法。②(document).ready(){ //这里是代码……}); 可以简写成：$(function() { //这里是代码……} 3.1.4 向.ready()回调函数中传入参数 3.2 处理简单的事件 3.2.1 简单的样式转换器①在用户单击按钮时执行，需要引入.on()方法。通过这个方法，可以指定任何DOM 事件，并为该事件添加一 种行为。此时，事件是click。eg: (‘#switcher- large’).on(‘click’,function(){});3.2.2 启用其他按钮3.2.3 利用事件处理程序的上下 文①当触发任何事件处理程序时，关键字this 引用的都是携带相应行为的DOM 元素。通过在事件处理程序中使用(this)，可以为相应的元素创建jQuery 对象，然后就如同使用CSS 选择符找到该元素一样对它进行操作。 3.2.4 使用事件上下文进一步减少代码上下文关键字this 引用的是DOM 元素，而不是jQuery 对象，因此可以使用原生的DOM 属性来确定被单击元素的ID。 3.2.5 简写的事件 3.2.6 显示和隐藏高级特性jQuery 的toggleClass()方法，能够根据相应的类是否存在而添加或删除类。 3.3 事件传播 3.3.1 事件的旅程①事件捕获：事件首先会交给最外层的元素，接着再交给更具体的元素。

jQuery入门教程(很不错)

jQuery入门[1]－构造函数 https://www.360docs.net/doc/258150709.html,/archive/2008/03/05/1091816.html jQuery优点 ?体积小（v1.2.3 15kb） ?丰富的DOM选择器(CSS1-3 + XPath) ?跨浏览器（IE6,FF,Safari,Opera） ?链式代码 ?强大的事件、样式支持 ?强大的AJAX功能 ?易于扩展，插件丰富 jQuery的构造函数接收四种类型的参数： jQuery(expression,context) jQuery(html) jQuery(elements) jQuery(fn) 第一种根据表达式（ID，DOM元素名，CSS表达式，XPath表达式）找出文档中的元素，并组装成一个jQuery对象返回。 DEMO: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.360docs.net/doc/258150709.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">