l JQ设计思想？
- 选择网页元素
– 模拟CSS选择元素
– 独有表达式选择
– 多种筛选方法
- JQ写法
– 方法函数化
– 链式操作
– 取值赋值合体
- JQ与JS关系
– 可以共存，不能混用
Jq当中基本不用等号，而是用函数来传参，jq几乎无论调用什么都要带括号
几种混用写法
//alert( $(this).html() ); //jq的写法
//alert( this.innerHTML ); //js的写法
alert( $(this).innerHTML ); //错误的
alert( this.html() ); //错误的
l $()下的常用方法
- has() //包含 $('div').has('span').css('background','red');
- not() //过滤的反义词 $('div').not('.box').css('background','red');
- filter() //过滤 $('div').filter('.box').css('background','red');
- next() //下一个节点 $('div').next().css('background','red');
- prev() //上一个节点
- find() //找到div下的h2 $('div').find('h2').css('background','red');
- eq() //一组当中的第几$('div').find('h2').eq(1).css('background','red');
- index() //alert( $('#h').index() ); //索引就是当前元素在所有兄弟节点中的位置
- attr() //写属性 $('div').attr('title','456');
l $()下的常用方法
- addClass()
- removeClass()
- width() //width
- innerWidth() //width+padding
- outerWidth() //width+padding+border
- outerWidth(true) //width+padding+border+margin
- insertBefore() before() //区别 ：后续操作变了
- insertAfter() after() //区别 ：后续操作变了
- appendTo() append() //区别 ：后续操作变了
- prependTo() prepend() //区别 ：后续操作变了
- remove()
- on() off()
- scrollTop()
l $()下的常用方法 事件上的方法
- ev
- pageX //相对于文档，原生中clientX相对于可视区
- which //找键盘的键值
- preventDefault //阻止默认事件
- stopPropagation //阻止冒泡的操作 return false; //阻止默认事件 + 阻止冒泡的操作
- one() //事件只执行一次
- offset() //获取到屏幕的左距离alert( $('#div2').offset().left );
- position() //到有定位的父级的left值,把当前元素转化成类似定位的形式alert( $('#div2').position().left );
- offsetParent() //parent() : 获取父级 //offsetParent() : 获取有定位的父级
- val() //找到value值
- size() //4 像length alert( $('li').size() );
- each() $('li').each(function(i,elem){ //一参：下标 二参 : 每个元素
$(elem).html(i);
});
l $()下的常用方法
- hover()
- show() hide()
- fadeIn() fadeOut()
- fadeTo()
- slideDown() slideUp()