zoukankan      html  css  js  c++  java
  • Live2d Test Env

    jquery封装了JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

    核心关键字: 链式、多功能、高效灵活

     

    1.安装jquery

      1)npm下:

    npm install jquery
    

      2)文件引入:

      <script src="./jquery/jquery.min.js"></script>
    

      3)cdn在线引入

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    

      ps:日常demo使用jquery.js,这样格式更清晰,而项目上线时则推荐使用迷你版,它精简了大量空格,

    提高了效率

    2.在script中的使用

      在script中,将“ $ ”(数字4键上的美元符号)比作jquery,换句话说,$在JavaScript中指的就是jQuery,jQuery对象与JavaScript对象是不同的

      1)jq的入口函数

      所有的jQuery语句都被包裹在一个$入口函数中

      $(function() {
                // jq函数写在这里  
    });

      你也可以像下面这样写,不过通常按照上面写比较简洁:

    $(document).ready(function(){
     
       // jq函数写在这里
     
    });
    

      引入js的window.onload:

      window.onload函数是指当html和css加载完毕后执行的js文件,这样是为了防止出现页面还未加载完毕,js就出现在了页面中的这种意外事故。通常写在head标签内,(当然要写在script内)

      $(document).ready()函数正是对标js的window.onload,然而,它 与window.onload也有几点不同:

        a:$(document).ready()函数可以没有加载限制,这意味着,你可以将它写在任意一个你喜欢的地方(前提是外面要有script包裹)

        b:js的window.onload只能写一次,而$(document).ready()可以写多次。

    3.jQuery的各种选择器

        jq的强项就是精于各种dom操作,这一点在选择器上就可以看出来

        通用语法:

     $(function() {
                $(" 选择器 ").method() //找到某个dom元素并对它进行操作
            })
    

      

     

        标签选择器:

     $(function() {
                $(" button ").method() //找到button伪数组并对它们进行操作
            })
    

      请注意!除非保证只有一个,标签选择器通常找到的是一类伪数组,要想对某个标签操作建议后加eq()

     $(function() {
                $(" button:eq(0) ").method() //此时选中了第0个button标签
            })
    

        类选择器:

    $(function() {
                $(".btn").method() //选择了类名为btn的元素并对其操作
    })

        id选择器

    $(function() {
                $("#btn").method() //选择了id为btn的选择器并对其操作
            })
    

     如果你是初学者,了解了上面的选择器就会发现--其实与css的选择器是一样的

    4.各类方法

      a.  on() 向被选元素添加事件处理程序   

      

    $(function() {
                $("#btn").on("click",function(){
                    //找到#btn元素并为它添加点击事件
                }) 
            })
    

      第一个参数是事件名,第二个是一个回调函数

  • 相关阅读:
    编译nginx时openssl报错的解决方案
    编译nginx时make报错[-Werror=implicit-fallthrough=]的解决方案
    centos8下编译安装tomcat
    解决centos安装不上apache:No match for argument: httpd
    编译安装apache
    编译apache出现gcc: error: /usr/lib/rpm/redhat/redhat-hardened-ld: No such file or directory
    配置与管理FTP服务器
    2018icpc南京现场赛-I Magic Potion(最大流)
    Codeforces 1062B Math(质因数分解)
    BZOJ 1009 [HNOI2008]GT考试(矩阵快速幂优化DP+KMP)
  • 原文地址:https://www.cnblogs.com/hjk1124/p/11648709.html
Copyright © 2011-2022 走看看