1.动态生成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="./lib/jquery.js"></script>
<input type="button" value="html添加" id="btn1" />
<input type="button" value="添加" id="btn2" />
<ul id="ua">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul id="ub">
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
</ul>
</body>
<script>
/*
目标：动态生成元素
jq 中有两种方式动态生成
jq 对象.html(满足html语法格式的字符串)
会覆盖旧的内容
2.先创建，然后在添加
var elements = $('标签') 然后可以添加属性
jq对象.text() 非表单
jq对象 .val() 表单
添加属性
jq 对象.attr(); 非表单
jq 对象.prop() 开关属性 selected disable
添加元素 父元素jq对象.append (子元素的jq对象)
*/
// 演示 html方法
$('#btn1').on('click',function(){
$('#ua').html('<li id="box">我是新来的</li>');
})
// 演示 先创建再添加
$('#btn2').on("click",function(){
// 先创建
var li =$('<li>')
// 操作元素内容
// jq 对象.text(内容)
li.text('大王叫我来巡山');
// jq 对象.attr(属性名,属性值) 开关jq 对象.prop
li.attr('id','ub-box');
// 添加
$('#ub').append(li);
})
</script>
</html>
2.动态生成小技巧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- jq的理念: write less, do more -->
<script src="./lib/jquery.js"></script>
</body>
<script>
/*
jq中的动态生成有很多的小技巧
$(满足html语法格式的字符串)
jq 对象.append(字符串|元素对象|jq对象)
var elements =$('<div><p><a href="#">淘宝</a></p></div>');
$('body').append(elements);
*/
$('body').append('<div><p><a href="#">淘宝</a></p></div>');
</script>
</html>
3.借来的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
1.打开的网站
2.打开F12或者右键 检测元素 找到network
3.先选中XHR分类
4.刷新
5.找数据
6.选中任意一条--点开
7.在Preview查看数据，在Response复制
8.新建一个文件 名字叫***.json 把数据粘进去 然后格式化
9.将后缀名json改为js 给数据赋值为一个变量 -->
</body>
</html>
4.模板字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
/*
ES6推出的新特性
模板字符串
固定样式
1.中间可以换行
2.可以解析变量和表达式
`${变量}`
` ${表达式}`
*/
var a = `李白斗酒诗百篇
八月秋高风怒号
卷我屋上三重茅
`;
console.log(a);
var name='多纳泰罗';
var age=2021;
birther=2022;
var str = `你好,我叫${name},今年${age-birther}岁`;
console.log(str);
</script>
</html>
5.箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="按钮" id='btn'>
<script src="./lib/jquery.js"></script>
</body>
<script>
/*
箭头函数 (参数)=>{函数体}
经常使用回调函数,使用传统的写法 function(){} 比较麻烦
作用就是来简化回调函数
1.本质还是一个函数
2.还有更简单的写法
如果只有一个参数 可以直接 参数=>{函数体}
如果函数体只有一行 可以写 参数=>函数体
可以有个参数 函数体只有一行
()=>函数体
如果函数体只有一行 并且你还把{}省略了 那么默认返回 return不能写
3.箭头函数的this不再是原来的this 如果函数里面要使用this 要想清楚是否是你想要的this
根据实际情况选择使用
*/
var fn = ()=>{};
// console.log(typeof fn);
// [].sort(function(a,b){
// return a-b;
// });
// [].sort((a,b)=>{
// return a-b;
// })
//省略{} 并返回
[].sort((a,b)=>a-b)
// 筛选数组中大于等于50的数
var arr = [100,52,48,24,99,75];
var temp = arr.filter(function(e){
return e>=50;
})
var temp = arr.filter(e=>e>=50);
console.log(temp);
// $('#btn').on('click',function(){
// console.log(this);
// })
$('#btn').on('click',()=>{
console.log(this);
})
</script>
</html>
6.删除元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="button" value="删除第一个" id="btn" />
<input type="button" value="株连九族式删除" id="btn1" />
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script src="./lib/jquery.js"></script>
</body>
<script>
// 目标：jq中删除元素 jq对象.jq对象.remove()
// 获取jq对象
var ul=$('ul');
var lis=ul.children();
$('#btn1').on('click',()=>{
// 第一种写法：
// $('ul li:first-child').remove();
// 第二种写法 通过下标为0
ul.children().eq(0).remove();
// 全删
lis.remove();
})
</script>
</html>
7.罗窝窝首页
$(function () {
//==================================动态轮播图
//动态生成轮播图
//1.得到数据 数组
// 2.遍历数组 生成一个符合html语法结构的字符串
// 3.放在结构中
var banners=banner.data;
console.log(banners);
html='';
banners.forEach(function(e){
html+=
`
<li data-id="0" class="show_image first" style="display: none;">
<a href="./traveldetail.html?id=${e.refId}"
class="show-pic">
<img src="${e.coverUrl}"/></a>
<a href="javascript:;" class="show-title dark">
<div class="date"><span class="day">15</span>/Oct.2020</div>
<h3>${e.title}</h3>
</a>
</li>
`
})
// //放入结构中
$('.show-image').html(html);
// =================点击小图出大图========================
var current = 2;
//因为图都是默认隐藏起来的 所以先显示一张图
//获取右侧的小图
var navs = $('.show-nav li');
// console.log(navs);
// 获取轮播的大图
var imgs = $('.show-image li');
// show如果被选元素已被隐藏，则显示这些元素：
imgs.eq(current).show();
// 给小图注册单击事件
navs.on('click',function(){
// eq()得到第n个dom元素的jq对象
imgs.eq(current).fadeOut(1000);
// index() 方法返回指定元素相对于其他指定元素的 index 位置。
// 这些元素可通过 jQuery 选择器或 DOM 元素来指定。
// 注释：如果未找到元素，index() 将返回 -1。
// jq对象.index()
var index = $(this).index();
// console.log(index);
// 同步current 索引
current = index;
imgs.eq(current).fadeIn(1000);
// 排他
// navs.removeClass('active');
// $(this).addClass('active');
// jq有一个式可以得到某个元素所有兄弟
// jq对象.siblings()
$(this).addClass('active').siblings().removeClass('active');
// 链式编程
})
//================================================= 自动轮播
// 实现自动轮播
// 1.获取元素
// 2.定时器
// 3.把当前的图片淡出,下一张淡入
setInterval(function(){
// 当前的图片淡出
imgs.eq(current).fadeOut(1000);
current = ++current%imgs.length;
imgs.eq(current).fadeIn(1000);
// 处理边框
navs.eq(current).addClass('active').siblings().removeClass('active');
},2000)
});
8.攻略页面遍历
/*
//==============================动态生成分类
1.得到数组
2.遍历 生成html
3.放到结构中
*/
var travel = strategyData.data;
var str = '<li class="on _j_tag"><a href="javascript:;">全部</a></li>';
travel.forEach(e=> {
str += `<li data-tid="${e.id}" class="_j_tag"><a href="javascript:;">${e.name}</a></li>`;
});
//放在结构中
$('.filter-tag').html(str);
//===============================点击更多切换样式
//点击更多和手气 实际上就是切换一个extend
$('._j_trigger_btn').on('click',()=>{
//第一次点的时候加上extend
$('.filter-tag').toggleClass('extend');
//改按钮的字 有extend 收起 没有更多
// hasClass()用来判断有没有这个样式 如果有返回true
// hasClass() 方法检查被选元素是否包含指定的 class。
// 语法
if($('.filter-tag').hasClass('extend')){
$('._j_trigger_btn').text('收起');
}else{
$('._j_trigger_btn').text('更多');
}
})
//=================================点击具体分类，切换内容
/*
点击攻略分类 切换内容
1.获取元素 ul下的li
2.注册点击事件
3,根据对应的分类 显示不同的内容
*/
$('.filter-tag li').on('click',function(){
// 根据分类的id进行分类 相同的id是一组
var id = this.dataset.tid;
if(id){
// id 要和strategyList这个数据的themeId是相等的
// var arr = strategyList.data.content.filter(e=>e.themeId ==id);
var arr = strategyList.data.content.filter(function(){
e.themeId ==id//返e的themeid等于id的值
});
}else{
// 如果没有id 说明点的是全部
var arr = strategyList.data.content.slice(0,10);
}
journey(arr);
})
function journey(arr){
var str = '';
arr.forEach(e=>str +=`<div class="item clearfix"><a href="/views/strategy/detail.html?id=${e.id}" target="_blank" class="_j_item"><div class="img"><img src="${e.coverUrl}"></div> <div class="detail"><h3>${e.title}</h3> <ul>
${e.summary}
</ul> <div class="extra"><span class="location"><i></i>${e.destName}</span> <span class="view"><i></i>${e.viewnum}</span></div></div></a></div>`);
console.log(str);
$('.guide-list').html(str);
}
6396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
