JQuery
1. JQuery操作页面的三大步骤
1. $('css3选择器语法') 就是jq选择器，获得的是jq对象，jq对象可以理解为存放了js对象的数组 （存放了几个js对象不需要关心）
2. jq对象转换为js对象 - jq对象[js对象所在索引] - 可以使用js的语法
3. js对象转换为jq对象 - $(js对象) - 可以使用jq的语法、
4. jq的事件对象，对js事件对象也完全兼容
5. 在jq事件中的this还是js对象，如果要使用jq功能，需要将this转换为jq对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>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 = $('p2');
console.log(p1, p2);
let p = $('p');
console.log(p);
// jq对象可以理解为存放了js对象的数组,可以通过索引取值
// 想通过jq对象获取第2个p的文本内容
let _p2 = p[1];
console.log(_p2.innerText);
p2 = $(_p2);
console.log(p2.text());
// 1. $('css3选择器语法') 就是jq选择器，获得的是jq对象，jq对象可以理解为存放了js对象的数组 （存放了几个js对象不需要关心）
// 2. jq对象转换为js对象 - jq对象[js对象所在索引] - 可以使用js的语法
// 3. js对象转换为jq对象 - $(js对象) - 可以使用jq的语法
// 4. jq的事件对象，对js事件对象也完全兼容
// 5. 在jq事件中的this还是js对象，如果要使用jq功能，需要将this转换为jq对象
</script>
<script>
// 操作页面的三个步骤
// 1.获取标签
// 2.绑定标签
// 3.操作标签
// jq的事件对象，对js事件对象也完全兼容
// $('h1').click(function (ev) {
// console.log(ev);
// console.log(ev.clientX);
// console.log(ev.clientY);
// });
// $('h1').on('click', function (ev) {
// console.log(ev);
// })
// 在jq事件中的this还是js对象，如果要使用jq功能，需要将this转换为jq对象
$('p').click(function () {
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>
2. JQuery的常用操作
操作标签的内容，样式，属性、类。
2.1 内容
$div.text() 文本内容
$div.html() 标签内容
$inp.val() 表单内容
2.2 样式
1. 获取样式：$div.css('css中的样式属性名')
2. 设置样式
①：单一设置 $div.css('css中的样式属性名', '属性值');
②：设置多个 $div.css({ '属性1': '值1', ... '属性n': '值n', });
③：$(this) 可以拿到调用者对象
return 返回值就是要设置的值(可以与自身其他属性，或是页面其他标签，或是自定义逻辑有关系)
$div.css('属性', function (index, oldValue) {
console.log(oldValue);})
2.3 属性
获取属性值：$div.attr('属性名')
设置属性值：$div.attr('属性名', '属性值或函数')
删除属性值：$div.attr('属性名', '')
2.4 类
类名：可以一次性获取提前设置好的一套样式
增加类名：$div.addClass('类名')
删除类名：$div.removeClass('类名')
切换类名：$div.toggleClass('类名')
<!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 {
background-color: yellow;
width: 400px;
border-radius: 100px;
}
.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 () {
return ($(this).width())/2;
});
// 属性操作
// 获取属性值：$div.attr('属性名')
// 设置属性值：$div.attr('属性名', '属性值或函数')
// 删除属性值：$div.attr('属性名', '')
$('h1').click(function () {
let h1_id = $(this).attr('id');
console.log(h1_id);
$('img').attr('src', function () {
if (Math.random() > 0.5) {
return 'https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=f44714968db1cb132a643441bc3d3d2b/a8773912b31bb05138f6cc51367adab44bede0fd.jpg';
} else {
return 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1562331457&di=89eefbebab0a0a5c07cddbcb2d9c7854&src=http://b-ssl.duitang.com/uploads/item/201408/19/20140819122137_mUtYd.png'
}
});
});
$(this).attr('id', '');
});
// 四、类名：可以一次性获取提前设置好的一套样式
// 增加类名：$div.addClass('类名')
// 删除类名：$div.removeClass('类名')
// 切换类名：$div.toggleClass('类名')
$('.btn1').click(function () {
// 无red类添加，反之去除
$('.box').addClass('red');
$('.box').removeClass('yellow');
$('.box').removeClass('blue');
// $('box').toggleClass('red');
});
$('.btn2').click(function () {
let $box = $('.box');
$box[0].className = 'box';
$box.addClass('yellow');
});
$('.btn3').click(function () {
$('.box').addClass('blue');
});
</script>
</html>
3. JQurey的链式赋值
<!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>
<script>
// 之所有jquery支持这种极为方便的链式结构写法,是因为jquery的每一步操作都返回一个jquery对象本身.如果返回的不是本身，就无法继续链式赋值下去
$('h1').css('color', 'orange').css('background', 'red').click(function () {
console.log(this)
}).text('修改标题');
</script>
</html>
4. JQuery操作文档
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>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对象
// 标签所在层级的索引，不是在jq对象数组中的索引
// $(this) | 索引
$('.d').click(function () {
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 prev = $d2.prev();
console.log(prev);
//三、动态生成页面结构
// append:添加到...最后
// prepend:添加到...最前
// before:添加到...之前
// after:添加到...之后
let $table = $('<table></table>');
$('body').append($table);
$('p').before($table);
</script>
</html>
浙公网安备 33010602011771号