jQuery入门到精通（四）连载

入门jQuery

1.jQuery操作文本值

1.1 html([val | fn]) 和原生JS中innerHTML一样，对html文本值进行操作，输入含有标签的元素会自动插在自己设置的div容器的网页的html中。代码图像如下所示。

var btns = document.getElementsByTagName('button');
btns[0].onclick = function (){
    $('div').html('<p>我是段落<span>我是span</span></p>')
}
//第一个按钮
<button>设置html</button>  
<div style="width: 100px;height: 100px;border: 1px solid #000;"></div>

1.2 text([val | fn])和html([val | fn])类似，和原生JS中的innerText一摸一样，输入的文本内容会自动插入自己设置的div容器里面，书写相关标签元素也会当作文本内容插入，代码图像如下所示。

var btns = document.getElementsByTagName('button');
btns[0].onclick = function (){
    $('div').text('<p>我是段落<span>我是span</span></p>')
}
//第一个按钮
<button>设置text</button>
<div style="width: 100px;height: 100px;border: 1px solid #000;"></div>

1.3 val([val | fn | arr])文本内容在网页输入，打印在控制台

var btns = document.getElementsByTagName('button');
btns[0].onclick = function (){
    $('input').val('请输入内容')
}
btns[1].onclick = function (){
    console.log($('input').val());
}
//第一个和第二个按钮
<button>设置value</button>
<button>获取value</button>
<div style="width: 100px;height: 100px;border: 1px solid #000;"></div>
<input type="text">

2.jQuery操作CSS样式

2.1 逐个设置

$('div').css('width','100px');
$('div').css('height','100px');
$('div').css('background','red');

2.2 链式设置（ps：链式设置如果大于三步建议分开，否则阅读性会变差！）

$('div').css('width','100px').css('height','100px').css('background','blue');

2.3 批量设置

$('div').css({
    width:"100px",
    height:'100px',
    background:'green'
});

2.4 在控制台获取css样式值，譬如：

console.log($("div").css("width"));

3.jQuery位置和尺寸操作

举个例子，在网页上设置两个包含关系的块盒，为了方便排版，设置内样式

<div class="father" style="width: 200px;height: 200px;background: red;border: 50px solid #000;margin-left: 50px;position: relative">
    <div class="son" style="width: 100px;height: 100px;background: blue;position: absolute;left: 50px;top: 50px"></div>
</div>
<button>获取</button>
<button>设置</button>

3.1 位置操作

var btns = document.getElementsByTagName('button');
//监听获取
btns[0].onclick = function (){
    //获取元素的宽度
    console.log($('.father').width());
    //offset([coordinates]) 作用：获取元素距离窗口的偏移量
    // console.log($('.son').offset().left);
    //position() 作用：获取元素距离定位元素的偏移量
    // console.log($('.son').position().left);
}

3.2 尺寸操作

//监听设置
btns[1].onclick = function (){
    //设置元素的宽度
    // $('.father').width('500px')

    $('.son').offset({
       left:10
    });

    //注意点：position方法只能获取不能设置
    $('.son').position({
        left:10
    });
}

4.jQuery的scrollTop方法

一样，依然设置html内容，一个容器和两个按钮，这里讲解一下小知识，前端工程师为了测试页面某些区域的容错量，一般都会写“lorem +Tab键”生成一堆乱英文充满区域，数量不够也可以lorem+数字 +Tab键即可，像border: 1px solid #000;最常见的边框设置，也可以通过bd+ +Tab键快速生成

<div class="scroll" style="width: 100px;height: 100px;border: 1px solid #000;overflow: auto">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab autem beatae commodi consequuntur deserunt distinctio dolorem ea, facere fugit harum illo in ipsa libero nemo odio quam rerum saepe voluptatibus.
</div>
<button>获取</button>
<button>设置</button>

4.1 获取滚动偏移位数值在控制台输出

var btns = document.getElementsByTagName('button');
btns[0].onclick = function (){
    // console.log($('.scroll').scrollTop());
    //注意点：为了保证浏览器的兼容性，获取网页滚动的偏移位需按照如下写法
    console.log($('body').scrollTop()+$('html').scrollTop());
}

4.2 设置滚动的偏移位

btns[1].onclick = function (){
    //注意点：为了保证浏览器的兼容性，设置网页滚动的偏移位需按照如下写法
    // $('.scroll').scrollTop(300);
    $('html,body').scrollTop(300);
}

5.jQuery事件绑定与解绑

5.1 jQuery中的两种绑定方式和特点： 1、eventName(fn); 编码效率略高/部分事件jQuery没有实现，所以不能添加。2、on(eventName,fn);编码效率略低/所有js事件都可以添加。注意点：两者都可以添加多个相同或者不同类型的事件，不会覆盖。

$('button').click(function (){
    alert('hello world')
});
$('button').on('click',function (){
    alert('hello people')
});
//另一种写法：譬如
function test1(){
    alert('nice to meet you')
}
$('button').click(test1);

5.2 jQuery的解绑，off()方法：三种方法：1、不传参，会删除所有参数 2、传递一个参数，会移除指定类型的事件 3、传递俩个参数，会移除指定类型的指定事件。譬如：

$('button').off();
$('button').off('click');
$('button').off('click',test1);

https://blog.csdn.net/qq_53123067/article/details/124471170?spm=1001.2014.3001.5502

https://blog.csdn.net/qq_53123067/article/details/124642589?spm=1001.2014.3001.5502

喜欢的可以点赞关注加评论，你的支持就是博主写作的最大动力！

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/140151.html