• 锋利的jQuery--读书笔记


    章一  认识jQuery

    知识点1:JavaScript缺点:

    复杂的DOM操作、不一致的浏览器实现、调试工具的缺乏

    知识点2:jQuery优势

    简洁的语法与跨平台的兼容性,简化了html文档的遍历、DOM操作、处理事件、执行动画、开发ajax操作

    轻量级、强大的选择器、出色的DOM操作的封装、可靠的事件处理机制、完善的ajax、不污染顶级变量、出色的浏览器兼容性、链式操作方式、隐式迭代、行为层与结构层的分离、丰富的插件、完善的文档、开源

    知识点3:DOM对象与jQuery对象

    DOM对象:文档对象模型,每一份html都可以表示成一棵树,eg在dom树中,<h3>、<p>、<ul>及<li>都是DOM节点。可以通过getElementsByTagName或getElementById来获取元素节点。这样得到的DOM元素即为DOM对象。var variable=dom对象

    jQuery对象:通过jQuery包装DOM对象后产生的对象。Var $variable=jquery对象

    jQuery对象=》DOM对象:[index]方法、get(index)

    var $cr=$(“#cr”);  //jQuery对象

    var cr=$cr[0];     //DOM对象

    var $cr=$(“#cr”);  //jQuery对象

    var cr=$cr.get(0);     //DOM对象

    DOM对象=》jQuery对象:

    var cr=document.getElementById(“cr”);

    var $cr=$(cr);

    章二  jQuery选择器

    知识点1:css选择器与jQuery选择器

    css选择器:标签选择器(E{css规则})、ID选择器(#ID{css规则})、类选择器(E。classname{css规则})、群组选择器(E1,E2,E3{css规则})、后代选择器(E F{css规则})、通配符选择器(*{css规则})、伪类选择器(E:PseudooElements{css规则})、子选择器(E>F{css规则})、临近选择器(E+F{css规则})、属性选择器(E[attr]{css规则})

    jQuery选择器:基本选择器、层次选择器、过滤选择器、表单选择器

    基本选择器:#id、.class、element、*、selector1,selector2

    层次选择器:$(“ancestor descendant”)、$(“parent>child”)、$(“prev+next”)、$(“prev~siblings”)

    过滤选择器:基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤、表单对象属性过滤选择器

    基本过滤::first、:last、:not(selector)、:even、:odd、:eq(index)、:gt(index)、:lt(index)、:header、:

    animated、:focus

    内容过滤::contains(text)、:empty、:has(selector)、:parent、

    可见性过滤::hidden、:visible

    属性过滤:[attribute]、[attribute=value]、[attribute!=value]、[attribute^=value]、[attribute$=value]、[attribute*=value]、[attribute|=value]、[attribute~=value]、[attribute1] [attribute2] [attributeN]

    子元素过滤::nth-child(index/even/odd/equation)、:first-child、:last-child、:only-child

    表单对象属性过滤::enabled、:disabled、:checked、:selected

    表单选择器::input、:text、:password、:radio、:checkbox、:submit、:image、:reset、:button、:file、

    :hidden

    二者区别:css选择器找到元素后是添加样式;jQuery选择器找到元素后是添加行为。

    知识点2:jQuery选择器优势

        简洁的语法、支持css1到css3、完善的处理机制

    章三  jQuery中的dom操作

    知识点1:DOM操作:DOM Core、HTML-DOM、CSS-DOM

    DOM Core:getElementById()、getElementsByTagName()、getAttribute()、setAttribute()、等

    HTML-DOM:document.forms、element.src、

    CSS-DOM:element.style.color=”red”

    知识点2:jQuery中的DOM操作:查找节点、创建节点、插入节点、删除节点、复制节点、替换节点、包裹节点、属性操作、样式操作、设置和获取HTML/文本及值、遍历节点、CSS-DOM操作

    查找节点:

          查找元素节点:

            var $li=$(“ul li:eq(1)”); 

            var li-txt=$li.text(); 

           alert(li-txt);

        查找属性节点:

           var $para=$(“p”);  

           var p-txt=$para.attr(“title”); 

           alert(“p-txt”);

    创建节点:

         创建元素节点:

          var $li-1=$(“<li></li>”);

          var $li-2=$(“<li></li>”);

         $(“ul”).append($li-1);

         $(“ul”).append($li-2);

       创建文本节点:

         var $li-1=$(“<li>香蕉</li>”);

         $(“ul”).append($li-1);

       创建属性节点:

        var $li-1=$(“<li title=”banana”>香蕉</li>”);

        $(“ul”).append($li-1);

    插入节点:append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()

    删除节点:remove()、detach()、empty()

         remove():用于从DOM中删除所有匹配的元素,传入的参数用于根据jQuery表达式来筛选元素。其后代节点也将同时删除。其返回值是一个指向已被删除的节点的引用,因此可以在以后再使用这些元素。remove()方法也可以通过传递参数来选择性地删除元素。

        detach():从DOM中去掉所有匹配的元素,但不会把匹配的元素从jQuery对象中删除,以后可以再使用这些元素,同时所有绑定的事件、附加的数据都会保留下来。

        empty():清空节点,清空元素内的所有后代节点。

      复制节点:$(“ul li”).click(function(){

         $(this).clone().append(“ul”); //这里的复制,被复制后的新元素不具有任何行为

    }

           

        $(this).clone().append(“body”); //复制元素的同时复制元素中所绑定的事件

    替换节点:replaceWith()、replaceAll()

    replaceWith():所有匹配的元素都替换成指定的HTML或DOM元素。

    $(“p”).replaceWith(“<span>*****</span>”);

    replaceAll():所有匹配的元素都替换成指定的HTML或DOM元素。

    $(“<span>*****</span>”).replaceAll(“p”);

    包裹节点:wrap()将某个节点用其他标记包裹起来。将所有方法进行单独的包裹。

    $(“strong”).wrap(“<b></b>”);  //用b把strong元素包裹起来

    wrapAll():将所有匹配的元素用一个元素进行包裹。如果被包裹的元素的多个元素间有其他元素,其他元素则会被放到包裹元素之后。

    wrapInner():将每一个匹配的元素的子内容用其他结构化的标记包裹起来。

    属性操作:attr()方法可以用来获取或设置元素属性;removeAttr()方法来删除元素属性

    var $para=$(“p”);

    var p-txt=$para.attr(“title”);

    $(“p”).attr(“title”,”your title”);

       $(“P”).attr({“title”:”your title” , ”name”:”tst”});

       $(“p”).removeAttr(“title”);

    样式操作:获取样式和设置样式、追加样式、移除样式、切换样式、判断是否含有某个样式

    获取样式和设置样式:

    var p-class=$(“p”).attr(“class”);

    $(“p”).attr(“class”,”high”);

    追加样式:

    $(“p”).addClass(“another”);

    移除样式:

    $(“p”).removeClass(“high”);

    $(“p”).removeClass(“high another”);

    切换样式:

    toggle()控制行为上的重复切换
          $btn.toggle(function(){

        //显示元素

    },function(){

       //隐藏元素

    }

    )

       toggle()控制样式上的重复切换

         $(“p”).toggleClass(“another”);

    判断是否含有某个样式:hasClass() 用于判断元素中是否含有某个class

        $(“p”).hasClass(“another”);

    设置和获取HTML/文本及值:

      html()用于读取或设置某个元素中的html内容

       var p-txt=$(“p”).html();

       alert(p-txt);

       $(“p”).html(“<strong>&&&&&&</strong>”);

     text()用于读取或设置某个元素中的文本内容。

        var p-txt=$(“p”).text();

        alert(p-txt);

     val()用于设置和获取元素的值。

    遍历节点:children()、next()、prev()、siblings()、closest()、parent()、parents()、closest()、

      CSS-DOM操作:读取和设置style对象的各种属性

       $(“p”).css(“color”);

       $(“p”).css(“color”,”red”);

      元素定位:offset()、position()、scrollTop()、scrollLeft()

        offset():获取元素在当前视窗的相对偏移

        position():获取元素相对于最近的一个position样式属性为relative或absolute的祖父节点的相对偏移。

        scrollTop():获取元素的滚动条距顶端的距离

        scrollLeft():获取元素的滚动条距左端的距离

    章四  jQuery中的事件和动画

    知识点1:jQuery事件

    知识点2:jQuery动画

    章五  jQuery对表单、表格的操作

    章六  jQueryajax 

    宝剑锋从磨砺出,梅花香自苦寒来。
  • 相关阅读:
    [windows菜鸟]C#中调用Windows API参考工具
    [windows菜鸟]C#中调用Windows API的技术要点说明
    [windows菜鸟]Windows API函数大全(完整)
    C#卸载加载到进程里的dll
    C# 防火墙操作之开启与关闭
    CMD命令行管道命令
    linux kernel elv_queue_empty野指针访问内核故障定位与解决
    U-Boot Driver Model领域模型设计
    linux I/O stack cache 强制刷新
    基于lcov实现的增量代码UT覆盖率检查
  • 原文地址:https://www.cnblogs.com/haimengqingyuan/p/6980312.html
Copyright © 2020-2023  润新知