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:请求完成后的回调方法