博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
锋利的jQuery--读书笔记
阅读量:4691 次
发布时间:2019-06-09

本文共 4692 字,大约阅读时间需要 15 分钟。

章一  认识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 

 

转载于:https://www.cnblogs.com/haimengqingyuan/p/6980312.html

你可能感兴趣的文章
分布式系统理论(二):一致性协议Paxos
查看>>
重写保存按钮save事件
查看>>
HDU 4983 Goffi and GCD(数论)
查看>>
阅读笔记10-职场黑话大全(互联网公司百科版)
查看>>
NHibernate版本不一致问题
查看>>
oracle 误删除数据,回退表数据
查看>>
centos安装中文支持(转)
查看>>
Android Weekly Notes Issue #218
查看>>
Java 日志管理最佳实践
查看>>
poj 1228
查看>>
课后作业-阅读任务-阅读笔记3
查看>>
博客目录 Blog directory
查看>>
scp 跨机远程拷贝
查看>>
码农干货系列【6】--javascript异步编程之:世界上最短的Promise库
查看>>
IO流
查看>>
关于读书
查看>>
list转换为map
查看>>
试用cmd markdown
查看>>
WPF学习之路由事件
查看>>
HDFS 通信接口
查看>>