jquery 学习笔记 传智博客佟老师附详细注释


Posted in Javascript onSeptember 12, 2020

1 、写 js 的时候用 aptana ( IDE ),有 jquery 的代码提示。
jquery 学习笔记 传智博客佟老师附详细注释 
把 code assist 里面的 jqurey1.3 选上就可以了。

2 、为一个元素增加事件的时候不要在 html 里加,在 js 中加。
不要写 <input type=”button” onclick=”xxx” id=”id”>
要写成: document.getElementById(“id”).onclick = function(){}

3 、把 js 剥离出来,做到 html 和 js 的分离。
Html 中除了引入 js 之外,不要别的 js 代码。

4 、 Jqurey 选择器:基本选择器、层级选择器、基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单选择器、表单对象属性选择器
http://xiazai.3water.com/200907/yuanma/jQuery_xuanzeqi.rar

5 、选择器中的空格问题

带空格的是子选择器,不带空格的是可见性过滤选择器

jquery 学习笔记 传智博客佟老师附详细注释

例子 1 、品牌列表 需要一张小图片,还有 jqurey1.3.1 的 js 包
下载地址: jqurey鼠标经过例子 http://xiazai.3water.com/200907/yuanma/jquery_mouse.rar
代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title></title> 

<style type="text/css"> 

*{ margin:0; padding:0;} 

body {font-size:12px;text-align:center;} 

a { color:#04D; text-decoration:none;} 

a:hover { color:#F50; text-decoration:underline;} 

.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;} 

.SubCategoryBox ul { list-style:none;} 

.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;} 

.showmore { clear:both; text-align:center;padding-top:10px;} 

.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;} 

.showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;} 

.promoted a { color:#F50;} 

</style> 

<script type="text/javascript" src="scripts/jquery-1.3.1.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){//dom 加载完毕时执行 

// 得到 class 是 SubCategoryBox 的 div 中的 ul 中的 li ,索引大于 5 ,不选最后一个 

// 即后两行 

var $hideBandes = $("div.SubCategoryBox ul li:gt(5):not(:last)"); 

$hideBandes.hide();//dom 加载完毕先隐藏 

// 给 class 为 showmore 的 div 中的所有 a 标记增加 click 方法 

$("div.showmore>a").click(function(){ 

$hideBandes.toggle();// 点击是循环隐藏和显示 

if($hideBandes.is(":visible")){// 如果是显示的 

// 给几个特定的元素增加样式, div 中的 ul 中的 li 内容过滤 包含 佳能等几个内容时 

$("div ul li").filter(":contains(' 佳能 '), :contains(' 尼康 '), :contains(' 奥林巴斯 ')") 

.addClass("promoted"); 

$(".showmore>a>span").css("background", "url(img/up.gif) no-repeat 0 0");// 改变小箭头图片 

$(".showmore>a>span").text(" 显示精简品牌 ");// 改变文字 

}else{// 如果是隐藏的 

// 去除加上去的样式 

$("div ul li").filter(":contains(' 佳能 '), :contains(' 尼康 '), :contains(' 奥林巴斯 ')") 

.removeClass("promoted"); 

$(".showmore>a>span").css("background", "url(img/down.gif) no-repeat 0 0");// 改变小箭头图片 

$(".showmore>a>span").text(" 显示全部品牌 ^^");// 改变文字 

} 

return false; 

}); 

}); 

</script> 

</head> 

<body> 

<div class="SubCategoryBox"> 

<ul> 

<li ><a href="#"> 佳能 </a><i>(30440) </i></li> 

<li ><a href="#"> 索尼 </a><i>(27220) </i></li> 

<li ><a href="#"> 三星 </a><i>(20808) </i></li> 

<li ><a href="#"> 尼康 </a><i>(17821) </i></li> 

<li ><a href="#"> 松下 </a><i>(12289) </i></li> 

<li ><a href="#"> 卡西欧 </a><i>(8242) </i></li> 

<li ><a href="#"> 富士 </a><i>(14894) </i></li> 

<li ><a href="#"> 柯达 </a><i>(9520) </i></li> 

<li ><a href="#"> 宾得 </a><i>(2195) </i></li> 

<li ><a href="#"> 理光 </a><i>(4114) </i></li> 

<li ><a href="#"> 奥林巴斯 </a><i>(12205) </i></li> 

<li ><a href="#"> 明基 </a><i>(1466) </i></li> 

<li ><a href="#"> 爱国者 </a><i>(3091) </i></li> 

<li ><a href="#"> 其它品牌相机 </a><i>(7275) </i></li> 

</ul> 

<div class="showmore"> 

<a href="more.html"><span> 显示全部品牌 </span></a> 

</div> 

</div> 

</body> 

</html>

例子 2 、超链接和图片提示效果 需要几张图片 jqurey1.3.1 的 js 包
代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<title>Untitled Document</title> 

<style type="text/css"> 

body{ 

margin: 0; 

padding: 40px; 

background: #fff; 

font: 80% Arial, Helvetica, sans-serif; 

color: #555; 

line-height: 180% 

} 

img{ 

border: none; 

} 

