jquery-ui全汇@未来科技《从入门到精通》-Second

jquery《从入门到精通》学习笔记
一个轻量级的前端框架
当前使用版本为1到3，所以很多新版本的api不会过多介绍
jquery的下载链接##https://jquery.com
项目链接##https://jquery.org
<此为原书的学习分享>

1.使用过滤器
2.操作DOM

1.使用过滤器
在jquery框架中，过滤器分三种操作行为，过滤，查找和串联

1.1过滤
过滤是对jqeury对象所包含的元素进行再筛选操作，过滤的方法分8种

过滤方法	说明
eq(index)	获取第N个元素
hasClass（class）	检查当前的元素是否是含有某个特定的类，如果有，则返回true
filter(expr)	筛选出与指定表达式匹配的元素集合
filter(fn)	筛选出与指定函数返回值匹配的元素集合
is(expr)	用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true
map(callback)	将一组元素转换成其他数组(不论是否是元素数组)
has(expr)	保留包含特定后代元素.去掉那些不含有指定后代的元素
not(expr)	删除与指定表达式匹配的元素
slice(start,[end])	选取一个匹配的子集

提示:expr:为字符串,fn表示函数,index表示索引,class是类,callback表示回调函数

类过滤:

$()function(){
$("div").click(function(){
   if($(this).hasclass("red")){
     $(this).removeClass("red")
}
})
}

下标过滤

$(function(){
   $("div").eq(1).click(function(){
   $(this).removeClass("red")
}) 
})

表达式过滤:filter(expr||fn)

$(function(){
$("div").filter("red").css("background-color","red")
//$("div").filter("red,blue").css("background-color","red")多个表达式用逗号分割
})

has()

