模块五 前端jQuery和bootstrap

jQuery

jQuery选择器
jQuery中Dom操作
js中事件
jQuery中动画自动清除定时器
Ajax

jquery 是js的一个库封装面向对象

write less do more
angular API 被 Vue取代
Vue 取代 jQuery 
react 流行

1、引包

var oDiv = document.getElementById('app');
js对象 ==》 jQuery对象
console.log($(oDiv));
$(oDiv).jQuery方法

console.log(jQuery)
jquery对象转换js对象
console.log($('#app')[0]);
console.log($('#app').get(0));
$('#app')[0].js方法

基础核心

入口函数
window.onload = function(){
alert(1);
}

jQuery
$(document).ready(function(){
alert(1);
})

简写
$(function() {
alert(2);
})

区别 1、执行时机 DOM结构加载完执行、 onload等全部资源加载完执行包括图片 2、可执行多次不会覆盖，顺序执行、 onload只执行一次后面会覆盖前面 3、可简写

对象转换、多个库之间的冲突
jQuery提供了一个解决多个库变量名冲突的方法

jQuery.noConflict();  将jQuery的$变量的控制权交给index.js

console.log($);

(function ($){
$(function(){
$('#box').css('color','red');
})
})(jQuery);

通过闭包的方式实现$变量传递，内部函数引用上层函数的参数，形成了闭包，在包内的函数可以随意引用$ === jQuery
jquery 选择器作用：选中当前的元素(返回一个jQuery对象)

基础选择器
层次选择器
$('#p1')
$('.box')
$('.box #p1')
$('.box li')
$('.box>ul>li')
$('.item1+li')  获取紧挨着的item1这个li标签的下一个标签
$('.item1~li')  除item1这个li标签之外的标签
$('p,ul,li')  组合选择器

过滤选择器

$('ul li:frist');
$('ul li:last');
$('ul li:not(.item2)');
$('ul li:even')
$('ul li:odd')

重要
$('ul li:eq(0)').text()
$('ul li:eq(2)').text()
$('ul li:gt(0)').text()
$('ul li:lt(2)').text()

内容过滤选择器

$('ul li:contains(张三)')
$('ul li:empty')
$('ul li:has(h4)').addclass('a')
$('.box p:hidden')
$('.box p:visible')

属性选择器

$('input[type=text]')
$('input[type=password]')

$('input:text')
$('input:radio')

表单选择器

$('input[type!=radio]')
$('input[type=button]')

jQuery选择器完善的处理机制

获取元素为空，默认不会报错，为空调用方法完善解决方法
if ($('input[type=button]').length > 0) {
$('input[type=button]').click(function(){
alert(123);
})
}else{
throw new Error('获取元素失败')
}

jQuery DOM操作
HTML DOM 操作

createElement 、before

append
入口函数  js  window.onload

