4.1 链式编程： end()补充
* 补充五角星 评论案例* 第一步：鼠标移入，当前五角星和前面的五角星变实体。后面的变空心五角星
* 第二步：鼠标点击的时候，为当前元素添加clicked类，其他的移除clicked类
* 第三步：当鼠标移开整个评分控件的时候，把clicked的之前的五角星显示实
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02五角星案例</title>
<style>
* { margin: 0; padding: 0; }
ul { list-style: none; }
.comment {
color: red;
/*font-size: 0;*/
/*设置字符间距*/
/*letter-spacing: -13px;*/
/*设置单 词间距 I am a teacher */
/*word-spacing: -13px;*/
}
.comment li {
float: left;
/*display: inline-block;*/
font-size: 40px;
}
</style>
<script src="jquery-1.11.3.min.js"></script>
<script>
jQuery(document).ready(function ($) {
var wjx_sel="★",
wjx_none="☆";
$(".comment").on("mouseenter","li",function () {
//prevAll前面的所有的兄弟节点
/*$(this).text(wjx_sel).prevAll().text(wjx_sel);
$(this).nextAll().text(wjx_none);*/
//当执行的jquery,链式编程断掉的时候,如果能把链再链上就好了。
$(this).text(wjx_sel)
.prevAll()
.text(wjx_sel)
.end()
.nextAll()
.text(wjx_none);
//第二步：记录一下用户点击的那个五角星
//给点击的li标签添加一个样式类
}).on("click","li",function () {
$(this).addClass("clicked").siblings().removeClass('clicked');
}).on("mouseleave",function () {
//鼠标移开的时候,先给所有的li标签添加一个空心的五角星
$(".comment li").text(wjx_none);
$(".clicked").text(wjx_sel).prevAll().text(wjx_sel).end()
.nextAll().text(wjx_none);
})
//第三部：当鼠标移开评分控件的时候,把click之前的五角星全部变成实心的,后面的变成空心
})
</script>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>
4.2 隐式迭代
* 默认情况下，会自动迭代执行jQuery选择出来所有dom元素的操作。
* 如果获取的是多元素的值，默认返回的是第一个元素的值。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02五角星案例</title>
<style>
* { margin: 0; padding: 0; }
ul { list-style: none; }
.comment {
color: red;
/*font-size: 0;*/
/*设置字符间距*/
/*letter-spacing: -13px;*/
/*设置单 词间距 I am a teacher */
/*word-spacing: -13px;*/
}
.comment li {
float: left;
/*display: inline-block;*/
font-size: 40px;
}
</style>
<script src="jquery-1.11.3.min.js"></script>
<script>
jQuery(document).ready(function ($) {
var wjx_sel="★",
wjx_none="☆";
$(".comment").on("mouseenter","li",function () {
//prevAll前面的所有的兄弟节点
/*$(this).text(wjx_sel).prevAll().text(wjx_sel);
$(this).nextAll().text(wjx_none);*/
//当执行的jquery,链式编程断掉的时候,如果能把链再链上就好了。
$(this).text(wjx_sel)
.prevAll()
.text(wjx_sel)
.end()
.nextAll()
.text(wjx_none);
//第二步：记录一下用户点击的那个五角星
//给点击的li标签添加一个样式类
}).on("click","li",function () {
$(this).addClass("clicked").siblings().removeClass('clicked');
}).on("mouseleave",function () {
//鼠标移开的时候,先给所有的li标签添加一个空心的五角星
//隐式迭代
$(".comment li").text(wjx_none);
//var t=$(".comment li").text();
//返回第一个五角星
$(".clicked").text(wjx_sel).prevAll().text(wjx_sel).end()
.nextAll().text(wjx_none);
})
//第三部：当鼠标移开评分控件的时候,把click之前的五角星全部变成实心的,后面的变成空心
})
</script>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>4.3 map函数
* $.map(arry,function(object,index){}) *返回一个新的数组**
* var arry = $("li").map(function(index, element){}) *注意参数的顺序是反的*
var newArr = $.map($("li"), function(i, e) {
return $(e).text() + i;//每一项返回的结果组成新数组
});
var newArr = $("li").map(function(elem, index){
console.log("elem:" + elem);
console.log("index:" + index);
retrun index;
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>each和 map函数的使用案例</title>
<script src="jquery-1.11.3.min.js"></script>
<script>
jQuery(document).ready(function($) {
// $("li").each(function(index, el) {
//
// var originTxt = $(el).text();
//
// $(el).text(originTxt+index);
// });
$.each($("li"),function (i,e) {
var orginTxt=$(e).text();
$(e).text(orginTxt+i);
});
//map函数:会把所有的
//全局的map函数参数跟jquery对象的参数是反的。
var temp=$.map($("li"),function (elem,index) {
return $(elem).text()+index;
});
var temp2=$("li").map(function (i,e) {
console.log(i);
return i;
});
});
</script>
</head>
<body>
<ul>
<li>传智播客</li>
<li>传智播客</li>
<li>传智播客</li>
<li>传智播客</li>
</ul>
</body>
</html>
4.4 each函数
* 全局的* $.each(array, function(index, object){})
*
* $("li").each(function(index, element){} )
* 参数的顺序是一致的。
例如：
$( "li" ).each(function() {
$( this ).addClass( "foo" );
});
$( "li" ).each(function( index ) {
console.log( index + ": " + $( this ).text() );
});
$( "div" ).each(function( index, element ) {});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>each和 map函数的使用案例</title>
<script src="jquery-1.11.3.min.js"></script>
<script>
jQuery(document).ready(function($) {
// $("li").each(function(index, el) {
//
// var originTxt = $(el).text();
//
// $(el).text(originTxt+index);
// });
$.each($("li"),function (i,e) {
var orginTxt=$(e).text();
$(e).text(orginTxt+i);
});
});
</script>
</head>
<body>
<ul>
<li>传智播客</li>
<li>传智播客</li>
<li>传智播客</li>
<li>传智播客</li>
</ul>
</body>
</html>4.5 noConflict 全局对象污染冲突
$ jQuery
var $ = { name : "itecast" };
<script src="jQueryDemos/jquery-1.11.3.min.js"></script>
<!-- $ === jQuery -->
var laoma_jQ = $.noConflict();//让jQuery释放 $, 让$ 回归到jQuery之前的对象定义上去。
$.name
jQuery<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>冲突的案例</title>
<script>
$ = {
show: function (argument) {
console.log("my $");
}
}
</script>
<script src="jquery-1.11.3.min.js"></script>
<script>
var myJQuery = $.noConflict();
jQuery(document).ready(function(){
jQuery("div").css("color","red");
// $("div").css("color","red"); //$就不能用了
});
$.show("sdf");
</script>
</head>
<body>
<div>
sfadfsdf
</div>
</body>
</html>4.6 jQuery.data() jQuery对象的数据缓存。(了解)
* $(".nav").data("name", 123);//设置值。
var t = $(".nav").data("name"); //获取值
t.name = "18";//对象的更改，会直接同步到 元素的jQuery对象上去。$("li").click(function(){
$(this).data("clicked", true);
// if($(this).data("clicked") === true ) {
// }
});4.7 会做jQuery插件
* 全局jQuery函数扩展方法
$.log = function() {
}
//$("li")
* jQuery对象扩展方法
$.fn.log = function() {
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery扩展方法</title>
<script src="jquery-1.11.3.min.js"></script>
<script>
//给jQuery全局对象扩展一个方法
$.log = function () {
console.log(new Date());
};
// $.each()
// $.log();
// 扩展一个普通的jQuery对象的方法
$.fn.log = function() {
console.log($(this).text());
//输出所有的 评论组件的所有的代码。
return "<ul></ul>"
};
$(function(){
$("div").log();
});
</script>
</head>
<body>
<div>
sdjlsjdf
</div>
</body>
</html>4.8 引入第三方插件
* 背景色动画插件* lazyload 插件
* jQuery UI 插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>懒加载插件案例</title>
<style>
div {
height: 2000px;
}
</style>
<!-- 第一步：引包
第二步： 写ｉｍｇ
第三步： lazyload（）方法 -->
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.lazyload.min.js"></script>
<script>
$(function () {
$(".lazy").lazyload();
});
</script>
</head>
<body>
<div>
</div>
<img class="lazy" data-original = "imgs/1.gif" height=440" width="150" alt="">
<img class="lazy" data-original="imgs/2.gif" height="440" width="150" alt="">
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQueryUI案例</title>
<!-- 第一步： 引入jQuery
第二步：引入jQueryUI的 js库
第三步： 引入jQueryUI 的css样式
第四步：照人家的demo去写 -->
<link rel="stylesheet" href="jQueryUI/jquery-ui.min.css">
<script src="jquery-1.11.3.min.js"></script>
<script src="jQueryUI/jquery-ui.min.js"></script>
<style>
.wrap div {
height: 300px;
background-color: #ccc;
}
</style>
<script>
$(function () {
$(".wrap").tabs();
$(".dialog").dialog();
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li><a href="#tab1">页签1</a></li>
<li><a href="#tab2">页签2</a></li>
<li><a href="#tab3">页签3</a></li>
</ul>
<div id="tab1">1</div>
<div id="tab2">2</div>
<div id="tab3">3</div>
</div>
<!-- dialog案例 -->
<div class="dialog" title="我是对话框的标题">
我是对话框
</div>
</body>
</html>4.9 sublime 装插件
* sublime 3* 第一步： 装上sublime的包管理器package control
* ctrl+ ~
* 上网把 按照package control的那段代码，粘贴一下，然后回车。
*
* 第二步：使用Ctrl + shift + p
扫一扫
1917
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
