JQuery笔记03

JQuery笔记03

jQuery添加属性：

        $('.box').attr('class' , 'one');
        $('.box').attr({
            name : 'haha',
            index : '1'
        });
        //获取属性值：
        $('.box').attr('index');
        //移除属性：
        $('.box').removeAttr('index');//如果不传参数，就什么都不干

jQuery中 .prop() 专门用来获取W3C标准的属性，返回 false / true（attr返回的是checked、selected、disabled，和webAPI不同）

if($('ul li input:checked').length == 4) 用冒号 : 属性 来筛选符合条件的元素

操作文本和内容：

        $('input').val()//获取
        $('input').val('666')//设置

• .html() => innerHTML()
• .text() => innerText()

获取宽高：

.width() / .height()content的宽高
.innerWidth() / .innerHeight()content + padding的宽高
.outerWidth() / .outerHeight()content + padding + border 的宽高
.outerWidth(true) / .outerHeight(true)content + padding + border + margin 的宽高

设置/获取坐标：

相对document：

        .offset() //获取，返回对象，得到的是数值
        .offset({
            left : 80, 
            top : 45
        }) //不需要单位！

相对最近的定位父元素：

.position() //只能获取，不能设置，返回的也是一个对象

出界值：

scrollLeft()//content相当于左侧滚动出去的距离
scrollTop()//content相当于顶部滚动出去的距离
设置值直接在括号内添加数值即可，如：
scrollLeft(100)

jQuery中的事件

on方法绑定事件：

on('事件类型' , '子元素selector-可省略-相当于事件代理' , '传递给事件处理函数的数据-不常用' , function (e) {})

        $('div').on('click mouseenter' , function (e) {
            if(e.type == 'click'){
                console.log('点击事件');
            }
            else if( e.type == 'mouseenter'){
                console.log('移入事件');
            }
        })

可以注册多个事件，用事件对象的type属性判断是哪个函数生效。

off方法解绑事件：

$('.box').off();不传参数会移除掉所有事件，传入事件名则移除相应的事件 （会连同代理的事件一并清除）

<div class="box"> <span> </span></div>

        $('.box').on('click', 'span' , function(){})//是给span注册的，由div代理
        $('.box').off('click','**')//会移除掉div代理span的点击事件

事件触发：

$('.box').trigger('事件名')，想触发谁的事件就谁调用，遵循冒泡

$('.span').triggerHandler('事件名')
- 通过代理注册的事件，此方法无法触发。
- 通过此方法触发的事件不会冒泡，不会执行默认事件。
- 多个符合条件只会触发第一个
- 返回事件处理函数中的返回值

jQuery事件对象：

        event.type //事件类型
        event.target //事件目标，点击谁就是谁
        event.currentTarget //相当于this
        event.delegateTarget  //寻找代理对象
        screenX / screenY //相对设备'屏幕'左上角的值
        offsetX / offsetY //相对元素左上角的值
        pageX / pageY //相对于页面左上角的值
        keycode //键盘值

.end()返回上一次状态

        each(function (index , element-是DOM对象) {

          })