jQuery基础部分

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()

 

posted @ 2016-11-29 23:55  花落无声Cjie  阅读(126)  评论(0编辑  收藏  举报