jQuery入门到精通（四）连载，html5移动web开发指南

最新推荐文章于 2024-11-02 15:48:17 发布

高手程序员

最新推荐文章于 2024-11-02 15:48:17 发布

阅读量472

点赞数 11

分类专栏： 2024年程序员学习文章标签：前端 jquery html5

本文链接：https://blog.csdn.net/2401_83621136/article/details/137239013

版权

2024年程序员学习专栏收录该内容

286 篇文章 1 订阅

订阅专栏

本文介绍了jQuery中text()和val()函数用于动态插入文本，CSS样式设置的方法，包括逐个、链式、批量设置，以及position和scrollTop在定位元素和滚动条方面的应用。作者分享了Web前端开发的学习资料和面试题资源，旨在帮助前端工程师系统学习和提升技能。

摘要由CSDN通过智能技术生成




![](https://img-blog.csdnimg.cn/c7f0882887e34ded929571d8d7267b2c.png)



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

}

//第一个按钮

设置text




![](https://img-blog.csdnimg.cn/6f6d65764d644787ad5d46209db45480.png)



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

}

//第一个和第二个按钮

设置value

获取value




### 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="son" style="width: 100px;height: 100px;background: blue;position: absolute;left: 50px;top: 50px"></div>

获取

设置




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键快速生成

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。