$(function(){
var h3Tag = document.createElement('h3');
h3Tag.innerText = 'alex';
var htmlStr = '<h3>hello world</h3>'
父子标签之间操作
append() appendTo() 后置追加
// $('.box').append(h3Tag);
如果是网页中的元素，那么是一种移动现象
$('.box').append($('h3')); 
$('h3').css('color','red');

appendTo 应用，可以找到元素并创建点击事件  
$('<h4>老村长</h4>').appendTo('.box').css('color','green').click(function(){
console.log($(this).text())
})
前置追加
$('.box').prepend('<a href='#'>百度一线</a>');
$('<a href='#'>百度一线2</a>').prependTo('.box');

兄弟标签之间插入
$('h3').after('<h1>ceshi</h1>')
$('<h2>老男孩</h2>').insertAfter('h1')   将所有匹配元素插入到指定元素的后面
before
insertBefore

})

删除节点

remove()

$('button').click(function(){
alert(1);
既 删除节点，又删除节点上的事件绑定
consolo.log($(this).remove())
var btnjq = $(this).remove()
仅仅删除了节点，事件保留  $(this) 是js 转 jQuery对象 可以jQuery.方法 
var btnjq = $(this).detach()
$('.box').prepend(btnjq)

清空 div.box 
$('.box').empty();
console.log($('.box').text())
console.log($('.box').html())
// input val()
清空
$('.box').html(' ');

克隆元素复制节点 clone() 克隆元素不会绑定事件 clone(true) 会绑定事件

$('.clone ul li').click(function(){
$(this).clone(true).appendTo('.clone ul');

})

// 替换节点 
$('.replace p ').replaceWith('<i>hello</i>')
$('<i>hello</i>').replaceAll('p');

$('.replace p').wrap('<div class='box2'></div>')
删除包裹的父节点
$('.replace p').unwrap()
把所有段落内的字内容加粗
取到当前p标签的字内容 用strong标签包裹起来 
$('.replace p').warpInner('<strong></strong>')

})

其他方法

replaceWith()

属性操作
动态添加 获取属性
$(function(){
设置单个属性值
$('div').attr('id','box');
设置多个值
$('div').attr({'id','box',title:'盒子'})
console.log($('div').attr('name'));
console.log($('div').attr('class'));
2秒显示图片
setTimeout(function(){
$('img').attr({
src: '图片地址'
alt: '美女'
})
},2000);
})

类操作 addclass removeclass

$(function(){
var isRed = true;
$('.box').click(function(){
if(isRed){
$(this).addClass('activce');
isRed = false;
}else{
$(this).removeClass('active');
isRed = true;
}

方法二
if(!$(this).hasClass('active')){
$(this).addClass('active');
}else{
$(this).removeClass('active');
}

可以添加多个属性，空格隔开
$(this).addClass('active a b')

开关，自动添加class，有就不添加没有就添加
$(this).toggleClass('active');
})

})

值操作

html() text() val()

$(function(){
    获取html中的值
$('#content ul li').html();
设置html中的值  既获取文件也获取html 
$('#content ul li').html(`<h3>美女</h3>`);
仅仅获取文本的值
$('#content ul li').text();

$('input[type=text]').val()
$('input[type=text]').val('刷个')

select标签  使用文本值
$('#single').val('香蕉')
$('#multiple').val(['香蕉','橘子'])
给input设置值 要使用value属性值的值 不能使用文本的值
$('input').val(['B','女'])

})

筛选的方法

children() next() siblings()

入口函数简写
$(function(){
获取匹配元素子元素(亲儿子)集合
console.log($('.box').children())
console.log($('.box').next())
获取老爹
console.log($('.ul li').parent())
获取祖先辈们
console.log($('.ul li').parents())
console.log($('.box').prev())
$('ul li').eq(2).css('color','red');

})

sibings方法
点击事件 会自动给每个元素添加事件，js中需要for()循环，jQuery自动实现
$('button').click(function(){
// $(this).css('backgroundColor','red').siblings('button').css('background-color','#fff');
$(this).css('backgroundColor','red').parent().siblings('li').children().css('background-color','#fff');

})

cssDOM操作

$(function(){
console.log($('.box').css('color'))
设置值
$('.box').css('color','red')
$('.box').css('fontSize',20)
$('.box').css({
color: 'red',
fontSize: 20
})
获取当前窗口的相对偏移  获取出来是一个对象 里面保存着 top和left属性
var offset = $('p').offset()
console.log(offset);

$(window).scroll(function(){
var scrollTop = ${this}.scrollTop();
if (scrollTop > offset.top){
// console.log(’导航条出现了‘)
// $('.fixHeader').stop().slideDown(2000);
$('.fixHeader').stop().fadeIn(2000);
}else{
//$('.fixHeader').stop().slideUp(2000);
$('.fixHeader').stop().fadeOut(400);
}
})


})


width() heigt()

$(function(){
盒子大小
$('.box').width();
$('.box').height();
$('.box').width(300);
width + padding  盒子 + 内边距 
$('.box').innerWidth();
$('.box').innerHeight();
包括 width + padding + border  元素大小
$('.box').outerWidth();


})

鼠标事件

对应js中的事件
click dblclick(不常用)  mousedown/mouseup mousemoveu 移动事件（不常用）
mouseover()/mouseout()  鼠标穿过被选元素或者当前被选元素的子元素
mouseenter/mouseleave()  鼠标只穿过被选元素 主要用这个 
focus() 聚焦 blur() 失焦
keydown() keyup()

ready() 文档加载事件  scroll() 监听窗口滚动事件 

回调函数
function click(fn){
if(fn){
fn('1');
}
}

click(function(c){

})

$(function(params){

$('#box').click(function(){
alert($(this).text())
$(this).hide(1000,function(){
alert($(this).text());
})
})

想一个问题，双击和单机是否会冲突？如果解决冲突问题？之间的时间差 是300ms
$('#box')..dblclick(function(){
console.log('双击了')：
})

$('.box').mousedown(function(){
console.log('鼠标按下了')
})

$('.box').mouseup(function(){
console.log('鼠标抬起了')
})

$('#box').mousemove(function(){
console.log('移动了')
})

})


$(function(parmas){
$('.box').mouseover(function(){
console.log('111');
$('.content').show();
})
$('.box').mouseout(function(){
$('.content').hide();
})

使用下面防止 当前被选元素的子元素产生效果 
$('.box').mouseenter(function(){
console.log('111');
// 使用动画的时候，先要停止动画  在开启动画
$('.content').stop().slideDown();
})

$('.box').mouseleave(function(){
// 使用动画的时候，先要停止动画  在开启动画
$('.content').stop().slideUp();
})

})

$(function(){
$('input[type=text]').focus(function(){
console.log('获取焦点了')
})
$('input[type=text]').blur(function(){
console.log('失去焦点了')
})

//使用户无法使用文本框
$('input[type=text]').focus(function(){
this.blur();  // js blur() 方法 失去焦点
})

keydown

$(window).keydown(function(event){
console.log(event.keyCode);
空格 32 enter 13 esc 27
不同的按键做不同的事情
switch (event.keyCode){
case 32:
console.log('空格键触发了');
break;
case 13:
console.log('回车键触发了');
break;
default:
console.log('撤销触发了');
break;
}

})


})

表单事件

change() 
select()
submit()

$(function(){
仅仅适用于文本input  textarea select
$('input[type=text]').change(function(){
var val = $(this).val();
console.log(val);
if(/^\d{4}$/.test(val)){
console.log('输入正确);

}else{
console.log('输入错误);
$(this).css('borderColor','red');
}
})  

$('#select').change(function(){
console.log($(this).val());
})

$('form').submit(function(event){
阻止默认行为 点击submit 不提交 
event.preventDefault();
console.log(111);

var val = $('input[type=text]').val();
var oVal = $('#select').val();
console.log(val,oVal);
与后端发生交互行为
封装了ajax 与后端发生交互的技术
})

})

冒泡应用百度换肤

event.type 获取到事件的类型
event.prenentDefault() 阻止默认的事件行为
stopPropagation()  阻止事件冒泡
event.tagent() 获取到触发事件的元素

$('.box').click(function(){
alert('父元素点击了')
retuen false; // 会阻止冒泡并且会退出 
})
$('h3').click(function(event){
阻止冒泡
event.stopPropagation();
alert('子点击了');
})
$(document).click(function(){
alert('文档被点击了');
})


冒泡应用
$(function(){
$('.changefu').click(function(event){
// 阻止a标签的默认 行为  or 在a标签中添加javascript.vaid(0)
 event.preventDefault();
       //阻止冒泡
event.stopPropagation();
$('.slideDownView').stop().slideDown(500);

$('.slideDownView ul li a').click(function (event){
event.preventDefault();
// 这里也必须阻止冒泡
event.stopPropagation();
$(this).css('color','red').parent().siblings('li').children().css('color','#ffff')
})
})
// 解决document全局click会影响内部其他事件，return false 
$('.slideDownView,ul').click(function(){
return false;
})
// 点击a标签 触发了这里执行，还没有down up无效，显示卡主  
$(document).click(function(){
alert(111);
$('.slideDownView').stop().slideUp(500);
})
})

one() 只会触发一次
hide() show() 显示隐藏
fadeln() fadeOut() 只改变不透明度
slideUp() slideDown() 只改变高度
事件代理委托

$(function(){
用冒泡的方式  发现显示所有的li，还需要做筛选
$('ul').click(function(){
alert($(this).text())
})


$('ul li').click(function(){
alert($(this).text())
})

// 事件委托  原理: 利用冒泡的原理，把事件加到父级上  触发执行效果
// on('事件名','selector',callback)
$('ul').on('click','li',function(){
alert($(this).text())
})
将来做的事情
setTimeout(function(){
$('<li>博客内容</li>').appendTo('ul');
},5000);
})

合成事件

hover() 光标悬停 mouseenter mouseout 
toggle()  切换隐藏

$(function(){
$('.box').mouseenter(function(){
$(this).stop().css('background','green')
})
$('.box').mouseleave(function(){
$(this).stop().css('background','red')
})
== 
$(.box).hover(function(){
$(this).css('background','green')
},function(){
$(this).css('background','red')
})

var isShow = true;
$('#btn').click(function(){
if(isShow){
$('.box').stop().hide();
$(this).text('隐藏')；
isShow = false;
}else{
$('.box').stop().show();
$(this).text('显示')；
isShow = true;
}
==  动画效果 
$('.box').toggle();


})

})

jQuery动画效果

$(function(){
$('#btn').click(function(){
$('.box').hide(400);
隐藏 fadeIn() 显示
$('.box').fadeOut(400);
$('.box').slideUp(400);
$('.box').fadeTo(400,0,3);

$('.box').toggle(400);
$('.box').fadeToggle(400);
$('.box').stop().slideToggle(400);
它既能实现 上面jQuery动画效果，又能实现自定义动画效果
jquery插件  jQuery-color
$('.box').animate({
width: 300,
height: 300,
    颜色 需要jQuery的颜色插件配合  搜索  jQuery-color
    'font-size':  40
},1000,function(){

})


})
})

和风天气 ajax 第三方接口 Postman

todolist

ajax技术：在不重载页面的情况下，与页面进行局部更新


$.ajax({
url: url,
method: 'get',
success:function(res){
}else{
}
})

$.ajax({
url:url,
method: 'post',
data: {
username: 'ceshi',
password: '123',
},
success:function(res){

}
})

window.onload()
$(function(){

$.ajax({
// 第三方接口 和风天气 
url:'https://devapi.qweather.com/v7/weather/3d?location=101010100&key=xxx',
method:'get', // post
success:function(res){
var status = res.Heweather6[0].status;
if(status === 'ok'){
JSON
var cond_txt = res.HeWeather6[0].now.cond_txt;
$('#weather .cond_txt').html(cond_txt);
}
// console.log(res);
}

})
// 伪代码
$.ajax({
url:'',
method:'post',
data: {
username:'zhangsan',
password: $('input[type=password]').val();
}，
success:function(res){

}

})

})

百度天气

$(function(){

//获取未来三天的

$.ajax({
url:url,
mothod: 'get',
success: function(res){
console.log(res);
var daily_forecast = res.HeWeather6[0].daily_forecast;
// each();
$('.everyday_item').each(function(i){

                            var cond_code_d = daily_forecast[i].cond_code_d;
                            var tmp_max = daily_forecast[i].tmp_max;
                            var cond_txt_d = daily_forecast[i].cond_txt_d;
                            var wind_dir = daily_forecast[i].wind_dir;
                            var date = daily_forecast[i].date;
                            var week = moment(date).format('dddd');

$(this).empty();
$(this).append(`     
<p class="everyday_title">${getDay(i)}(${week})</p>
                                <img class="everyday_icon" src='./images/${cond_code_d}.png' />
                                <p class="everyday_temp">${tmp_max}℃</p>
                                <p class="everyday_cond_txt">${cond_txt_d}</p>
                                <p class="everyday_cond_wind">${wind_dir}</p>`)
})
},
error: function(err){
console.log(err);
}
})

            // 获取现在的天气
            function getNowWeather(url) {
                // 发送ajax到和风天气服务器获取数据
                $.ajax({
                    url: url,
                    method: 'get',
                    success: function (res) {
                        var status = res.HeWeather6[0].status;
                        if (status === 'ok') {
                            var now = res.HeWeather6[0].now;
                            var city = res.HeWeather6[0].basic.location;
                            // 实况天气图标码
                            var cond_code = now.cond_code;
                            // 天气状况
                            var cond_txt = now.cond_txt;
                            // 当前温度
                            var tmp = now.tmp;
                            // 体感温度
                            var fl = now.fl;

                            $('.city').html(city + ':');
                            $('.weatherImg').attr('src',
                                `./images/${cond_code}.png`)
                            $('.temp').html(tmp + '℃');
                            $('.cond_txt').html(cond_txt);
                            $('.fl').html(fl);

                        }
                    },
                    error: function (err) {
                        console.log(err);
                    }
                })
            }
            getNowWeather(
                'https://free-api.heweather.net/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976'
            );


})

moment 库 时间处理  根据day显示星期

todoList

$(function(){
// 模拟数据
var todoList = [
{ title:'小马哥1',done:false},
{ title:'小马哥2',done:false},
{ title:'小马哥3',done:false},
{ title:'小马哥4',done:true},
{ title:'小马哥5',done:true},

]
//  加载网页数据
load();
function load(){
var todoCount =0;
var doneCount = 0;
if(todoList && todoList.length >0 ){
// 有数据
}else{
// 无数据
$('#todolist').html('')
$('#todocount').html(todoCount);
$('#donecount').html(doneCount);
}
}   






})

data,i data['title'] == 》 data.title 对象获取value data.done

删除2个方法
- 数组删除元素 arr.splice(0,1) 删除数组索引删除几个元素 0 索引删除1个元素
- 获取索引方法 var i = $(this).parent().index();
更新数据
- 获取索引 attr('index')
- 替换数组中的内容 splice(i,0,todo) 转成js $()[0].js方法
编辑
数据持久化 localStorage.getItem setItem removeItem()
数据驱动视图

bootstrap 响应式介绍

会随着页面大小自动进行调整布局，响应式，手机端通用 name = "viewport" 当前宽度就是你设备宽度需要加入这个标签需要响应式

css3  @media 媒体查询   实际移动端很多问题，引出bootstrap  
响应式页面  
一套样式兼容所有设备

最小宽度是1200px >= 1200px

@media screen and(min-width:1200px){
body{
background-color: red;
}
}

@media screen and(min-width:900px) and (max-width:1199px){
body{
background-color: yellow;
}
}
@media screen and(max-width:960px){
body{
background-color: green;
}
}

bootstrap twitter 把html css js 全部封装通过对象调用实现各种功能目前使用版本3 框架

基础使用
栅格系统
全局的css样式
组件
css 高级语言 ==> Less Sass 写逻辑样式 vue 需要less编辑器
媒体查询视口设置

<meta name="viewport" content="width=device-width, initial-scale=1">

栅格系统

https://960.gs/
12栏 3 3 3 3   4 4 4  6 6   组合
[![06](/media/editor/bs2_20210426100917738029.png "06")](http://blog.myjishu.com/media/editor/bs2_20210426100917738029.png "06")

进度条 动态显示，需要修改：
[![07](/media/editor/bs3_20210426100955634920.png "07")](http://blog.myjishu.com/media/editor/bs3_20210426100955634920.png "07")

active   动态

模态框

$(function(){
$('#modal').click(function(){
$('#myModal').modal('show');
})
$('#save').click(function(){
$('#myModal').modal('hide');
})
})

补充：

和风天气  ajax
https://console.qweather.com/#/apps
Moment.js 是一个JavaScript 日期处理类库，用于解析、检验、操作、以及显示日期

浮动：
float、fix、absolute

bootstrap：页面排版

阻止默认标签默认行为 比如 a跳转 style = JavaScript.vaid(0)
字符串格式化拼接  ``  ecs下面的键  


js方法
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
注释：该方法会改变原始数组
splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串

change() 函数触发 change 事件，或规定当发生 change 事件时运行的函数。

清除数据
    localStorage.clear();
    load();

生活杂记，新的开始，新的征程

生活杂记，老运维blog站

模块五前端jQuery和bootstrap

jQuery

jquery 是js的一个库封装面向对象

jQuery动画效果

bootstrap 响应式介绍

bootstrap twitter 把html css js 全部封装通过对象调用实现各种功能目前使用版本3 框架

jQuery

jquery 是js的一个库 封装面向对象

jQuery动画效果

bootstrap 响应式介绍

bootstrap twitter 把html css js 全部封装 通过对象调用实现各种功能 目前使用版本3 框架

jquery 是js的一个库封装面向对象

bootstrap twitter 把html css js 全部封装通过对象调用实现各种功能目前使用版本3 框架