day55
day55 jq链式操作,常用操作
obj.innerwidth =====padding左右+宽
innerheight==========padding上下加高
什么是jq:
就是js框架(库),对js进行的二次封装(比js便捷,操作比较综合)的工具包。
工具包:jq就是一堆函数的集合体,通过jq对象来调用jquery.
为什么学jq:更快速使用js
使用js的地方都可以使用jq
1安装
所有的对象都是window
js------》ES语法,浏览器(BOM):window.操作 ,文档(DOM window。document)document.操作
需要提前加载jquery
src="路径"
window是可以省略的
$符号相当月jquery,是个函数对象
3根据api学习jq
####操作页面
1jq选择器,得到的是jq对象,jq多想可以条用jquery库的所有函数
$('css语法选择器')
let h1 = $('h1');
例:let p1 = $('.p1');
let p2 = $('p:nth-og-type(2)');
##想查看h1的文本内容
console.log()
#想通过js对象获取第二个p的文本内容
let ps = $('p');
let _p2 = ps [1]; ##jq对象可以理解为存放了js对象的数组(列表)
console.log(_p2.innerText)
##两个都能显示出来 ,通过jq对象获取
p2 = $(_p2);
console.log(p2.text())
##总结:
#1 $('css选择器语法') 就是jq选择器,获得的是jq兑现,jq对象可以理解为存放了js对象的数组(存放了几个js对象不需要关心)
#2 jq对象转换为js对象-jq对象[js对象所在索引] ----好处,可以使用js语法
#3js转换为jq对象--$(js对象)----可以使用jq语法
###操作页面的三步骤
#1获取标签
#2绑定事件(官方有事件)
#3操作标签
#$('h1').click(function函数)
##第一种写法
$('h1').click(function(ev){
#jq的事件对象,对js事件做了完全兼容
console.log(ev)
console.log(ev.client.X) ##x轴的位置
})
##第二种写法
$('h1').on('click',function (ev) {
console.log(ev)
})
##p1和p2都有点击事件
$('p').click(function () {
console.log(123);
##在jq事件中的this还是js对象,如果要使用jq功能,需要将this转换为jq对象
console.log(this);
console.log($(this));
## 拿到p1和p2的内容
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());
})
##jq常用操作
##文本操作.text,html,val
##样式操作
#1获取样式: $div.css('css中的样式属性名字')
$('h1').click(function () {
let color = $(this).css('color');
let fs = $(this).css('font-size');
console.log(color,fs)
##设置样式
$(this).css('background-color','red') #了解
$(this).css({
'background-color':'red',
........
##多个用字典
})
$(this).css('height',function (index,oldValue) {
###$(this).width();##宽
let w = $(this).width();
return w / 2 #设置高度是宽度的一半 #function的括号里可以不写
})
} )
##类名操作-----可以一次性获取提前设置好的一套样式
#增加,删除,切换
#如果他有red,需要在style里面写上red
.red {
backgroud-color;red;
border-radius:50%;
}
#如果是黄色,显示黄色的样式
.......
<div class='box red(是没有的,如果下面的有点击就加这个名)'><div>
$('.btn1').click(function() {
$('.box').addClass('red')) ; #在box后面加个类名,如果点击就加个类名
$('.box').toggleClass('red')); #有red就删除,没有red就添加
});
##但是他有三个颜色,如果点击过的,他还存在就变成了box red yellow blue.在点击其他的就没效果了,所以要用到removeClass,点击红就把黄蓝给删除了
#属性
获取属性值,设置属性值,删除(置空)
$('h1').click(function () {
let h1_id = $(this).attr('id');
console_log(h1_id);
$('img').attr('src','图片链接'); ##这个图片链接可以丢个函数,设置img的图片
$(this).attr('id','');置空id
})
##jq的链式操作
$('h1').css('color','red') ##他的函数可以无限 点操作
#jq操作文档
##如果有三个d,在jq集合中快速拿一个jq对象,jq对象.eq(index)
$('.d').eq(1)
<!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>