JQuery简化学习

一、 简介:

1 关于jQuery

jQuery是一个轻量的js库，提供了dom选择、操作、兼容完善的事件机制和Ajax的封装，使之有更为简便和简捷的去开发js程序。JQuery的底层是JavaScript、由于JavaScript操作不太方便、选择器较少、浏览器兼容是个问题、JavaScript原生的Ajax交互比较繁琐。jQuery是JavaScript众多框架之一。

2 关于JavaScript

其实JavaScript非常强大, 作为后台开发、我的理解是这样的。JavaScript由三部分组成: ECMAScript、Bom、DOM。ECMAScript是原生的基于对象语言、BOM是浏览器的处理、DOM是一套接口,JavaScript支持,同样DOM同样可以被xml等使用,是一套标准接口而已,不能说就是JavaScript的一部分。jQuery是前端框架、主要运用了DOM和BOM。而ECMAScript相关的框架包括node.js, 这是后台语言。所以很多资料介绍JavaScript说是支持前后台的语言,嗯,的确是这样子的!

很多前端学习者在纠结到底先学习JavaScript、还是直接jQuery? 这就像后台学习者问道:跳过servlet、直接学习框架怎么样? 我认为学习应该循序渐进、看完以上介绍,不妨先学习JavaScript。

接着、我们一起来学习jQuery怎么样（我也不太会）!

jQuery参考文档:http://tool.oschina.net/apidocs/apidoc?api=jquery

二、JQuery的使用

1、前端编辑器

前端开发工具真不少,下面推荐几款。Visual Studio Code：https://code.visualstudio.com/ 、WebStorm、HBuilder; 支持国产、用HBulider吧。

扫描二维码关注公众号，回复： 2162343 查看本文章

2、jQuery库

先要使用jQuery,必须要有库文件才能使用。下载JQuery开发库文件到本地,直接引用（推荐）;或者使用在线库文件。

<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>

通过前面的介绍、我们了解了JQuery和JavaScript、也准备了库和开发工具。到了学习jQuery的时候了,先要说明: 我不是纯正的前端开发者,我只负责介绍总结基本的知识、方便日后继续和深度学习。

三、JQuery和JavaScript对象

很多后台人员傻傻分不清JavaScript和jQuery对象, JavaScript对象: var divElement = document.getElementById("a");

jquery对象: var e=$("#a") ---按照id查询 jQuery的选择器都有一个明显的标志"$"。对象转换.


//1、jQuery对象->JavaScript对象
var $div = $("#divID");//jquery对象(注意这是一个数组,尽管是通过id获取的)
var divElement = $div[0];//js对象(方式一)
var divElement 2= $div.get(0);//js对象(方式二)

//2、JavaScript对象->jQuery对象

var inputElement = document.getElementById("inputID");//js对象

var $input = $(inputElement);//jquery对象

四、强大的JQuery选择器

通过选择器，能定位web页面中的任何标签。jQuery有丰富的选择器（9共类）

1、基本选择器

也就是最常用的id或者class或者标签等选择器,类似JavaScript选择器。

“#” 代表ID查询、“.”代表class查询、“标签名”代表标签查询。

       //1)查找ID为"div1ID"的元素
           $("#div1ID"); //“#” 代表ID查询
           
      //2)查找DIV元素的个数
        $("div").size() ; //div元素查询
          
      //3)查找所有样式是"myClass"的元素
          $(".myClass");  //class查询
      
      //4)查找所有ID为div1ID,CLASS为myClass,P元素的
           $('#div1ID,.myClass,p'); //综合查询

通过基本选择器查询不是可以找所有的元素了吗, 为什么还需要其他选择器? 是的、理论上只要给一个元素ID,都可以定位到元素,那如果我要选择表格中1、3、5行呢? 继续。

2、层次选择器

父子,兄弟关系的选择器

（1）ancestor descendant 在给定的祖先元素下匹配所有的后代元素（子孙）

（2）parent > child 在给定的父元素下匹配所有的子元素（子）

（3）prev + next 匹配所有紧接在 prev 元素后的 next 元素

（4）prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

$("form input");       // 选择form中所有input子元素（包括孙子）
                       //结果[ <input name="name" />, <input name="newsletter" /> ]
$("form > input")；     //选择子元素 [ <input name="name" /> ]

$("label + input") ;    //匹配所有跟在 label 后面的next input 元素 name="name" />, <input name="newsletter" /> ]

$("form ~ input");    //匹配所有跟在 form 后面的所有input 元素[ <input name="none" /> ]

3、加强的基本选择器

处理前后左右关系的选择器。

