jquery02总结

**1.1回顾前面学到的js，我们遇到的一些问题1.window.onload事件有个覆盖的问题，我们只写一个2.代码容错行差3.浏览器兼容问题 ff:innerText4.书写繁琐，代码量多5.代码乱6.动画效果，很难实现1.2jquery解决问题1.3jquery基本使用：jquery-1.11.1.jsjquery-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").onclickjquery:$("#id").click3.事件处理程序js:document.getElementById("id").onclick = function(){//语句}jquery:$("#id").click(function(){//语句});1.3.4jQuery详细介绍$符号js命名规范：下划线，字母，$，数字但是不能以数字作为开头jquery的两个变量：$和jqueryjs入口函数和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/mouseleavec.事件处理程序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 .text1.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.classp#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/keyupon 强烈建议使用 $("#id").on("click","div:eq(0)",function(){//asdfas});1.3.2解绑unbind,undelegateoff1.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.7jqueryUI1.7.1使用**