蓝桥web挑战：js、jq常用方法

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

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

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

<!-- 引入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>

js对于dom节点类名的添加和删除

可通过dom节点的classList来获取所有的类名。

<div class="demo a b  c ds ss" id="cls"></div>

<script>
let cls = document.getElementById('cls')
// 获取所有类名列表（domTokenList）
console.dir(cls.classList)
// 给节点添加一个类名 add('类名')
cls.classList.add("color")
// 删除节点的一个类名remove("类名")
cls.classList.remove("a")
// 检测类名是否存在 contains
consle.dir(cls.classList.contains('color'))
/* 结果 ： true
*/
// 替换类名 replace('原来类名','新类名')
cls.classList.replace("a",'zz')
console.dir(cls.classList)
/*
结果： 
DOMTokenList(6) ["demo", "b", "c", "ds", "ss", "color", value: "demo b c ds ss color"]
*/
</script>

jq对于class的操作

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<div class="demo a b  c ds ss" id="cls"></div>

<script>
	let cls = $('#cls')
	// 判断类名是否存在 hasClass('类名')
	cls.hasClass('a')
	// 添加类名 addClass('类名')
	cls.addClass('color')
	// 删除一个类名
	cls.removeClass('b')

	console.dir(cls.attr('class'))
	// 结果 ： ”demo a  c ds ss color“
</script>

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

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

1. 元素查includes({待搜索的字符串}, {开始位置，默认0})

let isInclude = 'hello world'.includes("world")
// true
// 返回值为布尔类型，查找到返回true，查找不到返回false

2. 数组元素查找[].find(function(item){ return {布尔值}})

let resultItem =  ['red','green','yellow','purple'].find(function(item){
    // 遍历数组项，如果返回true，find停止查找并返回当前值
    return item == "red"
})
console.dir(resultItem)
// 结果 ： red
// 返回值为当前值，可能是任何类型

3. 元素筛选[].filter(function(item){return {布尔值}})

let resultArr =  ['red','green','yellow','purple'].filter(function(item){
  	return item.length > 3
})
console.dir(resultArr)
// 结果 ： ['green','yellow','purple']
// 返回的是一个数组

4. 检查数组中是否有元素满足条件[].some(function(item){return 布尔值})，返回值boolean

const items = [
  { name: 'T-shirt plain', price: 9},
  { 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

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

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