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

jQuery

时间:2018-01-02 11:42:59      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:inpu   处理   bind   取消   等价   dom2   html   bsp   div   

##总结
今天开始学习jQuery库,经过老师讲解和重写练习,发现相比源生代码,jQuery实在好用太多,而且有很多我们熟悉的方法,除了语法不同,如果掌握好相互之间的转换,对于我们做开发非常提高效率。

接下来就是尽快熟悉其使用规则,方便更快的开发。
***
技巧:
封装函数,考虑各种情况,设置默认值标记[ ]

***
- 特点:
   - 让代码简洁
    - 兼容性很好
- 版本
    - 1.X //支持IE8以前的浏览器 1.4
    - 2.X
    - 3.X //最新
    - 1.2并存 3是2的升级版
- download
    - 正常版       //源代码,看
    - min版      // 压缩版,用
-   语法
    - 全局变量
    - jquery(“#d1”).html() //html等价于innerHTML $
- 和源生代码互转
    - $("#d1").get() //转源生 得到一个集合 参数为下标
    - $("#d1")直接[0] //转源生
    - $(d1) //转jQuery 节点名
- 遍历
    - each()
        - 集合
        - 里面的this代表源生对象
        - 第一个参数是下标 ,第二个参数是源生对象element
    - for循环
- 获得长度
    - length 属性
    - size()方法
- 对像名.eq(i) //遍历时转成jQuery对象

- 选择器
    - even  以下标为标准
    - odd 以下标为标准
    - eq(index)
        - $("#d2 p:eq(0)")
    - gt(index)
    - lt(index)
- 属性
    - attr()
        - 添加多个属性用JSON,特殊属性除外
        - removeattr
    - prop()
        - 对特殊属性设置或获取
        - removeprop
- Class
    - toggleCalss //切换
- 事件
    - click() 回调函数
- 方法
    - html()
    - text()    
    - val()
    - 不传参就是获取,传了就是设置

- 筛选
    - first()

- 文档处理
    - append(‘<P></P>’);
    - $(‘<p></p>’).appendTo("#d1");
    - prepend(); 直接添加到前面
    - before
    - after
    - wrap  每一个包一个
    - wrapAll  所有的包在一起
    - wrapIner  把指定元素包在节点里面
    - unwrap    取消包裹
    - replaceWith       替换
    - empty     只删除节点内容
    - remove    删除自己
- CSS

    - $("#d1 p").css ({"color","red"}) 单个没有花括弧 //设置
    - $("#d1 p").css("backgroundColor")//获取最终样式
    - offset() 属性.left .top 元素相对于视口的位置
    - position() 元素相对于父级的位置
- 事件

    - 添加没有的事件

    $("#ipt").on("input",function(){

    console.log($(this).val())

    })  
    - 一个事件可以添加多个方法,DOM2,结合优点,解决兼容性问题
    - 删除事件 off();

- 方法的区别
    - on:一次性添加多个方法,兼容浏览器 //相比于delegate 会全部选择到
    - one:事件只有一次
    - bind: 早期版本的事件处理方法,现在被on替代了
    - live:过时,事件委托用
    - delegate : 现在,事件委托 (“选择器”,“事件”,回调)


jQuery

标签:inpu   处理   bind   取消   等价   dom2   html   bsp   div   

原文地址:https://www.cnblogs.com/opacity-m/p/8169608.html

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