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>
 
posted @ 2019-07-09 22:40  轩辕12  阅读(84)  评论(0)  编辑  收藏  举报