jquery02总结

**1.1回顾前面学到的js，我们遇到的一些问题
1.window.onload事件有个覆盖的问题，我们只写一个
2.代码容错行差
3.浏览器兼容问题 ff:innerText
4.书写繁琐，代码量多
5.代码乱
6.动画效果，很难实现
1.2jquery解决问题
1.3jquery基本使用：
jquery-1.11.1.js
jquery-1.11.1.min.js 压缩版
jquery2.xxx不支持ie6，7，8
最新jquery3.0
$ is not defined:没有引用jquery包,或者放到了之后了。
1.3.2入口函数
$(document).ready(function(){

});
等价于
$(function(){

});
1.3.3事件处理程序
事件源.事件 = function(){事件处理程序}
1.事件源 
a.document.getElementById("id");
$("#id")
2.事件
js:document.getElementById("id").onclick
jquery:$("#id").click
3.事件处理程序
js:document.getElementById("id").onclick = function(){//语句}
jquery:$("#id").click(function(){//语句});
1.3.4jQuery详细介绍
$符号
js命名规范：下划线，字母，$，数字
但是不能以数字作为开头
jquery的两个变量：$和jquery

js入口函数和jquery入口函数的区别：
1.js的window.onload事件是等到所有的内容以及外部资源都加载完，才会去执行
2.jquery的入口函数是在html所有标签都加载之后，就会去执行
在json里，var json = {"键":"值"};键必须是字符串。
1.5 JS创建对象3种方式：
var obj = {}; //推荐使用
var obj1 = new Object();
var obj2 = Object.create();
jquery选择器
ul>li{兄弟很多$}*8
$("#demo") 选择id为demo的第一个元素  $("#demo").css("background-color","red");
$(".liItem") 选择所有类名为liItem的元素 $(".liItem").css("background","red");
$("div") 选择所有标签名为div的元素 $("div").css("background","red");
$(".liItem , div") 选择多个指定的元素 $(".liItem , div").css("background","red");
规律：$(selector).css("background","red");
1.7jQuery是什么
jquery就是javascript的一个库，把我们常用的功能进行封装，方便调用，提高开发效率。
1.7.1Javascript 跟 jQuery的区别：
javascript是一门编程语言，是客户端浏览器脚本。从09年开始可以做服务端了，noteJS.
jquery是javascript的一个库，包含多个可重用的函数，用来辅助简化javascript开发.
jquery能做的javascript都能做，javascript能做的事，jquery不一定能做到。
jquery选择器
基本选择器
层级选择器
过滤选择器
 基本过滤选择器
 内容过滤选择器
 可见性过滤选择器
 属性过滤选择器
 子元素过滤选择器
 表单对象属性过滤选择器
筛选选择器(方法)

1.8层级选择器
符号 说明 使用
空格 后代选择器，选择所有的后代元素 $("div span").css（"backgroun","red"）；
>    子代选择器，选择所有的子代元素 $("div > span").css("background","red");
+    紧邻选择器,选择紧挨着的下一个元素 ("div + p").css("background","red");
~    兄弟选择器，选择后面的所有的兄弟元素（"div~p"）.css("backgron")
层级选择器选择了选择符后面的那个元素。
1.8.2过滤选择器
基本过滤选择器
:eq(index) 等于 选择序号为index的元素,选择第一个匹配的元素。 index是从0开始的一个数字 $("li:eq(1)").css("bgc","red")
:last最后  选择最后一个元素
:first第一个 选择匹配第一个元素 
:even/:odd 奇数偶数 选择所有序号为奇数行的元素
:lt()/:gt(index) 大于小于 选择序号大(小)于index的元素 index 是从0开始的一个数字  $("li:gt(2)").css("bgc","red")
1.9属性选择器
[attribute]           $("a[href]") 选择所有包含href属性的元素
[attribute=value]     $("a[href='xxxx']") 选择href属性值为xxxx的元素
[attribute!=value]    $("a[href!='xxxx']") 选择href属性值不为xxxx的元素
[attribute^=value]    $("a[href^='xxxx']") 选择href属性值以xxxx开头的元素
[attribute$=value]    $("a[href$='xxxx']") 选择href属性值以xxxx为结尾的元素
[attribute*=value]    $("a[href*='xxxx']") 选择href属性包含xxxx的元素
[attribute1][attribute2][attribute3]   $("a[href]") 选择href属性href1属性href3的元素
2.0筛选选择器
.parent()选择父元素
.children()选择子元素
.silbings()选择兄弟元素
.eq(index)选择第index个元素
.find()查找元素
mouseover事件和mouseenter事件的区别：
mouseover/mouseout事件会触发多次，每遇到一个子元素就会触发一次。
mouseenter/mouseleave事件只会触发一次，鼠标经过的时候。

1.10dom对象和jquery对象相互转换
$(document) : 把dom对象转成了jQuery对象
$(document).ready(function(){
 var btn = document.getElementById("btn");
 $(btn).click(function(){//alert(111);});
从btn到$(btn)就是从dom到jquery
});

dom对象转换成jquery对象：var btn = document.getElementById("btn"); $(btn).click..
jquery对象转换成dom对象：$("#btn")[0].onclick = ...
                         或者$("btn").get(0).onclick = ...
================================================================
jquery02第二天
1.1复习jquery选择器
jQuery是什么？
是js的一个库，封装一些常用的功能，方便调用，提高开发效率。
jquery基本使用：
1.引包
2.入口函数两种方式
$(document).ready(function(){
});
$(function(){});
3.使用：
a.获取事件源
b.事件mouseenter/mouseleave
c.事件处理程序
1.2动画
1.2.1基本效果(显示和隐藏)
$("div").show();//div显示
$("div").hide();//div隐藏
1.2.2滑动效果
$("div").slideDown();//下拉显示
$("div").slideUp();//上拉显示
$("div").slideToggle();//切换
1.2.3淡入淡出
$("div").fadeIn();
$("div").fadeOut();
$("div").fadeTo();
1.2.4自定义动画
$("div").animate();
$("div").stop();
有2个参数：第一个参数表示是否清空对话队列，也就是后面的动画。默认值是false，如果为true，表示清空队列，也就是说后面所有动画都停止了。
第二个参数表示是否立即执行完当前动画。默认是false，如果是true，表示立即执行完当前的动画，然后再执行后续动画。
下拉菜单，右下角弹出广告
1.3操作样式
$("div").css("background-color":"pink"); //设置背景颜色值
$("div").addClass("divItem");//添加样式，样式名字没有点.
1.4常用DOM操作
$("div").attr("name");//获取name属性值
$("div").removeAttr("name");//移除属性
$("div").val(function(i,v){});//设置input的值
.html .text
1.5操作文档
1.5.1内部插入节点
$("div").append(node);//在div内部的后面追加元素
node.appendTo("div")//把node追加到div
$("div").prepend(noe);//在div内部的前面追加元素
node.prependTo($("div"));//把node追加到div内部的前面
1.5.2外部插入节点
$("div").after(node);//在div后面添加兄弟节点node
$("div").before(node);//在div前面添加兄弟节点node
$("div").insertBefore(node);//把div插入到node前面
$("div").insertAfter(node);//把div追加到node后面
1.5.3删除节点
$("div").remove();//删除选中的元素，“自杀”
$("div").empty();//清空子元素
$("div").html();//推荐使用
1.5.4复制节点   
$("div").clone();//复制节点 
注意：参数为true的话，那么之前绑定的事件也会复制一份。
1.5.5包裹节点
$("div").wrap(node);//包裹 单个包裹
$("div").wrapAll(node);//包裹 所有包裹在一个node中
1.5.6替换节点
$("div").replaceWidth(node);//替换
==========================================================================
jquery03 第三天
1.1复习jquery操作dom
基本选择器：#id,.class,element,*,
层级选择器：空格，>,+,~,
p.class
p#id
过滤选择器：:first :last,:eq,:lt,:gt,:odd,:even
筛选选择器：.eq(),.children(),.parent(),.siblings(),.find()
动画：show(),hide(),fadeIn(),fadeOut(),fadeTo(),fadeToggle(),slideDown(),slideUp(),slideToggle(),animate(),
DOM操作:.css(),addClass(类名),removeClass(),toggleClass(),
属性操作:.attr(),removeAttr(),.val(),.html(),.text(),
node.append(),prepend(),

1.2元素操作
1.2.1高度和宽度
$("div").height();//高度
$("div").width();//宽度
.height()方法和.css("height")的区别：
返回值不同，.height()方法返回的是数字类型，.css("height")返回的是字符串类型(200px)，所以，.height()方法常用在参与数学计算的时候。
1.2.2坐标值
$("div").offset();//获取或设置坐标值，设置值后变成相对定位
$("div").position();//获取坐标值 子绝父相 只读，不能设置
1.2.3滚动条(滚动事件)
$("div").scrollTop();//相对于滚动条顶部的偏移
$("div").scrollLeft();//相对于滚动条左部的偏移

1.3jquery事件
1.3.1绑定
click/mouseenter/blur/keyup
on 强烈建议使用 
$("#id").on("click","div:eq(0)",function(){//asdfas});
1.3.2解绑
unbind,undelegate
off
1.3.3触发
click:$("div").click();
trigger:触发事件，并且触发浏览器默认行为
triggerHandler:不触发浏览器默认行为
<script>
$(function(){
$(document).on("mousemove",function(e){
$("img").css({
"position":"absolute",
"top":e.pageY,
"left":e.pageX
});
});
});
</script>
1.4jquery事件对象介绍
event.stopPropagation();//阻止事件冒泡
event.preventDefault();//阻止默认行为
1.5jquery补充
1.5.1链式编程：end()补充
补充五角星 评论案例
第一步:鼠标移入，当前五角星和前面的五角星变实体，后面的变空心五角星
第二步：鼠标点击的时候，为当前元素添加clicked类，其他的移除clicked类
第三步：当鼠标移开整个评分控件的时候，把clicked的之前的五角星显示实心
1.5.2隐式迭代
默认情况下，会自动迭代执行jquery选择出来所有dom元素的操作。
如果获取的是多元素的值，默认返回的是第一个元素的值。
1.5.3map函数
$.map(arry,function(object,index){}) 返回一个新的数组
$("li").map(function(index,element){}) 注意参数的顺序是反的

1.5.4jquery优势
1.6jquery插件机制
1.6.1常用插件介绍
1.6.2插件使用
1.6.3怎么写插件
1.7jqueryUI
1.7.1使用
**