li{ 

list-style: none; 

float: left; 

display: inline; 

margin-right: 10px; 

border: 1px solid #AAAAAA; 

} 

#tooltip{ 

position: absolute; 

border: 1px solid #ccc; 

background: #333; 

padding: 2px; 

display: none; 

color: #fff; 

} 

</style> 

<script type="text/javascript" src="scripts/jquery-1.3.1.js"></script> 

<script type="text/javascript"> 

$(function(){//dom 加载完执行 

// 设定图片层距离鼠标的位置 

var x = 10; 

var y = 20; 

$("a.tooltip").mouseover(function(e){// 选择 class 为 tooltip 的 a 标记,添加鼠标经过事件的方法 

this.myTitle = this.title;// 得到 a 标记的 title 属性 

this.title = "";// 把原来的 title 属性设为空字符串 

var imageTitle = this.myTitle ? ("<br>" + this.myTitle) : "";// 判断 myTitle 是否为空,不为空给它前面加 br 

var im = "<div id='tooltip'><img src='" + this.href + "' alt=' 产品预览图 '/>" + imageTitle + "</div>";// 创建一个 div 

$("body").append(im);// 把创建的 div 追加到 body 中 

// 设定追加的 div 的位置, e 是鼠标的位置,再加上距离鼠标的位置 ,就是 div 的位置 

$("#tooltip").css("left", e.pageX + x + "px") 

.css("top", e.pageY + y + "px") 

.show("fast");// 显示 速度设为 快 

}).mouseout(function(){// 鼠标移出事件的方法 

this.title = this.myTitle;// 把 myTitle 还给 title 

$("#tooltip").remove();// 删除新添加的 div 

}).mousemove(function(e){// 鼠标在图片上移动的事件的方法 

// 修正位置 

$("#tooltip").css("left", e.pageX + x + "px") 

.css("top", e.pageY + y + "px"); 

}).click(function(){return false;});// 取消 a 标记的默认方法 

}) 

</script> 

</head> 

<body> 

<h3> 有效果: </h3> 

<ul> 

<li><a href="images/apple_1_bigger.jpg" class="tooltip" title=" 苹果 iPod"><img src="images/apple_1.jpg" alt=" 苹果 iPod" /></a></li> 

<li><a href="images/apple_2_bigger.jpg" class="tooltip" title=" 苹果 iPod nano"><img src="images/apple_2.jpg" alt=" 苹果 iPod nano"/></a></li> 

<li><a href="images/apple_3_bigger.jpg" class="tooltip" title=" 苹果 iPhone"><img src="images/apple_3.jpg" alt=" 苹果 iPhone"/></a></li> 

<li><a href="images/apple_4_bigger.jpg" class="tooltip" title=" 苹果 Mac"><img src="images/apple_4.jpg" alt=" 苹果 Mac"/></a></li> 

</ul> 

<br/><br/><br/><br/> 

<br/><br/><br/><br/> 

<h3> 无效果: </h3> 

<ul> 

<li><a href="images/apple_1_bigger.jpg" title=" 苹果 iPod"><img src="images/apple_1.jpg" alt=" 苹果 iPod" /></a></li> 

<li><a href="images/apple_2_bigger.jpg" title=" 苹果 iPod nano"><img src="images/apple_2.jpg" alt=" 苹果 iPod nano"/></a></li> 

<li><a href="images/apple_3_bigger.jpg" title=" 苹果 iPhone"><img src="images/apple_3.jpg" alt=" 苹果 iPhone"/></a></li> 

<li><a href="images/apple_4_bigger.jpg" title=" 苹果 Mac"><img src="images/apple_4.jpg" alt=" 苹果 Mac"/></a></li> 

</ul> 

</body> 

</html>
Javascript 相关文章推荐
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
VueJs组件prop验证简单介绍
Sep 12 Javascript
分析JS单线程异步io回调的特性
Dec 01 Javascript
详解jquery和vue对比
Apr 16 jQuery
JS定时器如何实现提交成功提示功能
Jun 12 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
微信小程序中wxs文件的一些妙用分享
Feb 18 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 Javascript
JavaScript 事件查询综合
Jul 13 #Javascript
JavaScript 事件对象的实现
Jul 13 #Javascript
Prototype Date对象 学习
Jul 12 #Javascript
Prototype Function对象 学习
Jul 12 #Javascript
Prototype Object对象 学习
Jul 12 #Javascript
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 #Javascript
Prototype 学习 工具函数学习($A方法)
Jul 12 #Javascript
You might like
php实现的双向队列类实例
2014/09/24 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
jQuery each()小议
2010/03/18 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
js定时器实例分享
2016/12/20 Javascript
浅谈Vue的基本应用
2016/12/27 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
python获取元素在数组中索引号的方法
2015/07/15 Python
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
python字典key不能是可以是啥类型
2020/08/04 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
电子商务专业自我鉴定
2013/12/18 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
投资协议书范本
2014/04/21 职场文书
委托书的写法
2014/08/30 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
2015年重阳节慰问信
2015/03/23 职场文书
亮剑观后感
2015/06/05 职场文书
Python OpenCV实现图像模板匹配详解
2022/04/07 Python