在某网课学习前端笔记整理js篇32-jquery第一节

jquery第一节

---

一.关于jquery

​ jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。------来自百度百科
​ jq是js封装的一个类库 dom操作 ，可以更方便。1.x 兼容低版本的ie，2.x 删除了一些 不兼容， 3.x 完全不兼容低版本ie。

二.一些jquery方法

方法太多，用的时候去http://jquery.cuishifeng.cn/查就好了。

​ 在js中，如果js代码在html代码上面，由于会自上而下执行，会出现js获取不到未加载的页面的情况，可以用window.onload方法来等页面加载完再执行js代码。jquery中提供了$(function())的方法，可以起到差不多的效果，而且还可以写多个，并不会覆盖。

example1

$(function(){
   alert(1); 
});

jq选择器

#id
.class
tagName
:first
:odd  奇数
:even 偶数
:gt(index) 大于index
:lt(index) 小于index

example2

<div id='box'>
    <ul>
        <li class="item">我是li1</li>
        <li class="item">我是li2</li>
        <li class="item">我是li3</li>
        <li class="item">我是li4</li>
        <li class="item">我是li5</li>
    </ul>
</div>
<script src='http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js'></script>
<script>
    //下标是从0开始的
    $(function(){
        console.log($('#box'));
        console.log($('.item'));
        console.log($('div'));
        console.log($('li:first'));
        console.log($('li:odd'));
        console.log($('li:even'));
        console.log($('li:gt(2)'));
        console.log($('li:lt(2)'));
    });
</script>

每个jquery对象都是不一样的。

example3

console.log($('#box')===$('#box'));//false

jquery对象可以和js对象转换的，通过get方法或者直接[index]也可以。

example4

var $box = $('#box'),
    box = $box.get(0),
    box2 = $box[0],
    box3 = document.getElementById('box');
console.log(box===box3,box2==box3);//true true

jquery对象的遍历和样式设置：

example5

<div id='box'>
    <ul>
        <li class="item">我是li1</li>
        <li class="item">我是li2</li>
        <li class="item">我是li3</li>
        <li class="item">我是li4</li>
        <li class="item">我是li5</li>
    </ul>
</div>
<script src='http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js'></script>
<script>
	//遍历jquery对象
    $('li').each(function(){
        //这里的this是js对象
        console.log($(this).index(),$(this).html());
        //设置css样式
        console.log($(this).css('background-color','green'));
    });
    //通用遍历写法
    $.each($('li'),function(){
        //这里的this是js对象
        console.log($(this).text());
    });
</script>

一些筛选方法：

example5

<div class="wrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
</div>

<div class="haha">
    <div>123</div>
    <div>123</div>
    <div>123</div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    /*
            筛选
                方法
         */

    $('.wrap div').text("我是div");
    $('.wrap').find('div').text("我是div")
    $('.wrap').children().text('我是div');
    $('.wrap').children().eq(2).text('我是div');


    $('.wrap').children().eq(2).nextAll().text('我是div');
    $('.wrap').children().eq(2).prevAll().text('我是div');
    $('.wrap').children().eq(2).siblings().text('我是div');

    // 4里边写我是div  上边的全部写 我是div prev 下边的写 我是div next
    $('.wrap div').eq(3).text('我是div');
    $('.wrap div').eq(3).nextAll().text('我是div next');
    $('.wrap div').eq(3).prevAll().text('我是div prev');

    $('.wrap div').eq(3).text('我是div').siblings().text('我是div next').end().prevAll().text('我是div prev');

    console.log($('.wrap').add($('#box')));
    $('.wrap div').add($('.haha div')).css('color', 'red');
</script>

查找祖先元素的几个方法：

 parent()
 只能找一级 不能跨级查找
 closest()
 必须要加参数的 可以跨级查找的 找到就不找了
 parents()
 不给参数 会把整个文档获取到  直到找不到为止

jquery的方法return false不仅会阻止默认事件，还会阻止冒泡。

example6

$('.c').mousedown(function(e){
    // e.stopPropagation();
    alert(3);
    // 既可以阻止默认事件 也可以阻止冒泡
    return false;
})

jquery的属性操作： html(),val(),text(),attr(),prop()(用的比较少),removeAttr(),removeProp()。

example7

<div id = 'div' value='111'>222</div>
<script>
	console.log($('#div').val());
    console.log($('#div').attr('value'));
    console.log($('#div').attr('value','3333').attr('value'));
    console.log($('#div').removeAttr('value'));
</script>

jquery对象的位置获取的方法：

方法	描述
position()	定位父级的位置（top/left）
offset()	相对窗口的位置（left/top)
width()	元素的宽度
innerWidth()	元素的宽度+padding
outerWidth(boolean)	元素的宽度+padding+border+margin（看参数）

example8

var $box = $('#box');
console.log($box.position().left,$box.position().top);
console.log($box.offset().left,$box.offset().top);

其他的一些方法：

方法	描述
scroll(callback)	滚动条滚动。
off(eventname)	清除事件。
show()	显示元素。
hide()	隐藏元素。
scrollTop()	元素的滚动条的距离顶部的位置。
animate()	动画。