jquery复习日记（1）

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元素并为它添加点击事件
            }) 
        })

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