jQuery中的API简单论述

1.过滤

// :first和:eq(index)使用是选择器语法

 $('div:first').text()
 $('div:eq(0)').text()

// eq(index)和first()使用是筛选API。目的：都是把$('div')范围进一步缩小。

  $('div').eq(0).text()
  $('p').first().text()

// hasClass(类名)用来判断元素是否拥有一个类名，拥有返回true

  $('div:eq(0)').hasClass('active')

// filter(选择器)用来做进一步筛选，过滤。有可能过滤多个

// is(选择器)判断元素是否满足is中的选择器条件，满足返回true 一般判断选择的元素是否是你想要的元素。即判断选择的元素是否准确

console.log($('div:last').is('.last'));

 //map()循环获取的所有的元素，做进一步业务逻辑处理。

 var $result = $('p').map(function (i, v) {
            return $(v).addClass('active');
        })

//is（选择器） 判断元素是否满足is中的选择器条件 满足返回true
//一般判断选择的元素是否是你想要的元素 即判断选择的元素是否准确
// has(选择器)筛选出元素中包含满足选择器的元素。
// slice()从查找的范围内截取一段。[start,end)左包含右不包含。

2. 查找

    // childen(选择器)得到子元素。
    // closest(选择器)查找离元素最近的祖先元素。
    // find(选择器)查找后代
    // next(选择器)查找后一个兄弟元素
    //nextAll() 没有终点
    //nextUntil  Until直到...结束  左包含 右不包含
    // prev(选择器)查找前一个兄弟元素 
    // parents(选择器)查找所有父元素
    // parent(选择器)查找直接父元素
    // add()串联，把多个选择器得到结果合并成一个大的结果。

addBack(选择器)
退回到以前的某个选择器。只能退一步， 选择器参数是为了进一步约束退一步的正确性。 注意和end()的区别。

// end()退一步，找到前面的选择器

console.log($('.first').find('.second').addBack().find('#s1').addBack().css({
    color: 'red'
 }))     

  console.log($('.first').find('.second').find('#s1').end().end().css({
            color: 'red'
        }))

prop attr data区分

//$('input[type=checkbox]:checked')获取选中的筛选框

// prop(属性名称)  一般要求是单属性 建议使用prop, 通用属性一般建议使用attr,自定义属性建议使用data

//console.log($('input[type=checkbox]:eq(1)').prop('checked', true))
 
 //$('input[type=checkbox]:eq(1)').attr('checked','checked')

3.文档处理API

添加

区分appenfTo()和append() 与prependTo()和prepend()区别

//appenfTo()和append()都是在父元素的末尾添加
//appendTo()添加到，被添加元素在前
//append() 添加，被添加元素在后

$('<div>').text("我是div").appendTo('body');
$('body').append("<p>纯文本</p>");
$('body').append($('<p>').text('我是p的内容'));

//prependTo()和prepend()都是在父元素的开头添加
//prepend() 添加，被添加的元素在后
//prependTo()添加到，被添加的元素在前

$('body').prepend("<h1>添加的标题</h1>");
$('<h2>').text('我是h2标题').prependTo('body');

 //after()在参照的元素后添加，被插入的元素在后
 //insertAfter()在参照的元素后添加，被插入的元素在前。

包裹元素

 // wrap()用元素去包裹另外一个元素。被包裹的元素在前。
 // unwrap()去除包裹

   $('#s1').wrap("<strong>");
   $('#s1').unwrap(); //不带参数
   // 把所有的p用一个h1包裹。
   $('p').wrapAll('<h1>');
   // p的内容区用b包裹
   $('p').wrapInner('<b>');

替换

// replaceWith()被替换的元素在前
// replaceAll()被替换的元素在后

// $('p:first').replaceWith('<div>div</div>');
// $('<div>div</div>').replaceAll($('p'));

删除

//empty()让元素内容区清空。
//remove()把元素从DOM树中删除 
//detach()方法移除被选元素，包括所有文本和子节点

detach() 与 remove()的区别
1.remove()删除后，再找回来，事件会丢失，而detach()不会。
2.这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。
3.detach() 会保留所有绑定的事件、附加的数据

//当在jQ中给p绑定点击事件时 用detach删除后 在添加 点击事件仍可以执行，但是return却不可
var $result = $('p:last').detach();
$('p:last').after($result);

复制

// clone复制, 参数为true可以复制事件。

$('#p3').on('click', function(){
        alert("hello")
    })
$('p').clone(true).appendTo('body')
//当给原标签id为P3的绑定了点击事件时，用clone复制时（）里带参数true时 ，可将点击事件也复制过来，默认为flase，即调用复制方法时，默认不复制其方法

动画效果 隐藏 等

// hide隐藏元素，通过display:none  slide滑动， fade淡淡的

// $('#btn1').on('click',function(){
        //     if($('p').css('display')==='block'){
        //         $('p').hide(5000,function(){
        //         console.log('1346');
        // })
        //     }else {
        //         $('p').show(5000,function(){
        //         console.log('1346');
        // })
        //     }
         
        // })

		//上面的方法初学者理解容易但很麻烦，下面用toggle（）方法时 简单

        // $('#btn1').click(function(){
        //     // toggle 切换 相当于show hide的结合
        //     $('p').toggle(1000)
        // })

## get() eq()区别

 //get 返回的是dom对象  eq返回的是jQuery对象

  $('p').get(0) //= $('p').eq(0)[0]

index查找索引

console.log($('p').index($('p:last')));
//在p中查找p做后一个的索引 找不到返回-1

4.元素位置 宽高

// offset()可以获取/设置元素偏移量（指元素离浏览器的距离）
// 重要的属性left, top
// position()可以获取元素位置（指元素离它父元素的距离）

综上所述offset()可以设置以及获取元素偏移量 而 position()只能获取

// $('p').css({
        //     border : '1px solid red'
        // }).offset({
        //     left :100,
        //     top:200
        // })//修改偏移量
 //获取偏移量
 console.dir( $('div').offset() );
 console.dir($('div').position())

 //scrollTop 滚动的距离（y轴） scrollLeft（）滚动的距离（x轴）

//获取浏览器滚动条高度三种方法
  console.log( $('html').scrollTop());
  console.log( $(window).scrollTop());
  console.log( $(document).scrollTop());

 // width()获取 设置元素的宽度 不包含边框 边距 里面带参数即为修改为xxx
 //innerWidth 不包含边框 包含边距
 //outerWidth 包含边框和边距