文档章节

Jquery自学笔记

惟爱你
 惟爱你
发布于 2014/06/28 16:29
字数 900
阅读 39
收藏 0

Jquery自学笔记

                                                                            

第一章 Jquery介绍

获取输入框内容

1、获取输入值:

第一种:

F:\12.Javascript学习之路\Jquery学习\demo01.html

 

第二种:

F:\12.Javascript学习之路\Jquery学习\demo02.html

 

第三种:

F:\12.Javascript学习之路\Jquery学习\demo03.html

 

第四种:

F:\12.Javascript学习之路\Jquery学习\demo04.html

 

 

添加样式

1、为有id的添加css,例如:

2. 移除CSS

 

3、添加CSS

 

第二章 Jquery选择器

参考书籍:F:\4.文档书籍\ jQuery1.10.3_20131214.chm

第一节、Jquery选择器介绍

第二节、基本选择器

ID选择器:$("#a1").css("background-color","red");

Class选择器:$(".c1").css("background-color","red");

标签选择器:$("a").css("background-color","red");

F:\12.Javascript学习之路\Jquery学习\demo05.html

 

第一节、属性选择器

$("[href]").css("background-color","red");

         $("[href='#']").css("background-color","red");

         $("[href$='com']").css("background-color","red");

                  

        

         F:\12.Javascript学习之路\Jquery学习\demo05.html

 

第一节、其他选择器

         $("p.c1").css("background-color","red");

         $("ulli:first").css("background-color","red");

         $("ulli:last").css("background-color","red");

 

F:\12.Javascript学习之路\Jquery学习\demo05.html

 

第三章 Jquery操作Dom

第一节:Jquery操作DOM节点

1,  查找节点

var li2 =$("ul li:eq(1)");  //变成Jquery对象

 

2,  创建节点 append()

var li3 = $("<li title='这是易明'>易明</li>");//创建Jquey对象

var li4 = $("<li title='这是XiaoMAo'>Xiaomaoguai</li>");

$("ul").append(li3);              //加到无序列表最后面

li4.insertAfter($("ulli:eq(0)"));     //插入到一个Jquery对象之后

3,删除节点 remove()

第二节:Jquery操作DOM节点属性

1,查找属性

语法:Jquery对象.attr(属性名称);

alert($("ulli:eq(1)").attr("title"));

3,  设置属性

语法:Jquery对象.attr(属性名称,属性内容);

$("ul li:eq(1)").attr("title","你懂得");

4,  删除属性

语法:Jquery对象.removeAttr(属性名称);

第三节:Jquery操作DOM节点样式

1,  获取样式

语法:类似属性 :Jquery对象.attr(“class”)

$(“ul li:eq(1)”).attr(“class”);

2,  设置样式

语法:Jquery对象.attr(“class”,样式)

3,  追加样式

$("ulli:eq(0)").attr("class","lc2");  //添加样式

$("ulli:eq(1)").addClass("lc3");  //追加,可以有多个样式

4,  移除样式

$("ul li:eq(1)").removeAttr("class");//方法一 :移除所有的样式

$("ul li:eq(1)").removeClass("lc");//方法二:移除指定样式

 

F:\12.Javascript学习之路\Jquery学习\demo07.html

 

第四节:设置和获取HTML,文本和值

1,获取 html,设置 html

 

 

2,获取文本,设置文本

 

 

3,获取值,设置值

 

 

第五节:遍历节点操作

1,获取所有子节点 children()

2,获取邻近的下一个兄弟节点 next()

3,获取邻近的上一个兄弟节点 prev()

 

第六节:Jquery操作DOM节点CSS

1,获取 DOM 节点 CSS 样式

5,  设置 DOM 节点 CSS 样式

 

 

 

 

第四章 Jquery事件操作

第一节:文档加载事件

$(function(){});

$(document).ready(function(){});

第二节:DOM单击、双击事件

第三节:DOM获得焦点、失去焦点事件

第四节:DOM鼠标移入,移出事件

第五章 Jquery动画效果

第一节:Jquery隐藏与显示DOM

 

第二节:Jquery淡入和淡出DOM

 

第三节:Jquery滑动DOM

 

第四节:Jquery动画

 

第五节:Jquery callBack回调方法

 

第六节:Jquery暂停动画

 

 

 

第六章 Jquery Ajax

第一节:Jquery Ajax简介

Jquery Ajax 操作封装了一套跨浏览器,方便用户使用的 Api

第二节:Jquery Ajax Load方法

远程请求,把请求的数据载入到 DOM 里;

load( url , [,data] , [,callback])

Url:请求地址

Data:请求参数

Callback:请求完成后的回调方法

 

第三节:jquery Ajax Get/Post方法

 

Ajax 请求后台;

$.post(URL,data,callback);

Url:请求地址

Data:请求参数

Callback:请求完成后的回调方法



来自为知笔记(Wiz)



© 著作权归作者所有

共有 人打赏支持
惟爱你
粉丝 1
博文 29
码字总数 28833
作品 0
武汉
程序员
jQuery对象与dom对象的转换(转)

最近在闲暇时间用jQuery搞了一个多文件上传的东东,顺便写点笔记。 一直以来对于通过jQuery方式获取的对象使不能直接使用JavaScript的一些方法的,开始的时候不理解,现在此案知道,原来jQu...

想个昵称
2011/02/25
0
0
五种方法解决Magento中jQuery和Prototype兼容性

Magento的发布版本里的JS大多是用Prototype写的,如果需要引入jQuery的话,可能有些变量会冲突,所以需要做些处理来处理jQuery和Prototype的兼容性。 第一种情况:先加载Prototype,再加载j...

PHPUI
2012/04/27
0
0
jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge
05/17
0
0
JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒
05/10
0
0
五种方法解决jQuery和Prototype兼容性

第一种情况:先加载Prototype,再加载jQuery 方法一:jQuery 库和它的所有插件都是在jQuery名字空间内的,包括全局变量也是保存在jQuery 名字空间内的。 使用jQuery.noConflict();主要作用是...

zhengguogaun
2013/06/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Docker学习笔记

Docker Resources All In One Docker 学习资源整理

OSC_fly
2分钟前
0
0
Android 安全逆向:篡改你的位置信息

篡改你的位置信息

蔡小鹏
2分钟前
0
0
SpringMVC 全局异常处理,返回json

1.在spring-mvc.xml中增加配置: 比如我的freemarker视图定义的是:/WEB-INF/template 我的页面则放在template下的common目录下,所以下方定义的是common/500,文件扩展名根据视图定义可以忽...

Gmupload
3分钟前
0
0
一篇文章搞定前端面试

本文旨在用最通俗的语言讲述最枯燥的基本知识 面试过前端的老铁都知道,对于前端,面试官喜欢一开始先问些HTML5新增元素啊特性啊,或者是js闭包啊原型啊,或者是css垂直水平居中怎么实现啊之...

Jack088
9分钟前
0
0
ajax 轮询请求后台服务器

<script type="text/javascript"> // var i=0; //声明轮询次数变量 $(document).ready(function(){ c = window.setInterval("getResult()",10000); //间隔多少秒去触发ajax }); function get......

15834278076
12分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部