蓝桥web赛实用函数方法

zhijie
134 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第8天，点击查看活动详情。

js元素的遍历、子元素的获取

forEach()是数组的方法，通过document.getElementsByClassName()等的获取到的是一个元素集合。如果直接用元素集合取调用forEach()，会报错，提示没有这个方法。但是可以在空数组上通过call()方法调用forEach()，替换掉内部this指向，用元素集合替换掉原数组，具体如下：

<ul id="el-ul">
    <li></li><li></li><li></li>
</ul>
<script>
let ul = document.getElementById('el-ul')
// 获取子元素
let lis = ul.children;// 这里需要加个分号，因为下一个代码是[] 不加会出现语法解析错误
// 如果不想加分号，可以写成 Array().forEach.call(...)
[].forEach.call(lis,(item)=>{
    console.dir(item)
})
</script>

js-each.png

jq元素的遍历以及jq元素的获取

相比于原生js，jq封装了dom元素的遍历方法。each(),用法与forEach()类似。但元素注入的顺序不一样，.each()两个参数分别为：‘each(索引，dom元素)‘，∗∗先索引后才是元素，与forEach相反∗∗还有一点特别，jq可以直接在each区间内通过.each()两个参数分别为：`each({索引}，{dom元素})`，**先索引后才是元素，与forEach相反** 还有一点特别，jq可以直接在each区间内通过(this)来获取当前遍历到的对象，对象是通过$工厂加工过的，拥有jq的dom元素方法

<!-- 引入jq,使用百度cdn -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<ul id="el-ul">
    <li></li><li></li><li></li>
</ul>
​
<script>
let ul = $('#el-ul')
let lis = ul.children().each(function(index,el){
    // 1.  $(this)会指向每个被遍历到的li
    console.dir($(this))
    //2.  console.dir($(el)) el就是li的dom，通过$()加工为jq对象
})
</script>

jq-each.png

元素查找。（字符串和数组都一样）

因为字符串本身是字符数组

  1. 元素查includes({待搜索的字符串}, {开始位置，默认0})，返回值boolean 查找数字中是否有“world”字符串
let isInclude = 'hello world'.includes("world")
// true
// 返回值为布尔类型，查找到返回true，查找不到返回false
  1. 数组元素查找[].find(function(item){ return {布尔值}})，返回满足条件的元素

find方法会遍历每一个元素，每次遍历过程中只要放回一个true，那么函数会返回遍历那一次的元素.

否则反回undefined

let resultItem =  ['red','green','yellow','purple'].find(function(item){
    // 遍历数组项，如果返回true，find停止查找并返回当前值
    return item == "red"
})
console.dir(resultItem)
// 结果 ： red
// 返回值为当前值，可能是任何类型
  1. 元素筛选[].filter(function(item){return {布尔值}})，返回值筛选后的数组 遍历每个元素，每次遍历都可以return一个布尔值，如果返回true那么当前元素会被添加到新的数组中，

遍历所有然后将有return true的元素都保存到一个新数组中，作为返回值

let resultArr =  ['red','green','yellow','purple'].filter(function(item){
    return item.length > 3
})
console.dir(resultArr)
// 结果 ： ['green','yellow','purple']
// 返回的是一个数组
  1. 检查数组中是否有元素满足条件[].some(function(item){return 布尔值})，返回值boolean some()方法同样是筛选，与前两种不同的是返回的结果是一个布尔值，找到满足条件的就放回true，否返回false
const items = [
  { name: 'T-shirt plain', price: 9, discount: true },
  { name: 'T-shirt print', price: 20 },
  { name: 'Jeans', price: 30 },
  { name: 'Cap', price: 5 }
];
// 查找items中是否有price字段>=30的
let flag = items.some(item=>{
    return item.price >= 30
})
console.dir(flag)
// 结果 ： true
// 查找items中是否有price字段>=90的
let flag2 = items.some(item=>{
    return item.price >= 90
})
console.dir(flag2)
// 结果 ： false

注：some()中只要有一个返回了true就会停止遍历并返回true

jq元素的显示和隐藏

//直接显示和隐藏
$('#el').hide()
$('#el').show()
$('#el').toggle()
​
// 淡入淡出
$('#el').fadeIn()
$('#el').fadeOut()
$('#el').fadeToggle()

jq动画

$('#el').anmimate({从速键值对},{过度时间}，{动画时间单位秒}。function(){动画结束后的回调函数})

<div id="box" style="width:50px;height:50px;backgorund:red;"></div>
​
<script>
    $('#box').animate({transform:'scale(.5)'},fast,function(){
        console.dir('动画结束')
})
</script>

再一个属性上定义多个animate()的话

多个之间是按序执行，多个animate()会拍成一个队列

<div id="box" style="width:50px;height:50px;background:red;"></div>
​
<script>
//多个之间是按序执行
$('#box').animate({width:'400px',height:'200px'},3000,function(){
console.dir('动画结束')
})
$('#box').animate({opacity:'.2'},3000,function(){
console.dir('动画结束')
})
</script>

可以用 animate() 方法来操作所有 CSS 属性吗？测试了实际上没有全部。

<!-- 使用的是这个cdn -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- 没有生效的属性：
backgorundColor
tranform:'translate(100,0)'
background
​
​

最后提一点，animate动画是一次性的，且动画结束后不会回到最初状态

生成随机数

随机函数 Math.random()会生成范围：(0-1] 的一个小数，强调：不包括1！不包括1！不包括1！！！ 向上取整Math.floor()对一个小数向下取整， Math.floor(1.n ) 得到1

向上取整Math.ceil()对一个小数向下取整，Math.floor(x.n ) 得到 x+1

Math.floor(Math.random()*10) 会生成范围：(0-9) 的一个整数

Math.ceil(Math.random()*10) 会生成范围：(1-10) 的一个整数

当需要生成 11-19不包括19的整数时，可以用 Math.floor(Math.random()*8)+11,这里的8是由19-11来

avatar
文章
阅读
粉丝