##总结
今天开始学习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 : 现在,事件委托 (“选择器”,“事件”,回调)