$(function(){
$("div").has("red").css("background-color","red")
//has是轻便过滤,用法没有filter方法复杂
}

判断:is(expr||callback)

$(function(){
   let $p = $(".red")
    $p.is("p")?$p.css("color","red"):$p.parent().css("color","blue")
})

映射:map(callback)

$(function(){
    $("#submit").click(function(){
     $("p").html("<he>提交信息<h2>").append($("input").map(function(){
      return $(this).val();  
}).get().join(","));
return false;
})
})

清除:not(expr)

$(function(){
    $("p").not(".red").css("color","red");
})

截取slice(start,[end])

$(function(){
  const $ul = $("ul")
  $ul.children().slice(0,4).css("color","red");
})

1.2 查找
查找操作主要是以jquery对象为基础,查找父级,同级或者下级相关元素,以便实现延申筛选,增强对文档的控制能力

查找方法	说明
add(expr,[context])	把与表达式匹配的元素添加到jquery对象中
children([expr])	取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
closest(expr,[context])	从元素本身开始,逐级向上级匹配,并返回最先匹配的元素
contents()	查找匹配元素内部所有的子节点(包括文本节点)
find(expr)	搜索所有与指定表达式匹配的元素
next(expr)	取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
nextUntil([selector])	查找当前元素之后所有的同辈元素,直到遇到匹配的那个元素为止
nextAll(expr)	查找单前元素之后所有的同辈元素
offsetParent()	返回第一个匹配元素用于定位的父节点
parent([expr])	取得一个包含着所有匹配元素的唯一父元素的元素集合
parents([expr])	取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)
parentsUntil([selector])	查找当前元素的所有父辈元素,直到遇到匹配的那个元素为止
prev([expr])	取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
prevAll([expr])	查找当前元素之前所有的同辈元素
prevUntil([expr])
siblings([expr])	取得一个包含匹配的元素集合中每一个元素的唯一同辈元素的集合

    $(document).ready(function(){
        //console.log($('.item2'));
        //返回指定元素的后面一个元素
        // console.log($('.item2').next());
        //返回指定元素的后面所有元素
        //console.log($('.item2').nextAll())
        //指定某个元素的查找范围  prevUntil(".item3")
        //console.log($('.item2').nextUntil('.item3'));
        //返回指定元素的前面一个元素
        //console.log($('.item2').prev('.item1'));
        //返回指定元素的前面所有元素
        //console.log($('.item2').prevAll('.item1'));
        //所有的兄弟姐妹都到位，可以传递参数。
        //console.log($('.item2').siblings('.item1'));
    //<======================================================================>

        //获取ul的所有子元素
        //console.log($('#box').children('li'));
        //获取ul的所有后代元素
        // console.log($('#box').find('li'));
        //获取父元素
        // console.log($('.item2').parent());
        //获取祖先元素
        // console.log($('.item2').parents());
        //获取直到指定祖先元素的所有元素
        //console.log($('.item2').parentsUntil('body'));
        //获取有定位属性的父元素
        console.log($('.item2').offsetParent())
       //获取该节点的文本内容
       console.log($(".item").contents())
       //获取父节点,并为父节点添加样式
       $(function(){
       $("li.item").closest("ul").css("fontSize","20px");
})
//添加方法
        $(function(){
 $("li.item").siblings("li").add("h1,h2").css("fontSize","20px");
})
       }

1.3串联
jquery链式语法能够实现在一行代码中完成各种复杂的任务.但是在很多情况下用户希望jquery方法能够操作不同的jquery对象,或者前后方法能够互相影响,为此jquery提供了串联方法:addBack()和end()

 $(document).ready(function(){
        /* add 把选中的元素添加到当前集合 */
        // console.log($('#box').add('li'));
        //addBack  把前面的两个集合合并在一块
        //console.log($('#box').children('ul').addBack());
        //获取元素的子节点
        // console.log($('#box').contents());
        //返回上一次破坏性操作的集合
        // console.log($('#box').find('li').end());
    })

2 操作DOM
DOM操作可分为3个方面: DOM Core (核心)、HTML DOM和CSS DOM.
(1) DOM Core不属于JavaScript语言范畴，任何一种支持DOM的程序设计语言都可以操作它，它的用途不限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，如XML. JavaScript中的createElement()、getElementById()和 removeAttribute(0等方法都是DOM Core的组成部分。
(2)HTMLDOM的出现比DOMCore要早，它提供了一些更简明的记号来描述各种HTML元素的属性，如访问表单document. forms等。
(3) CSS DOM主要操作CSS.在JavaScript中，CSS DOM主要作用是获取和设置style对象的各种属性。通过改变style 对象的各种属性，可以使网页呈现出不同的效果。jQuery作为一种JavaScript库，继承并优化了JavaScript 访问DOM对象的特性，使开发人员更加方便地操作DOM对象。

//创建节点
$(function(){
let $div = $("<div></div>")
//创建文本 let $div = $("<div>DOM</div>")
//创建属性节点 let $div = $("<div title="盒子">DOM</div>")
$("body").append($div);
})

2.2插入节点
2.2.1内部插入
在DOM中,只用appendChild()和insertBefore()可以在元素内插入节点内容,jquery定义4中方式如表所示

方法	说明
append()	向每个匹配的元素内部追加内容
appendTo()	把所有匹配的内容追加到另一个指定的元素集合中,实际上,该方法颠倒了append()的用法.例如,$(A).append(B)与$(B).appendTo(A)是等价的
prepend()	向每个匹配的元素内部前置内容
prependTo()	把所有匹配的内容前置到另一个指定的元素集合中,实际上,该方法颠倒了append()的用法.例如,$(A).append(B)与$(B).appendTo(A)是等价的

             $('#box').append(节点)
        /*
       把节点插入到box的子元素的最后面   
       append(content)
       append(function(index,html))
        */
              $('#box').appendTo('#box')
          /*
          把节点插入到box的子元素的最后面
          appendTo(target)
          */    
             $('#box').prepend(节点)
      /*
        把节点插入到box的子元素的最前面
       prepend(content)
       prepend(function(index,html))
        */ 
             $('#box').prependTo('#box')
        /*
         把节点插入到box的子元素的最前面
         prepend(target)
         */

.2.2.2外部插入
DOM没有提供外部插入的方式,如果要实现在匹配元素外部插入或者包裹元素,则需要用间接的方式实现,jquery提供了多个外部插入内容的方法

方法	说明
after()	在每一个匹配的元素之后插入内容
before()	在每一个匹配的元素之前插入内容
insertAfter()	在所有匹配的元素插入到另一个指定的元素集合的后面
insertBefore()	把所有匹配的元素插入到另一个指定的元素集合前面

       //$('#box').after( $('<div>').text('我是创建的div 并且作为box的同级兄弟') )
       /*
         after(content)
         after(function(index))
       */
        // $('<div>').insertAfter('#box')
       /*
         insertAfter(target)
       */
       //下面的使用方法同上
        // $('#box').before('<div>')
        //$('<div>').insertBefore('#box')

2.3删除节点
jquery定义了3个删除内容的方法:remove,empty和detach(),使用方法如下表所示

方法	说明
remove()	从DOM中删除所有匹配的元素
empty()	删除匹配的元素集合中所有的子节点
detach()	从DOM中删除所有匹配元素

$(function(){
          // $('li').remove()
        // $('ul').empty()
        //$("p").detach()
})

注意:

detach()方法与remove方法一样.但是与remove()不同的是,detach()方法能够保存所有jquery的数据与被移走的元素相关联,所有绑定在元素上的事件,附加的数据等保留下来,但需要移走一个元素,不久又将该元素插入DOM中,该方法非常有用

2.4复制节点

//clone([withDataAndEvents])
//clone([withDataAndEvents],[deepWithDataAndEvents])
参数withDataAndEvents表示传入的boolean,可以是true或者false,用来设置是否复制处理函数等数据
参数deepWithDataAndEvents也是一个boolean,用来设置对事件处理函数和复制元素的所有子元素的数据是否应该被复制
 //console.log($('li').clone(true));

2.5替换节点
jquery定义了两个方法来替换节点,分别是replaceWith()和replaceAll()

  $('li').replaceWith('<div>')
  /*
   该方法能够将所有匹配的元素替换成指定的html或DOM元素
   replactioneWith(newContent)
   replaceWith(function)
 */
 $('<div>').replaceAll('li')
 /*
该方法能够用匹配的元素替换掉所有的指定参数匹配的元素
replaceAll(selector)
*/

2.6元素包裹
原生的DOM并没有提供包裹的方法,而jquery却定义了3种包裹方式:wrap(),wrapAll()和wrapInner();除此之外还提供了卸包unwrap

              $('li').wrap(节点)
              // 创建节点  包裹住每个li
              /*
                该方法能够在每一个匹配的元素外层上包裹html元素
                wrap(wrappingElement)
                wrap(wrapingFunction)
               */
             $("body").wrapInner("<ul></ul>")
                /*
                该方法能够在匹配元素的内容外部包裹一层结构
                wrapInner(wrappingElement)
                 wrapInner(wrappingFunction)
               */
             $('li').wrapAll(节点)
              //创建节点  包裹住所有的li
              /*
                 该方法能够在所有匹配的元素外包裹一层结构
                   wrapAll(wrappingElement)
               */
               $("li").unwrap()
               /*
                该方法能够将匹配元素的父级元素删除,保留本身在原来的位置,且无需任何参数
                unwrap();
               */

2.7操作属性
jquery和DOM都提供了属性的基本操作方法,属性操作包括设置属性,访问属性,删除属性或者修改属性

设置属性jquery定义了两种方式:prop()和attr()

$(function(){
 $("input[checked="checked"]").prop({
    disabled:true;
    /*
      prop()能够为匹配的元素设置一个或更多的属性
     prop(propertyName,value)
     prop(map)
     prop(propertyName,function(index,oldPropertyValue))
    */
})
})
$(function(){
   $("img").attr("src",function(index){
    return "images/"+(index+1)+".jpg";
     /*
      attr()能够为匹配的元素设置一个或更多的属性
     attr(propertyName,value)
     attr(map)
     attr(propertyName,function(index,attr))
    */
})
})

注意:

attr()和prop()方法都可以用来设置元素属性，但是他们在用法上还是有细微的区别。一般使用prop()方法获取表单属性值。使用prop()方法的时候，返回值是标准属性，如$("#checked").prop(“disabled”),不会返回disabled或者空字符串，只会返回false跟true;attr跟prop可以访问哪些方法如下所示

attr():accesskey,align,class,contenteditable,draggable,href,id,label,rel,src,tabindex,tatle,type,width(if needed over width())
prop():async,autofocus,checked,location(IEwindow.location),multiple,readonly,selected

2.7.2访问属性
jquery与设置属性值方法一直，jquery依旧是用prop(),attr()这两个方法来访问属性值，当为prop()和attr()传递两个参数时，则表示读取属性的值

     $("input").prop("checked")  //返回布尔值true或者false,prop(propertyName)
     $("input").attr("checked")  //1.6+版本返回字符串checked,低于1.6版本则返回true或者false,attr(attributeName)

2.7.3 删除属性
jquery定义了removeprop()和removeAttr()方法删除指定的元素属性

$(function(){
    $("input").removeprop("checked")//removeprop(propertyName)删除元素合法/非法属性
    $("input").removeAttr("checked")//removeAttr(attributeName) 删除  没有表现在html标签上的非法属性
})

2.8操作类
为了方便控制样式，jquery定义了几个类样式相关的操作方法，分别为添加，删除，切换跟判断，代码如下

          $('img').addClass('highlight')
          /*
             该方法负责给元素追加样式
             addClass(className)
             addClass(function(index,class))
          */
         $('img').removeClass('highlight')
         /*
           该方法负责删除类样式
          removeClass(className)
          removeClass(function(index,class))
         */
         $('img').toggleClass('highlight')
         /*
          该方法用来切换类样式
          toggleClass(className)
          toggleClass(className,switch)//switch表示判断样式类添加还是移除的boolean值
          toggleClass(function(index,class),[switch])
          */
           $('img').hasClass('highlight')
           /*
           该方法判断元素是否包含指定的类样式，返回布尔值
           hasClass(className)
            */

2.9操作内容
jquery提供了多个方法操作文档内容，他们把html结构视为字符串。有并以字符串的形式进行操作

       $('#box').html('<p>我是p标签的内容</p>')
         /*
           该方法以字符串形式读写html文档结构
              html()
              html(htmlString)
              html(function(index,html))
         */
      $('#box').text('<p>我是p标签的内容</p>')
          /*
              该方法读写指定的元素下包含的文本的内容，为指定元素内包含的数据
              text(htmlString)
              text(function(index,html))
        */
         $(function(){
        $("input").focus(function(){
            if($(this).val()=="请输入文本")$(this).val()
    })
         $("input").blur(function(){
       if($(this).val()=="")$(this).val("请输入文本")
})
    })
      /*
      该方法读写指定表单对象包含的值，但该属性不含参数时，表示读取指定表单元素的值
       val()
       val(value)
        val(function(index,value))
      */

2.10 操作样式表
jquery把所有与css样式相关的操作都封装到css()方法中，从而在设计时只需简单调用即可解决web开发中很多设计难题

2.10.1读写css样式
css样式分3种，`行内样式，文档内部样式，文档外部样式，jquery使用css()方法读取指定样式，也能够为元素设置css样式

 console.log($('li:even').css('width'));
 /*
    css(propertyName)
    css(propertyName,value)
    css(propertyName,function(index,value))
    css(map)
  */

2.10.2绝对定位
jquery简化了定位操作，使用offset方法可以获取匹配元素在当前视口的相对偏移

  

 //console.log($('#box').offset());
        // $('#box').offset({
        //     left:100,
        //     top:100
        // })
        /*
         offset()返回一个对象 记录元素距浏览器左上角的位置
         offset(coordinates)//参数coordinates表示一个对象，包含left,top属性，用整数指明元素的新顶值和左边坐标(设置元素距浏览器左上角的位置)
         offset(function(index,coords))//用于设置坐标的一个函数，该参数接收元素在匹配的元素集合中索引位置作为第一个参数，和当前坐标的第二个参数，这个函数应该返回一个包含top和left属性对象
         */

2.10.3相对定位
jquery中使用position()方法可以获取匹配元素的相对偏移位置，用法如下

  // $('.content').position({
        //     left:100,
        //     top:100
        // })
             position()  返回一个对象 记录元素距定位父级左上角的位置
            position(对象)  不可以设置元素距定位父级左上角的位置
            此外，jquery还定义了:来获取匹配元素相对的滚动条顶部和左侧的偏移值
             scrollLeft()     返回滚动条的水平滚动距离
             scrollLeft(数值)    设置滚动条的水平滚动距离
              scrollTop()     返回滚动条的竖直滚动距离
             scrollTop(数值)    设置滚动条的竖直滚动距离

2.10.4控制大小
jquery()使用了width()和height()的方式来读取元素大小，用法如下：

   $(function(){
     $("div").width();
     /*
       width();
       width(value);
       width(function(index,width))
     */
     $("div").height(140);
     /*
      height();
      height(value)
      height(function(index,height))
     */
     除此之外，jquery还定义了innerHeight(),innerWidth(),  outerHeight(), outerWidth()
     方法，实际上是以height()和width()方法的基础上，计算了元素的边框和补白
     innerHeight(),innerWidth()能够返回元素内容宽度和高度（包括宽高和补白）
     outerHeight(), outerWidth()能够返回元素的总宽和总高（包括宽高，补白和边框宽度）
})

4.11遍历文档
jQuery使用chilren)、next0、prev)、parentO方法遍历文档中任何元素。其中children()方法获取当前元素包含的所有子元素，next()方法获取当前元素相邻的下一个同级元素，prev()方法获取当前元素相邻的上一个同级元素，parent0方法获取当前元素的父元素，不过这些方法的返回值都是jQuery对象，而不是DOM集合或对象。

$(function(){
   let $body = $("body");
   let li = $body.children().eq(2).children()[0];
   $(li).text("第一句").next.text("第二句").next().text("第三句")
   。。。。
})

好了，今天的分享先到这里了，后面的会越来越有难度哦，下一章为事件处理跟使用ajax，我们下章见2020-5-11