那些年,我还在学习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 相关文章推荐
javascript 模式设计之工厂模式学习心得
Apr 27 Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 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
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
用js解决数字不能换行问题
2010/08/10 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
js学习之----深入理解闭包
2016/11/21 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
Python isinstance判断对象类型
2008/09/06 Python
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
Paradox London官方网站:英国新娘鞋婚礼鞋品牌
2019/08/29 全球购物
南京某软件公司的.net面试题
2015/11/30 面试题
公职人员索取回扣检举信
2014/04/04 职场文书
2014年创先争优活动总结
2014/05/04 职场文书
我爱读书演讲稿
2014/05/07 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
模范教师事迹材料
2014/12/16 职场文书
担保书格式
2015/01/20 职场文书
社区母亲节活动总结
2015/02/10 职场文书
道歉信怎么写
2015/05/12 职场文书
Redis入门基础常用操作命令整理
2022/06/01 Redis