1.jQuery的引入
可以相对路径导入, 也可以绝对路径导入 1.1jQuery对象,是jQuery包装dom对象后产生的对象,是jQuery独有的, 获取jQuery对象,在变量前面加$; var $variable=jQuery对象 var variable=dom 对象 基础语法 $(select).action() jQuery无法使用dom 对象的方法,dom也不能使用jQuery的方法 2.寻找元素 2.1选择器 1.基本选择器 $('*') $('#id') $('.class') $('element') $(".class,p,div") 2.层级选择器 后代选择器$('div p') 子代选择器$('div>p') 毗邻选择器$('div+p') 同级选择器$('div~p') 3.筛选器 $('li:first') 选择第一个标签 $('li:eq(2)') 选择顺序是2的标签 属性选择器 $('[id=div1]') $('[name='a']') 表单选择器 $('[type='text']')=$(':text') 只适用于input标签 $('input:checked') 3.查找标签 jqurey的链式赋值, next 找兄弟标签 $('#d1').next().css('color','red').next().css('color','green'); nextAll()向下查找所有的标签 $('#d1').nextAll().css({ 'color':'red'}); nextUntil()只查找区间内的标签 $('#d1').nextUntil('#d2').css('color','green'); ---------------------------prev向上查找 同理,prev() 与next()方法一样, prevALL() 与nextALL() prevUntil() 与nextUntil()y --------------------------- sibling $('.c2').siblings().css('color','red'); $('.c3').siblings().css('color','red'); -------------find 找所有的后代 children:找所有的子代 $('.c1').find('p').css('color','green'); $('.c1').children('p').css('color','red'); ---------------找父标签 console.log($('.p1').parent().parent().attr('class')) console.log($('.p1').parents())//一直找到最上层父级 console.log($('.p1').parent())//只找一层的父级 4.事件的绑定 4.1从页面载入,不会因为引入jQuery的顺序而出错,
先加载整个function 方法1,简写 $(function () { $('.d1').css('color','red') }) 方法2,从document的文档准备一个函数开始执行 $(document).ready(function () { $('.d2').css('color','green') }) 4.2事件绑定 语法:标签对象.事件(函数) eg:$('p').click(function(){}) 4.3 事件委派 $('').on(eve,selector,function) 举例: $('.box').on('click','.item',function () { alert(456) }) .box是父标签,click是点击事件,item是被选择的,func是要执行的函数 5.事件切换 hover事件: 格式 $(".test").hover(enter,out) enter是移进函数,out是移出函数 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
就相当于:鼠标移进来,移出去 $('.test').mouseenter(function){ console.log('enter')} $('.test').mouseleave(function){ console.log('leave') 5.属性操作 ---css类 $(" ").addclass(class|fn) $(" ").removeClass(class|fn) ---属性 $('').attr();获取属性 $('').removeAttr(); $('').prop();只是适用于input和select多选框; ------------HTML代码/文本/值 $('').html([val|fn]) $('').text([val|fn]) //对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此 //需要使用prop方法去操作才能获得正确的结果。
6.each 循环 方式1:格式:$.each(obj,fn) li=[1,2,3,4] $.each(li,function(i,x){ console.log(i,x)}); 方式2:格式:$('').each(fn) $('tr').each(function){ console.log($(this).html()) each扩展: function f() { for (var i=0;i<4;i++){ if (i==2){ return }console.log(i) } } f();//0 1 li=[11,22,33,44] $.each(li,function (i,v) { if(v==33){ return }console.log(v) }) 11 22 44 each 的参数function 内如果出现return,结束当次循环,类似于continue 如果出现return false,就结束整个循环,相当于break : function里的return只是结束了当前的函数,并不会影响后面函数的执行 //本来这样没问题,但因为我们的需求里有很多这样的情况:我们不管循环到第几个函数时,一旦return了, //希望后面的函数也不再执行了!基于此,jquery在$.each里又加了一步: for(var i in obj){ ret=func(i,obj[i]) ; if(ret==false){ return ; } } // 这样就很灵活了: // <1>如果你想return后下面循环函数继续执行,那么就直接写return或return true // <2>如果你不想return后下面循环函数继续执行,那么就直接写return false 7.文档节点处理 创建节点: $('') 内部插入: $('').append(content|fn) 插入到数组后面 $('').appendto(content|fn) $('').prepend(content|fn) 插入到前面
append和prepend都是作为子标签插入
//外部插入 $("").after(content|fn) ----->$("p").after("Hello"); $("").before(content|fn) ----->$("p").before("Hello"); $("").insertAfter(content) ----->$("p").insertAfter("#foo"); $("").insertBefore(content) ----->$("p").insertBefore("#foo"); //替换 $("").replaceWith(content|fn) ----->$("p").replaceWith("Paragraph. "); //删除 $("").empty() $("").remove([expr]) //复制 $("").clone([Even[,deepEven]]) ---盒子岁鼠标移动 Title
---返回顶部
Title TOP-----事件委派
Title