jQuery学习笔记一

前言

jQuery是一个别人已经写好的js文件库,我们可以直接拿来使用.jQuery封装了很多方法(函数),极大的简化了JavaScript编程,并且jQuery兼容所以的主流浏览器,包括IE6!

    //使用jquery需要写入口函数
    $(document).ready(function(){
        //具体代码实现
    })    

jQuery选择器

基本选择器

跟css中的选择器类似,只是作为字符串传入了jQuery的选择器中.

• 标签选择器
  语法:$(标签名) 返回值:一个类数组对象,里面包含了对应的标签名的所有标签对象.
• id选择器
  语法:$(#id) 返回值:一个类数组对象,里面包含了页面第一个id符合的元素.
• class选择器
  语法:$(.class) 返回值:一个类数组对象,里面包含了页面所有class符合的元素.
• 并集选择器
  语法:$(selector1,selector2,...) 获取满足任意一个选择器的标签组合一个集合
• 交集选择器
  语法:$(selector1selector2...) 获取满足所有选择器的标签元素

层级选择器

• 后代选择器
  语法:$(selector1 selector2 ...) 选择类似css中后代选择器中选择的目标元素
• 子代选择器
  语法:$(selector1>selector2)
• 相邻选择器
  语法:$(selector1+selector2)
• 兄弟选择器
  语法:$(selector1~selector2) 选取selector1后面满足selector2的所有兄弟元素

过滤选择器

$(selector:even) 选择满足selector的index为偶数的元素
$(selector:odd) 选择满足selector的index为奇数的元素

属性选择器

$([attribute]) 选择包含attribute的所有元素
$([attribute=value]) 选择属性的值满足条件的元素

jQuery操作css

jQuery提供一个获取和设置css属性的方法

    $(selector).css(propertyname,value,[propertyname,value])
    //获取css属性的值
    var box = $("#box")
    console.log(box.css("width");
    //设置css属性的值
    box.css("width",100)
    box.css({"wideth":100,"height":100,"color":"red"})
   //jQuery会根据你传入的参数的个数和形式判断你到底是想要使用那些功能.

jQuery操作class

• addClass $.addClass(className) 向目标对象中添加一个或多个class
• removeClass $.removeClass(className) 移除目标对象中的一个或多个class
• toggleClass $.toggleClass(className) 添加或移除目标对象的一个或多个className

节点操作

• 创建节点 $("<标签名>") 返回值:和指定标签名的同类型的节点(jQuery对象)
• 添加节点
  将一个子节点(元素/文本)添加到指定的父节点中,作为父节点的最后一个子节点
  parentNode.append(childNode) childNode.appendTo(parentNode) parentNode.prepend(childNode)
  把一个节点插入到另一个节点之后 $(selector).after(node)
  把一个节点插入到另一个节点之前 $(selector).before(node)
• 删除节点 $(selector).remove() 将一个节点及其子节点全部删除
• 清空节点 $(selector).empty() 将一个节点的所有子节点删除
• 克隆节点 $(selector).clone(true|false) true:复制已经绑定的事件处理程序 false:不复制已经绑定的事件处理程序

查找元素的方法

• parent方法
  语法:$(selector).parent() 获取满足选择器的元素的父节点 返回jQuery对象
• find方法---效率并不高,少用
  $(selector).find(selector2) 在满足selector1的元素的后代元素中查找满足selector2的后代元素
• children方法
  $(selector1).children(selector2) 在满足selector1的子代元素中查找selector2的子代元素
• siblings方法
  $(selector1).siblings(selector2) 获取满足selector1的兄弟元素中满足selector2的兄弟元素
• next方法
  $(selector).next() 获取满足选择器的下一个元素节点
• nextAll方法
  $(selector).nextAllselector2() 获取满足选择器1的元素之后的所有满足选择器2的元素
• prev方法
  $(selector1).prev() 获取满足selector1的元素的上一个元素
• prevAll方法
  $(selector1).prevAll(selector2) 获取满足selector1的元素之前的兄弟元素中满足selector2的元素
  -eq方法
  $(selector).eq(index) 获取满足selector的jquery对象中的第index个jQuery对象
  -index方法
  $(selector).index(element) 获取的是element在selector所选中的所有元素中的索引

链式编程

链式编程就是不简单的执行代码.因为每个对象的方法最终返回的都是调用的对象,返回值是对象,对象可以继续的点方法,这是链式编程的核心思想.在方法内部,最终返回调用方法的对象是(this).
链式编程见面了代码的繁琐,避免重复的获取对象,调用方法.

     $("#box").css("width",200).css("height",200).css("background-color","blue"); 
     person.sayHi().sayHi().sayHi();           

动画

• 隐藏与显示动画

    $(selector).hide(speed,callback)    //指定满足selector的元素在speed毫秒之后完全隐藏,完成后执行callback回调函数
    $(selector).show(speed,callback)    //指定满足selector的元素在speed毫秒之后完全显示,完成后执行callback回调函数
    $(selector).toggle(speed,callback)  //指定满足selector的元素在speed毫秒之后完全显示/隐藏,完成后执行callback回调函数

• 淡入淡出

    $(selector).fadeIn(speed,callback)    //淡入
    $(selector).fadeOut(speed,callback)    //淡出
    $(selector).fadeToggle(speed,callback)    //淡入/淡出
    $(selector).fadeTo(speed,opacity,callback)    
    //参数: 毫秒speed    透明度opacity    回调函数callback 

• 滑动

    $(selector).slideDown(speed,callback)    //向下滑动    
    $(selector).slideUp(speed,callback)    //向上滑动
    $(selector).slideToggle(speed,callback)    //向上/下滑动    

• 多属性动画

    $(selector).animate({params},speed,callback)    //控制多个属性同时改变的动画    params动画属性键值对                                              

• 停止动画

    $(selector).stop(stopAll,gpToEnd)    //将jQuery的动画停止
    // stopAll   true:清除所有的动画效果    false:仅清除当前活动的动画,下一个动画继续执行
    // goToEnd   true:停止之后立刻到达结束效果,并执行callback    false:停止之后立刻到达结束效果,不执行callback 

jQuery中的注册事件

• 快速方式 jQuery中提供了很多快速的注册事件的方式 更多点击事件参考

    $(selector).click(callback)    //注册点击事件
    $(selector).hover(callback)    //鼠标移入移出事件
    $(selector).keydown(callback)    //键盘点击事件
       

• on的方式(推荐使用)
  语法:$(selector).on(event,childSelector,data,callback)
  参数:event事件 childSelector指定注册事件的子元素 data传入的callback额外参数 callback绑定的事件处理程序

    $(document).ready(function(){
        console.log("test")
    })

• bind的方式
  语法:$(selector).bind(event,data,callback)
  备注:on和bind几乎没有区别,官方推荐使用on!

• delegate的方法
  语法:$(selector).delegate(childSelector,event,data,callback)

解绑处理程序

• off
  语法:$(selector).off(event,selector,callback)
• unbind
  语法:$(selector).unbind(event,callback)
• undelegate
  语法:$(selector).undelegate(childSelector,event,callback)

获取或设置DOM元素的属性

• attr 访问或设置DOM元素的自定义属性
  语法:$(selector).attr(attribute,value)
  参数:attribute参数 value值 //只有一个参数是获取 有值是设置
• prop 访问DOM元素的固有属性(HTML中支持的)
  语法:$(selector).prop(attribute,value)

获取和设置表单控件的值

语法:$(selector).val(value)
参数:value用于设置的值 //不传参就是获取,传了就是设置

获取和设置标签中的内容

• text方法
  语法:$(selector).text(content)
  参数:content用于设置内容(文本形式) //传参设置,不传获取
• html方法
  语法:$(selector).html(content)
  //区别 content可以是标签

操作位置

• offset方法
  语法:$(selector).offset({top:value,left:value})
  获取或设置某个元素的偏移量
• position方法
  语法:$(selector).position() 获取某个元素的位置(position只能获取)

操作滚动

语法:$(selector).scroll() 为指定元素绑定滚动时间的处理程序

• 获取滚动高度$(selector).scrollTop() 获取元素高度$(selector).height()