首页 > 代码库 > jquery基础知识点总结

jquery基础知识点总结

2024-09-06 16:37:04   219人阅读

Jquery是一个优秀的js库，它简化了js的复杂操作，不需要关心浏览器的兼容问题，提供了大量实用方法。
Jquery的写法
方法函数化
链式操作
取值赋值合体]
$(“p”).html();   取值
$(“p”).html(‘hello’);  赋值
（当一组元素的时候，取值是一组中的第一个，赋值是一组中的所有元素。）
Jq与js可以共存，不能混用
主要的筛选方法
has()   not()   filter()
next()   prev()    find()   eq()   index()    attr()   indexOf()
Attr()   对属性进行操作，给元素添加属性且赋值，或者取得某个属性的值。
   $(“div”).attr(‘title’,’123’);
        <div title=”123”></div>
Filter()   对一组元素进行筛选，过滤
满足条件的会被留下来
$(‘div’).filter(‘.box’).css(‘background’,’red’);
含有box类的div背景颜色会改变
Not()   filter的反义词
       $(‘div’).not(‘.box’).css(‘background’,’red’);
       不含有box类的div背景颜色会改变
（filter和not是针对当前元素的，has是针对元素里面的内容的）
Has()  包含的意思
                    $(".box").has(‘#ul‘).css("background","#ccc");
        $(“.box”).has(span).css(“background”,“red”);
Next()  找到当前元素的下一个兄弟节点
Prev()  找到当前元素的上一个兄弟节点
Find()   查找
$(‘div’).find(‘h2’).css(‘background’,’red’);
eq()   获得对应下标的元素
         $(‘div’).find(‘h2’).eq(1).css(‘background’,’red);
Index();   获得当前元素的索引。索引就是当前元素在所有兄弟节点中的位置
$(‘#h’).index();
编写选项卡
<input type="submit" value=http://www.mamicode.com/"111">
<input type="submit" value=http://www.mamicode.com/"222">
<input type="submit" value=http://www.mamicode.com/"333">
<div id="div">
    <div class="active">111</div>
    <div>222</div>
    <div>333</div>
</div>

<script>
    $(function(){
        $("input").click(function(){
            var i=$(this).index();
            $("#div div").eq(i).show().siblings().hide();
        });
    });

</script>
Jquery中常用的属性操作方法
addClass()
   添加类名
$(‘div’).addClass(‘box2 box3’);
removeClass()   
         删除类名
$(‘div’).removeClass(‘box2 box3’);
width()   
         获取元素的宽度，不包含padding
Height()
         获取元素的高度
innerWidth()  
         获取元素不包含变宽的宽度(包含padding)
outerWidth()
         获取元素外的宽度，包含padding  border
         outerWidth(true)  (包含padding,border,和margin)
节点操作常用方法
insertBefore()  插入到节点的前面（动词）剪切的功能
$(‘span’).insertBefore($(‘div’));
<span>1213</span>
<div>2345</div>
before()      节点的前面插入某元素（名词）
insertAfter()    插入到节点的后面（动词）(原生js中没有这个方法)
         $(‘div’).insertAfter($(‘span’));
         <span>1213</span>
         <div>2345</div>      
after()        节点的后面插入某元素（名词）
appendTo()
         插入到节点内部所有子节点的后面（动词形式）
append()  （名词形式）
prependTo()
插入到节点内部所有子节点的前面（动词形式）
prepend() （名词形式）
区别（后续操作不一样，）
$(‘span’).insertBefore($(‘div’)).css(‘background’,’red’);
$(‘div’).before($(‘span’)).css(‘background’,’red’);
remove()    删除节点
on()
$(‘div’).on(‘click mouseover’,function(){
     Alert(123);
})
自定义事件,也可以写多个事件，来针对一个操作
         $(‘div’).on({
                   ‘click’:function(){
                   Alert(123);
},
‘mouseover’:function(){
         Alert(456);
         $(‘div’).off(‘mouseover’);
}
});
off()  关闭它的所有事件操作
scrollTop() 获取滚动条的滚动距离
         $(document).click(function(){
                   Alert($(window).scrollTop());
})
弹窗(popup)，动态创建
创建标签
关键点，弹框的位置，绝对定位，position : absolute;
Left:  (窗口宽度 - 弹框宽度)/2；
Top:  (窗口的高度 – 弹框的高度)/2 + 滚动条的高度；
监听窗口大小变化和滚动事件
$(window).on(‘resize scroll’,function(){
         
})
事件细节
Event对象，对事件细节进行操作
  ev  :兼容后的even对象
ev.pageX  (相对于文档的)
ev.clientX  (相对于可视区，可视区加上滚动条距离就是pageX)
ev.pageY  (相对于文档的)
ev.clientY  (相对于可视区的)
ev.which  :  keyCode  找键盘的键值  回车（13），可以记录鼠标的键值
阻止默认事件    ev.preventDefault();
阻止冒泡的操作  ev.stopPropagation();   return  false; // 阻止默认事件 +阻止冒泡的操作
One()   表示事件只执行一次
$(‘div’).one(‘click’,function(){
         alert(123);
})
offset()   获取元素距离屏幕的距离
$(‘div’).offset().left
$(‘div’).offset().top
Position()  获取元素距离父元素的距离，元素被定位，margin不算，只能是left值，
                     到有定位的父级的left值，把当前元素转化成类似定位的形式
$(‘div’).position().left;
$(‘div’).position().top;
parent()   获取父级
offsetParent()   获取有定位的父级
val()
$(‘input’).val();
size()   获取一组元素的长度，像length
$(‘li’).size();
each()   相当于原生的for()循环  each()当中可以接受回调函数
$(‘li’).each(function(下标，元素)){
}
$(‘li’).each(function(I,elem){
         $(elem).html(i);
})
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
一参（下标），二参（每个元素）
编写拖拽
$(window).width()             //浏览器当前窗口可视区域宽度,不包含滚动条
$(window).height()            //浏览器当前窗口可视区域高度，不包含滚动条
$(document).width()         //浏览器当前窗口文档对象宽度，不包含右边的滚动条的宽度
$(document).height()           //浏览器当前窗口文档的高度，包含了滚动条的高度
alert($(document.body).width());                //浏览器当前窗口文档body的宽度
alert($(document.body).height());                //浏览器当前窗口文档body的高度
$(document.body).outerWidth(true)     //浏览器当前窗口文档body的总宽度 包括border padding margin
$(document.body).outerHeight(true)    //浏览器当前窗口文档body的总高度 包括border padding margin

jquery基础知识点总结


联系
我们