jQuery基础部分

Posted 2020-08-21

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