那些年,我还在学习jquery 学习笔记


Posted in Javascript onMarch 05, 2012

原来Jquery就是一个javascript写的一个库,它给我们提供了很多常用的方法,使用这些方法可以兼容多种浏览器,使用它可以达到很好的动画效果,下面就来看看那些年的学习笔记吧
一、$符号

1、选择器

 可以选择html标签,也可选择ID,Class等

 如下:

 <script type="text/javascript"> 
$( 
function() { 
$("table.datalist tr:nth-child(odd)").addClass("one");//odd:匹配奇数,even:偶数,nth-child:匹配其父元素下的第N个子或奇偶元素,从1开始 
var obj = $("h2 a"); //得到h2下面的a,返回的是一个数组 
for (var i = 0; i < obj.length; i++) { 
obj[i].innerHTML = i.toString(); 
} 
var obj1 = $("#demo"); 
obj1.append("Demo_Id"); 
var obj2 = $(".Class"); //得到的是一个数组 
alert(obj2); 
$("div ul li:has(a)").addClass("Two"); //得到里中有a的标符添加一个Class="Two" 
$("li:lt(2)").addClass("one"); //得到前三个li,添加一个Class="one",下标是从0开始的 
$("p>span").addClass("Two"); //得到p下的span,parent>child 
} 
) 
</script>

2、得到标记中的属性


var sTitle = $("p>span").attr("Title"); //得到标记中的属性值 
$("p>a").text(sTitle);//设置值,若是用text()得到值,则是得到的文本,不包含html

3、设置属性
$("button:gt(0)").attr("disabled", "disabled"); //得到第一个button后的button,然后设置它们的disable属性为不可用,没有这个属性就返回undefined 
$("img").attr({ src: "test.jpg", alt: "Test Image" });

3.1、删出属性
$("img").removeAttr("src");
 4、修改Class,如果存在(不存在)就删除(添加)一个类。
$( 
function() { 
$("div>p").mouseover( 
function() { 
$(this).toggleClass("HightLight");//修改样式class 
} 
); 
}

4.1、移出Class
$("p").removeClass("selected");
4.2、添加Class
$("p").addClass("selected");
5、图片的复制

 $("img:eq(0)").clone().appendTo($("p")); //得到第一张图片
 6、事件绑定,可以绑定多个相同的事件

$(function() { 
$("img").bind("click", function() { //绑定事件 
alert("你点啊!1"); 
}); 

  $("img").bind("click", function() { //绑定事件 
alert("你点啊!2"); 
}); 
})

7、移出事件
$(function() { 
$("input[type=button]").click(function() { 
$("img").unbind("click", eventImg);//unbind来移出方法 
alert("移出事件!"); 
}); 
})

8、元素的显示和隐藏
<script type="text/javascript"> 
$(function() { 
$("#demobtnF").click(function() { 
$("#p_btn").show(); //显示 
}); 
$("#demobtn").click(function() { 
$("span:first").hide();//隐藏 
}); 
}) 
</script>

渐入渐出的效果:在show(),与hide()方法上传一个时间参数,从而得到淡入淡出的效果

 

<script type="text/javascript"> 
$(function() { 
$("#Button1").click(function() { 
$("#imgs").show(10000); 
}); 
$("#Button2").click(function() { 
$("#imgs").hide(5000); 
}); 
}) 
</script>

<input id="Button1" type="button" value="Show" /> 
<input id="Button2" type="button" value="hide" /> 
<hr /> 
<img id="imgs" src="images/27m03.jpg" alt="log" /> 
<hr />

二、淡入淡出的实现方法
 1、fadeIn()与fadeOut():使用方法与show()、hide()一样,效果更好
如下:
$("#Button3").click(function() { 
$("#imgs").fadeIn(10000); 
}); 
$("#Button4").click(function() { 
$("#imgs").fadeOut(5000); 
});

2、幻灯片效果-由slideUp()与slideDown()方法实现
$("#Button1").click(function() { 
$("#imgs").slideUp(10000); 
}); 
$("#Button2").click(function() { 
$("#imgs").slideDown(5000); 
});

三、Jquery功能函数
 1、浏览器的检测$.browser, 如下:
if ($.browser.msie) return alert("IE"); 
if ($.browser.safari) return alert("safari"); 
if ($.browser.mozilla) return alert("mozilla"); 
if ($.browser.opera) return alert("opera");

2、盒子模型 $.boxModel 如下:

alert($.boxModel ? "standard" : "IE");


 3、处理javascript对象 $.each(arr,function) //对数组的每个对象用function函数处理

如下:

var aArr = ["one", "two", "three"]; 
$.each(aArr, function(iNum, value) { 
alert(iNum + "," + value); 
});

$.grep(Arr,funtion(value)):过滤

 示例:

var aArray = [1, 2, 3, 4, 5, 6, 7, 8, 9]; 
var DemoArr = $.grep(aArray, function(value) { 
return value > 4; 
}); 
document.write(DemoArr.join()); 
 $.map(Array,function(value,index))

本文全部来源于那些年的学习笔记。
总结
Jquery库中有很多函数,还有一些,特别是Jquery里的Ajax,是非常重要的,此文以回忆那些年学习Jquery的日子。
Javascript 相关文章推荐
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
javascript进行数组追加方法小结
Jun 16 Javascript
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 #Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
Mar 05 #Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 #Javascript
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 #Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
Mar 01 #Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
Mar 01 #Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 #Javascript
You might like
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
php+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
php根据身份证号码计算年龄的实例代码
2014/01/18 PHP
万能的php分页类
2017/07/06 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
JS常用正则表达式总结
2013/11/12 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
python实现的udp协议Server和Client代码实例
2014/06/04 Python
python安装Scrapy图文教程
2017/08/14 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
Numpy之random函数使用学习
2019/01/29 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
python中rb含义理解
2020/06/18 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
数据库连接池的工作原理
2012/09/26 面试题
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
公司市场部岗位职责
2013/12/02 职场文书
连锁酒店店长职责范本
2014/02/13 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
学校文明单位申报材料
2014/05/06 职场文书
学校评语大全
2014/05/06 职场文书
跑操口号
2014/06/12 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
实习证明格式范文
2014/10/14 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
2015年乡镇平安建设工作总结
2015/05/13 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
初中班主任工作随笔
2015/08/15 职场文书
Python实现的扫码工具居然这么好用!
2021/06/07 Python
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers