zoukankan      html  css  js  c++  java
  • jQuery的学习笔记

    JQuery学习笔记

    Chapter one初识jQuery

    1.2测试jQuery

    在jQuery库中,$是jQuery的别名,如:$()相当于jQuery()

    注意:在使用JQuery进行开发的时候如果在做所有事情之前,希望jQuery操作DOM文档,就必须保证在DOM载入完毕后开始执行,应该使用ready事件作为处理HTML文档的开始。

    1.4JQuery的核心功能

    1.对外接口单一让使用更简单

    2.链式语法让编码更加的快速和优雅

    3.模仿CSS选择器让选取元素更加的精确的灵活

    4.拓展接口让JQuery更开放,富有活力

    1.5容易混淆的几个概念

    DOM对象是文档对象模型

    JQuery对象实际上是普通的JavaScript对象,他其中包含了DOM对象的集合。

    JQuery对象不能调用DOM对象的方法,DOM也不能调用JQuery对象的方法和属性,如果非要使用的话,可以把JQuery对象转换为DOM对象

    ,方法有两种:一种是借助数组下标来读取JQuery对象集合中的某个DOM对象;例如:

    <!DOCTYPE html>

    <!--我们可以把JQuery对象转化为DOM对象,看function函数-->

    <html>

    <head lang="en">

        <meta charset="UTF-8">

        <script src="../jquery/jquery-1.11.3.js" type="text/javascript"></script>

        <script type="text/javascript">

            $(function(){

                var  $li=$("li");

                var li=$li[0];

                alert(li.innerHTML);

            })

        </script>

        <title>learn</title>

    </head>

    <body>

    <ul>

        <li>what are you</li>

        <li>ia an mdai</li>

    </ul>

    </body>

    </html>

    第二种是借助JQuery对象方法,例如:

    <!DOCTYPE html>

    <!--我们可以把JQuery对象转化为DOM对象,看function函数,这是利用get()函数实现的-->

    <html>

    <head lang="en">

        <meta charset="UTF-8">

        <script src="../jquery/jquery-1.11.3.js" type="text/javascript"></script>

        <script type="text/javascript">

            $(function(){

                var  $li=$("li");

                var li=$li.get(0);

                alert(li.innerHTML);

            })

        </script>

        <title>learn</title>

    </head>

    <body>

    <ul>

        <li>what are you</li>

        <li>ia an mdai</li>

    </ul>

    </body>

    </html>

    同样我们也可以把DOM对象转化为JQuery对象,这比较简单只要把它作为参数传给$()就可以了

    <!DOCTYPE html>

    <!--我们可以把JQuery对象转化为DOM对象,看function函数,这是利用get()函数实现的-->

    <html>

    <head lang="en">

        <meta charset="UTF-8">

        <script src="../jquery/jquery-1.11.3.js" type="text/javascript"></script>

        <script type="text/javascript">

            $(function(){

                var li=document.getElementsByTagName("li");

                var $li=$(li[0]);

                alert($li.html());

            })

        </script>

        <title>learn</title>

    </head>

    <body>

    <ul>

        <li>what are you</li>

        <li>ia an mdai</li>

    </ul>

    </body>

    </html>

    因此JQuery对象和DOM对象是可以相互转换的,因为他们的操作的对象都是DOM对象。JQuery对象是由很多个DOM对象组成的,简单的来说JQuery对象就是DOM对象组成的数组,而DOM对象只是一个单个的DOM元素

    另外针对load和ready,要知道的是load只能够被编写一次,但是ready可以多次编写,也就是说$()可以出现多次

    Chaptertwo使用选择器

    2.1基本选择器

    #ID,他的返回值是单个元素

    Element,他的返回值是同类型集合元素

    ,class,他的返回值是类

    *,他的返回值是所有的元素

    SelectorN,分别选择选择器组中每个选择器匹配的元素,然后合并返回所有的元素,相当于或

    ID选择器的用法:
    语法结构:
    $(“#id”)或者JQuery(“#ID”)

    这种ID选择器在JavaScript里面的用法是

    Document.getelementbyid(“id”)

    注意:如果ID选择器中含有特殊的字符那么要用双斜杠对特殊字符进行转义

    比如一个ID地址是 [dix] 那么他的JQuery就应该写成以下的形式

    $(“#\[dix\]”)  前面一个\是用来把 [ 进行转义的,后面一个\是用来把  ] 进行转义的

    标签选择器的用法:
    语法结构 :
    $(“标签名字”)

    这种标签选择器在JavaScript里面的用法是:
     document.getelementbytagname(“tagname”)

    如果要用JavaScript写的话那么要记住他的前面不是$(),而是window.onload,如下例子的表示形式:

    <script type="text/javascript">

           window.onload=function() {

               document.getElementById("name1").style.color="red";

           }

        </script>

  • 相关阅读:
    增加增删改查按钮
    基于.net创建一份报表模块
    bootstrap 三层设计
    DI 依赖注入之StructureMap框架
    unit vs2017基于nunit framework创建单元测试
    Oracle彻底卸载
    sql 统计常用的sql
    Webserver asp配置及伪静态设置
    MVC ASP.NET MVC5使用Area区域
    VS 发布MVC网站缺少视图解决方案
  • 原文地址:https://www.cnblogs.com/whatyouknow123/p/4818016.html
Copyright © 2011-2022 走看看