Jquery
-
jquery的作用
- 操作DOM
- 使用前先引用
- 解决了许多兼容问题
- 稳定版本1.8.3
-
获取元素
- 基本选择器
- $("#div")
- $(".div")
- $(“div”)
- 筛选器
- :first
- :not(selector)
- :even
- :odd
- :eq(index)
- :gt(index)
- 基本选择器
-
元素节点
- eq(num) 元素节点
- eq(num).next() eq(num)后一个兄弟节点
- eq(num).nextAll() eq(num)后面所有兄弟节点
- eq(num).prev() eq(num)前一个兄弟节点
- eq(num).prevAll() eq(num)前的所有兄弟节点
- eq(num).siblings() 除eq(num)外的所有兄弟节点
- 如果siblings()内写参数,则相当于筛选出元素中有参数的元素
-
属性操作
- $(“ul li:odd”):所有li的偶数项元素
- $(“ul li:even”):奇数
- $(“ul li:first”):第一个
- $(“ul li:last”):最后一个
-
克隆
- clone
- 不加参数,默认false,不克隆事件
- 参数true,可以克隆事件
<button>克隆</button> <ul> <li>111</li> <li>222</li> </ul> <script> $('button').on({ 'click': function () { $('ul li').eq(0).clone(true).appendTo('ul') // 默认是false // true可以克隆事件 } }) $('ul li').on('click', function () { $(this).animate({ "fontSize": 50 }) }) </script>
- clone
-
过滤、排除、包含
- 过滤 filter
- 排除 not
- 包含 has
-
添加、删除class
- addClass() 添加
- removeClass() 删除
-
特效
-
三种效果
- show() hide() 显示隐藏
- fadeIn() fadeOut() 淡入淡出
- slideUp() slideDown() 折叠与展开
-
hade的三个参数
- 第一个:速度,时间(毫秒)fast slow
- 第二个:匀速,linear 慢快慢(默认)swing
- 第三个:回调函数
-
自定义
- animate(p,[s],[e],[fn])
- stop([c],[j]):停止动画
- finish([queue]):完成动画
-
-
jquery链式操作
- 一行代码同时实现写入html、添加背景、以及添加事件
$('div').html('jquery').css('background', 'red').click(function () { alert(this.innerHTML) })
-
元素宽度
- offsetWidth = width+border+padding
- $(‘div’).width() = width
- $(‘div’).innerWidth() = width + padding
- $(‘div’).outerWidth() = width + padding + border
- $(‘div’).outerWidth(true) = width + padding + border + margin
- $(window).width() : 浏览器宽度
-
事件绑定
- on():绑定多个事件
- click() :点击事件
- off():解除事件
- one():只执行一次
- hover:鼠标移入移出
- toggle:切换
- blur:失焦
- dbclick:双击
- focus:获取焦点
- keydown:键盘按下
- select:input被选中触发该事件
- mousedown([[data],fn])
- mouseenter([[data],fn])
- mouseleave([[data],fn])
- mousemove([[data],fn])
- mouseout([[data],fn])
- mouseover([[data],fn])
- mouseup([[data],fn])
- scroll:鼠标滚动
- submit:表单提交
-
ajax 请求
- $.ajax(url,[settings])
- $.get(url,[data],[fn],[type])
- $.getJSON(url,[data],[fn])
- $.getScript(url,[callback])
- $.post(url,[data],[fn],[type])