:first //获取第一个元素
:last // 获取最后个元素
:not(selector) //去除所有与给定选择器匹配的元素
:even //匹配所有索引值为偶数的元素，从 0 开始计数
:odd //匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index) //匹配一个给定索引值的元素
:gt(index) //匹配所有大于给定索引值的元素
:lt(index) //匹配所有小于给定索引值的元素
:header //匹配如 h1, h2, h3之类的标题元素
:animated //匹配所有正在执行动画效果的元素

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

$('li:first'); //[ <li>list item 1</li> ]

<input name="apple" />
<input name="flower" checked="checked" />

$("input:not(:checked)")

4、内容选择器

按照内容选择元素。

:contains(text) //内容中包含text的元素
:empty //内容为空的元素
:has(selector) // 具有selector选择器的元素
:parent //父母节点

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn

$("div:contains('John')")；//[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

5、属性选择器

根据style属性选择元素。

[attribute] //匹配包含给定属性的元素。比如id
[attribute=value] //匹配包含给定属性值的元素。比如 $("input[id='div']");
[attribute!=value] //匹配所有不含有指定的属性
[attribute^=value] //匹配给定的属性是以某些值开始的元素
[attribute$=value] //匹配给定的属性是以某些值结尾的元素
[attribute*=value] //匹配给定的属性是以包含某些值的元素

<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />

$("input[name='accept']");//<input type="checkbox" name="accept" value="Evil Plans" />

"$(input[name^='newsletter']");//[<input type="checkbox" name="accept" value="Evil Plans" />]

这里就介绍以上5种选择器、这样你就知道接着应该怎么学习剩下的。查看文档“选择器”内容 http://tool.oschina.net/apidocs/apidoc?api=jquery

好的、恭喜你。你学完了jQuery最常用、很重要的一个部分。

五、文档处理-DOM

对JavaScript-DOM部分的进一步封装,进而对功能增强和简化操作。学会看着文档学习,文章下面实例都是最常见、使用的方法。

1、内部插入

append（content）经常用于ajax中处理数据使用。

<!DOCTYPE html>
<html>
    <head>
        <!--声明当前页面的编码集：charset=gbk,gbk2312(中文编码),utf-8(国际编码)-->
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <title>Jquery-DOM演示</title>
         <!--引入jQuery在线库-->
        <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
        <!--
            作者：[email protected]
            时间：2018-07-15
            描述：JavaScript代码块-JQueryDOM演示
        -->
        <script type="application/javascript">
            //$(function(){}); 页面初始化
            $(function(){
             var str="<a id='baidu' href='http://www.baidu.com'>百度</a>"
             //内部追加内容
            $("#a").append(str);
            });
        </script>
    </head>
     
    <body>
        <div id='a'>
            <!--<a id="baidu" href='http://www.baidu.com'>百度</a>-->
        </div>
    </body>

</html>

2、外部插入

方法有这几个、after(content|fn)、before(content|fn)、insertAfter(content)、insertBefore(content)。演示:

<!DOCTYPE html>
<html>
    <head>
        <!--声明当前页面的编码集：charset=gbk,gbk2312(中文编码),utf-8(国际编码)-->
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <title>Jquery-DOM演示</title>
         <!--引入jQuery在线库-->
        <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
        <!--
            作者：[email protected]
            时间：2018-07-15
            描述：JavaScript代码块-JQueryDOM演示
        -->
        <script type="application/javascript">
            //$(function(){}); 页面初始化
            $(function(){
             var str="<a id='baidu' href='http://www.baidu.com'>百度</a>"
             //1、内部追加内容
            $("#a").append(str);
            //2、外部插入
            var htmlstr="<p>hello 我在你下面</p>";
            var str2="hello 我在你上面!"
            $("#a").after(htmlstr);
            $("#a").before(str2);
            });
            
        </script>
    </head>
     
    <body>
        <div id='a'>
            <!--<a id="baidu" href='http://www.baidu.com'>百度</a>-->
        </div>
    </body>

</html>

3、删除节点

删除方法 empty():清空指定元素的内容,彻底删除,不能恢复。

remove([expr])：这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但是在HTML中不可见。

detach([expr])：这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
         <!--引入jQuery在线库-->
        <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    </head>
    <script type="application/javascript">
        //初始化
        $(function(){
            //清空u1
            $("#u1").empty();
            //删除u2的第一个元素、加强的基本选择器
            $("#u2 li:first-child").remove();
        });
        
    </script>
    <body>
        <ul id="u1">
            <li>live1-1</li>
            <li>live1-2</li>
        </ul>
        <ul id="u2">
            <li id="li1">live2-1</li>
            <li>live2-2</li>
        </ul>
        
    </body>
</html>

剩下的内容还有包裹、替换、复制,不用一一测试。

六、属性操作

猜你喜欢