码迷,mamicode.com
首页 > Web开发 > 详细

jQuery

时间:2016-08-23 23:28:49      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:

1.jQuery操作dom

    1.1、jQuery操作属性(atrribute)

        操作单个属性:(如果属性已经存在,那就修改,如果属性不存在,添加)

            attr(name, value)

        操作多个属性

            attr(obj)  {name:value,name:value...}

        获取属性

            attr(name)   如果属性不存在 返回undefined

        移除属性

            removeAttr(name)  如果不传参数 没有效果

 

    1.2、jQuery操作值

        获取值     获取的是表单元素的value属性

            val()

        设置值

            val(value)

            给select设置值的时候,如果有和值对应的opiton,那么这个option被选中

            如果没有跟值对应的option,select选中空白

 

    1.2、jQuery操作内容

        获取内容

            text()    不会获取到html标签

            html()    会获取到

        设置内容

            text(content)  如果内容中有html标签,会对html标签进行转义

            html(htmlStr)  如果有html标签,会把标签转换成对应的元素

 

    1.3、jQuery操作尺寸

        css()

 

        height()  获取高度  数值类型

        width()   获取宽度  数值类型

 

        height(hegiht)   数值类型

        width(width) 数值类型

 

    1.4、jQuery操作坐标

        获取坐标

            offset()  获取的是当前元素相对于页面左上角的坐标 返回值是一个对象 {top:xx, left:xx}

            position() 获取的是当前元素相对有有定位的父元素的坐标,如果父元素没有定位,继续往上找,直到找到body

 

        设置坐标

            offset({left:xx,top:xxx}) 如果当前元素没有定位,默认会设置定位为 relative

 

    1.5、jQuery操作滚动

        scroll 事件  注册给document window都可以

 

        获取滚动条的滚动值

            scrollTop()  获取纵向滚动条的滚动距离

            scrollLeft() 获取的横向滚动条的滚动距离

 

        设置滚动条的滚动值

            scrollTop(top)

            scrollLeft(left)

2.jQuery事件机制

    click(function)====>bind(types,function)=====>delegate(selector,types,function)=====>on(types,selector,data,function)

 

    on方法绑定事件的两种形式

        1.给自身绑定事件

            on(types,function)

        2.绑定事件委托

            on(types,selector,data,function)

 

    事件委托的原理就是事件冒泡!

 

    unbind  undelegate

 

    off() 不传参数解绑所有的事件

    off(types) 解绑指定类型的事件,自身和委托事件都会被解绑

    off(types,"**") 解绑指定类型的委托事件,自身保留

 

    触发事件:

        1、直接调用事件  $("div").click()

        2、trigger(type)  type要触发的事件的事件类型

        3、triggerHandler(type) type要出发的事件的事件类型,但是,他不会触发浏览器的默认行为

 

    事件对象:

        event.type    事件的类型

        event.data    在注册时间的时候,传一个数据

        event.screenX/event.screentY  获取的是鼠标距离屏幕左上角的距离

        event.offsetX/event.offsetY 获取的是鼠标距离当前点击的元素的左上角的距离

        event.pageX/event.pageY  获取的是鼠标页面左上角的距离加上滚动条的滚动距离

        event.clientX/event.clientY 获取是鼠标相对于页面左上角的距离

 

        event.target  鼠标点击的是谁,就是谁

        event.currentTarget 相当于this,当前对象

        event.delegateTarget  代理对象 谁代理的事件,就是谁

 

        event.keyCode  获取按键的按键代码

 

        event.stopPropagation()  阻止事件冒泡

        event.preventDefault()  阻止浏览器默认行为

 

        return false;

 

3、jQuery补充

        1.链式编程

            实现原理:set方法中返回了当前对象

        注意:只有set方法可以继续链式编程,get方法不可以

            因为get方法会返回相应的要获取的值,不能返回当前对象了

 

            end(),恢复当前语句的主体对象到租出状态

        tips:

            筛选选择器基本上都会把句子的主体对象给更改 prevAll nextAll  siblings  children  parent

 

        2.隐式迭代

            只有设置方法才有隐式迭代,一次性操作多个元素

            获取方法没有隐式迭代,获取的时候只能获取第一个元素的值

 

        3.each

            each(function(index, element){})

jQuery操作属性(重点)

1.设置单个属性

//第一个参数:需要设置的属性名
//第二个参数:对应的属性值
attr(name, value);
//用法举例
$("img").attr("title","哎哟,不错哦");
$("img").attr("alt","哎哟,不错哦");

2.设置多个属性

//参数是一个对象,包含了需要设置的属性名和属性值
attr(obj)
//用法举例
$("img").attr({
    title:"哎哟,不错哦",
    alt:"哎哟,不错哦",
    style:"opacity:.5"
});

3.获取属性

//传需要获取的属性名称,返回对应的属性值
attr(name)
//用法举例
var oTitle = $("img").attr("title");
alert(oTitle);

注意:

  • 获取属性时,只会获取到第一个元素对应的属性,与css方法一样
  • 获取属性时,如果该属性不存在,那么会返回undefined

jQuery

标签:

原文地址:http://www.cnblogs.com/sw1990/p/5801127.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!