jq引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title
</title>
</head>
<body>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
// js - ES语法 | 浏览器(BOM) window.* | 文档(DOM window.document) document.*
// window.alert('js code');
// window.document.write(123)
// window.print()
// 如何写jq代码
console.log(jQuery);
window.owen = 'Owen';
console.log(window.owen);
console.log(owen);
console.log($);
console.log($owen);
</script>
</html>
View Code
操作页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>标题
</h1>
<p class="p1">p11111111111111111111111111
</p>
<p class="p2">p22222222222222222222222222
</p>
<div>
<b>div的加粗内容
</b>
</div>
<form action="">
<input type="text">
</form>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
// 1.jq选择器 - 得到的是jq对象 - jq对象可以调用jq库的所有功能
// $('css语法选择器')
let h1 = $('h1');
console.log(h1);
let p1 = $('.p1');
let p2 = $('p:nth-of-type(2)');
console.log(p1, p2);
// 想通过js对象获取第2个p的文本内容
let ps = $('p');
console.log(ps);
let _p2 = ps[1]; // jq对象可以理解为存放了js对象的数组
console.log(_p2.innerText);
// 想通过jq对象获取第2个p的文本内容
p2 = $(_p2);
console.log(p2.text());
// 总结：
`
1. $('css3选择器语法') 就是jq选择器，获得的是jq对象，jq对象可以理解为存放了js对象的数组 （存放了几个js对象不需要关心）
2. jq对象转换为js对象 - jq对象[js对象所在索引] - 可以使用js的语法
3. js对象转换为jq对象 - $(js对象) - 可以使用jq的语法
`;
</script>
<script>
// 操作页面的三步骤
// 1.获取标签
// 2.绑定事件
// 3.操作标签
// $('h1').click(function (ev) {
// // jq的事件对象，但对js事件对象做了完全兼容
// console.log(ev);
// console.log(ev.clientX);
// console.log(ev.clientY);
// })
// $('h1').on('click', function (ev) {
// console.log(ev);
// })
$('p').click(function () {
// 在jq事件中的this还是js对象，如果要使用jq功能，需要将this转换为jq对象
console.log($(this));
console.log($(this).text());
});
// 文本
// $div.text() 文本内容
// $div.html() 标签内容
// $inp.val() 表单内容
// 需求1：点击h1获取 自身文本内容、div的标签内容、input的表单内容
$('h1').click(function () {
console.log($(this).text());
console.log($('div').html());
console.log($('input').val());
})
</script>
</html>
View Code
常用操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title
</title>
<style>
h1 {
font-size: 36px;
text-align: center;
}
.box {
width: 200px;
height: 200px;
background-color: orange;
}
.red {
background-color: red;
border-radius: 50%;
}
.yellow {
width: 400px;
border-radius: 100px;
background-color: yellow;
}
.blue {
width: 400px;
border-radius: 50%;
background-color: blue;
}
</style>
</head>
<body>
<h1 id="h1" style="color: red">标题
</h1>
<img src="" alt="">
<button class="btn1">红
</button>
<button class="btn2">黄
</button>
<button class="btn3">蓝
</button>
<div class="box"></div>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
// 一、文本操作
// $div.text() 文本内容
// $div.html() 标签内容
// $inp.val() 表单内容
// 二、样式操作
// 获取样式: $div.css('css中的样式属性名')
// 设置样式:
`
$div.css('css中的样式属性名', '属性值'); // 单一设置
$div.css({
'属性1': '值1',
...
'属性n': '值n',
});
$div.css('属性', function (index, oldValue) {
console.log(oldValue);
// $(this) 可以拿到调用者对象
return 返回值就是要设置的值(可以与自身其他属性，或是页面其他标签，或是自定义逻辑有关系);
})
`;
`
$('h1').click(function () {
let $this = $(this);
let color = $this .css('color');
let fs = $this.css('font-size');
let ta = $this.css('text-align');
console.log(color, parseInt(fs), ta);
$this.css('background-color', 'orange');
$this.css({
'background-color': 'pink',
'border-radius': '10px',
'width': '200px',
});
$this.css('height', function (index, oldValue) {
console.log(oldValue);
let w = $(this).width();
return w / 2;
})
})
`;
// 三、类名 - 可以一次性获取提前设置好的一套样式
`
增加类名：$div.addClass('类名')
删除类名：$div.removeClass('类名')
切换类名：$div.toggleClass('类名')
`;
`
$('.btn1').click(function () {
$('.box').addClass('red');
$('.box').removeClass('yellow');
$('.box').removeClass('blue');
// $('.box').toggleClass('red'); // 无red类添加，反之去除
});
$('.btn2').click(function () {
let $box = $('.box');
$box[0].className = 'box';
$box.addClass('yellow');
});
$('.btn3').click(function () {
$('.box').addClass('blue');
});
`;
// 四、属性
`
获取属性值：$div.attr('属性名')
设置属性值：$div.attr('属性名', '属性值或函数')
删除属性值：$div.attr('属性名', '')
`;
// https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h=300/sign=705ffa145fda81cb51e685cd6267d0a4/4bed2e738bd4b31c5a30865b89d6277f9f2ff8c6.jpg
$('h1').click(function () {
let h1_id = $(this).attr('id');
console.log(h1_id);
$('img').attr('src', function () {
return 'https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h=300/sign=705ffa145fda81cb51e685cd6267d0a4/4bed2e738bd4b31c5a30865b89d6277f9f2ff8c6.jpg'
});
$(this).attr('id', '');
})
</script>
</html>
View Code
链式操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title
</title>
</head>
<body>
<h1>标题
</h1>
</body>
<script src="js/jquery-3.4.1.js"></script>
<!-- CDN服务器 | 官网服务器 -->
<!--<script src="https://code.jquery.com/jquery-3.4.1.js"></script>-->
<script>
`
let _self = $('h1').css('color', 'orange');
_self = _self.click(function () {
console.log(this)
});
_self = _self.css('background', 'red');
`;
$('h1').css('color', 'orange').css('background', 'red').click(function () {
console.log(this)
}).text('修改标题');
</script>
</html>
View Code
操作文档
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作文档
</title>
<style>
.d {
width: 50px;
height: 50px;
background-color: orange;
border-radius: 50%;
}
</style>
</head>
<body>
内容：<input type="text">
行：<input type="text">
列：<input type="text">
<p>表格
</p>
<div>
<div class="d d1"></div>
<div class="d d2">
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
</div>
<div class="d d3"></div>
<div class="d d4"></div>
</div>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
// 一、快速定位到某一个jq对象
`
// 1）在jq集合中快速拿到某一个jq对象: jq对象.eq(index)
// $('.d:eq(1)') == $('.d').eq(1)
// $('.d').eq(1).click(function () {
// alert(123)
// })
// 2）在jq集合中都具有系统事件，在事件中如何区别每一个jq对象
// $(this) | 索引
$('.d').click(function () {
// 标签所在层级的索引，不是在jq对象数组中的索引
let index = $(this).index();
console.log(index)
});
`;
// 二、通过自身快速定位到 "亲戚"
`上兄弟(们) prev(All)
下兄弟(们) next(All)
兄弟们 siblings
孩子们 children
父亲(们)
`;
`
let $d2 = $('.d2');
console.log($d2);
let next = $d2.next();
console.log(next);
let nexts = $d2.nextAll();
console.log(nexts);
let prev = $d2.prev();
console.log(prev);
let siblings = $d2.siblings();
console.log(siblings);
let children = $d2.children();
console.log(children);
let parent = $d2.parent();
console.log(parent);
`;
// 三、动态生成页面结构
let $table = $('<table></table>');
$table.css({
border: '1px'
});
$('body').append($table); // 加入到body最后
$('body').prepend($table); // 加入到body最后
$('p').before($table); // 加入到p之前
$('p').after($table); // 加入到p之后
// 需求：点击表格，在之后插入指定宽高的表格
$('p').click(function () {
let inps = $('input');
// 表
let table = $('<table border="1"></table>');
let row = inps.eq(1).val();
console.log(typeof(inps.eq(1).val()));
let col = inps.eq(2).val();
// 行
for (let i = 0; i < row; i++) {
let tr = $('<tr></tr>');
table.append(tr);
// 列
for (let j = 0; j < col; j++) {
let td = $('<td>' + inps.eq(0).val() + '</td>');
tr.append(td);
}
}
$(this).after(table);
})
</script>
</html>
View Code
案例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title
</title>
<style>
body, ul {
margin: 0;
padding: 0;
list-style: none;
}
.login {
width: 300px;
height: 400px;
border: 1px solid black;
margin: 0 auto;
}
ul:after {
content: "";
display: block;
clear: both;
}
li {
width: 150px;
height: 50px;
float: left;
font: 20px/50px 'Arial';
text-align: center;
cursor: pointer;
}
li:hover {
/*background: orange;*/
color: orange;
}
li.live {
/*background: orange;*/
color: orange;
}
.login-box, .scan-box {
height: calc(400px - 50px);
background-color: red;
display: none;
}
.scan-box {
background-color: pink;
}
.box.live {
display: block;
}
</style>
</head>
<body>
<div class="login">
<ul>
<li class="live">登录
</li>
<li>扫码
</li>
</ul>
<div>
<div class="box login-box live"></div>
<div class="box scan-box"></div>
</div>
</div>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
// $('li').mouseover(function () {
// $(this).addClass('live').siblings().removeClass('live');
// let index = $(this).index();
// $('.box').eq(index).addClass('live').siblings().removeClass('live');
// })
$('li').click(function () {
$(this).addClass('live').siblings().removeClass('live');
let index = $(this).index();
$('.box').eq(index).addClass('live').siblings().removeClass('live');
})
</script>
</html>
View Code
案例2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title
</title>
<style>
body, ul, h2 {
margin: 0;
padding: 0;
list-style: none;
}
.box {
width: 120px;
}
h2 {
height: 36px;
background-color: brown;
color: white;
font: 20px/36px 'Arial';
text-align: center;
}
ul {
overflow: hidden;
height: 0;
border: none;
transition: 0.2s;
}
ul.live {
border: 1px solid black;
/*height: 100px;*/
}
li {
height: 30px;
font: 16px/30px 'Arial';
text-align: center;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<div class="box">
<h2>菜单
</h2>
<ul>
<li>菜单1
</li>
<li>菜单2
</li>
<li>菜单3
</li>
</ul>
</div>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
$('h2').click(function () {
$('ul').toggleClass('live').css('height', function (i, o) {
console.log(o);
let c = $(this).children().length;
if (o !== '0px') {
return 0;
} else {
let h = $(this).children().css('height');
h = parseInt(h);
return h * c + 'px';
}
})
})
</script>
</html>
View Code
转载于:https://www.cnblogs.com/HZLS/p/11140655.html
