//jq选择器  - 得到的是jq对象 - jq对象可以调用jq库里的所有功能
    //$和jquery是一样的 语法 let h1 = $('css语法')
        let h1 = $('.d1');
    //jq对象我们可以把他看成一个装着js对象的数组，因此我们可以根据索引取出想要的js对象
        let h = $('div')[0];  // 这样取出来的js对象
    //假如我们匹配出了多个标签对象，又向指定固定标签的jq的对象，可以使用eq()的方法
        let hh = $('.head').eq(1); // 取出的就是第二个标签对应的jq对象
    //总结
        `
        1.$('css选择器语法') 就是jq选择器 获得的是jq对象，jq对象可以理解为存放了js对象的数组(存放了几个不需要关心)
        2.jq对象转换为js对象  jq对象[js对象所在的索引]  - 可以使用js语法
        3.js对象转换成jq对象  $(js对象)  - 可以使用jq语法
        `;
//操作页面三步骤 1.获取标签 2.绑定事件 3.操作标签
$('.d2').click(function (ev) {
    //传进来的ev还是鼠标对象
    console.log(ev);
    console.log(ev.clientY);
    console.log(ev.clientX);
    //jq事件中的this还是js对象，可以直接使用js语法，如果还想使用jq语法，需要转成jq对象
    $(this);    //转成了jq对象
    //也可以在事件中获取任何标签的jq对象，通过css选择器语法
    $('body');  //body的jq对象
})

//首先获得jq对象
    let $title = $('.title');
//1.操作文本
    $title.text();   //获得文本内容
    $title.html();   //获得标签内容
    $title.val();    //获得表单内容
//2.样式操作
//设置样式
    $title.css('css中的属性名','css中的属性值'); //单一样式设置
    $title.css({
        '属性1':'值1',
        //....
        '属性n':'值n'
    });                     //一次设置多个样式
    $title.css("css中的属性名",function () {
        //后面的值可以通过函数返回值获得，好处是可以加入逻辑
    });
//3.类名   给一个标签加入提前设置好属性的类型，可以一次性加入设置好的一套样式
    //添加类型
    $title.addClass("类名");
    //删除类名
    $title.removeClass("类名");
    //切换类名  就是点击一下添加，点击第二下删除
    $title.toggleClass("类名");
//4.属性
    //获取属性值
    $title.attr("属性名");
    //设置属性值
    $title.attr("属性名","属性值");
    //删除属性值     属性值设为空就是删除
    $title.attr("属性名","")

//由于大部分jq对象方法的返回值都是jq对象本身，所以可以连续点出方法使用
//eg：
$title.css('color','red').click(function () {
    console.log(this);
}).text();
//有几个常见返回值不是jq对象本身的：text()  height()  width()

//1.快速定位到某一个jq对象
    //在jq集合中快速定位某一个: jq对象.eq(索引)
    $title.eq(1);
    //在jq集合中都具有系统事件，在事件中如何区别每一个jq对象
    //每一个jq对象都绑定了同一个事件，我要分辨出这次触发事件是谁触发的，并且执行谁的事件
    $title.click(function () {
       //通过this 可以找出当前jq对象在jq集合中的索引，就可判断出是谁触发的并且执行什么任务
       //  let index = $title.index($(this));
        let index = $(this).index();  //上面或者这个都能得到索引
        console.log(index);
    });
//2.通过自身快速定位到亲戚们
    //上兄弟   prev
        $title.prev();
    //上兄弟们 prevAll
        $title.prevAll();
    //下兄弟   next
        $title.next();
    //下兄弟们 nextAll
        $title.nextAll();
    //兄弟们   siblings
        $title.siblings();
    //孩子们   children
        $title.children();
    //父级标签   parent
        $title.parent();
    //所有直系上级标签 parents
        $title.parents();
//3.动态生成页面结构
    //生成标签
    let $table = $('<table></table>');
    // 为标签添加css样式
    $table.css({
        color:'red',
        border:'1px solid green'
    });
    //获取目标标签
    let $tag = $('.tag');
    $tag.append($table);    //加入到目标标签子标签的最后面(父子关系)
    $tag.prepend($table);   //加入到目标标签子标签的最前面(父子关系)
    $tag.before($table);    //在目标标签前面加标签(兄弟关系)
    $tag.after($table);     //在目标标签后面加标签(兄弟关系)