jQuery基础

最新推荐文章于 2023-06-11 13:49:24 发布

Zhweb_box

最新推荐文章于 2023-06-11 13:49:24 发布

阅读量112

点赞数

分类专栏： jq 文章标签： jquery

本文链接：https://blog.csdn.net/ZiXiaweb/article/details/109296225

版权

jq 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

什么是jQuery？

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do
More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

如何使用jQuery？

使用 jQuery 的基本步骤(导包的代码一定要放在js代码的最上面。)

引包
入口函数
功能实现代码（事件处理）

jQuery的入口函数

案例：

//第一种写法的入口函数
$(document).ready(function () {
     console.log("我是第一种写法的入口函数");
})
//第二种写法的入口函数
$(function () {
     console.log("我是第二种写法的入口函数");
})

jQuery的入口函数与原生的入口函数的区别

原生的缺点:

不能写多个入口函数写了多个就会覆盖前面的
原生的获取元素的名字太长不好记
容错率低如果前面的代码出现问题那么后面代码全都不会执行

注：
jQuery的入口函数可以写多个。
原生js的入口函数是需要等到页面上所有的资源(dom树外部的js文件外部的css文件图片… )都加载完毕之后jquery的入口函数只需要页面的dom树力戴完毕就可以执行。

举两个例子来看看两者的区别
例：

//js给div加边框
window.onload = function () {
    var btn = document.getElementById("btn");
    var divlist = document.querySelectorAll("div")

    btn.onclick = function () {
        for(var i = 0; i < divlist.length;i++){
            divlist[i].style.border = "1px red solid"
        }
    }
}
//jquery给div加边框:
 $(document ).ready(function () {
    $("#btn").click(function () {
        $("div"). css("border", "1px red solid");
    });
});

$的介绍

$就是jQuery的别称而jQuery就是jQuery库提供的一个函数.(好像也不仅仅只是函数，因为还有 $.ajax(options)这样的使用，等同 jQuery.ajax(options)) 这个函数的作用是根据 () 里的参数进行查找和选择html文档中的元素，函数作用之一就是GetElementByID的代替，但()内不仅可以是ID，还可以是各类选择器。

比如：
( d o c u m e n t ) 就是选取整个文档对象那是不是只可以用 (document)就是选取整个文档对象那是不是只可以用(document)就是选取整个文档对象那是不是只可以用来代替，不是。为了防止命名冲突，jQuery库提供了另外的机制来给jQuery函数起另外的别名。

jQuery 的两大特点

链式编程：比如.show()和.html()可以连写成.show().html()。
隐式迭代：隐式对应的是显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。

DOM对象和 jQuery对象对比

1.使用DOM元素(原生js的方法)给div添加背景颜色
原生js选择器获取到的是dom对象document . getElementsByClas sName
原生的DOM元素只能调用dom的属性或者方法不能调用jquery的方法

  var one = document.getElementById("one");
    console. log(one);
    // // one.css("backgroundColor"，"green"); // Uncaught TypeError: one.css is not a function
    // one.style.backgroundcolor =“ green" ;

2.使用jQuery对象
使用jQuery选择器获取到的是jQuery对象
只能调用jQuery的方法不能调用的原生的

var $one = $("#one"); //获取到的是jQuery对象保存 jQuery对象变量命名的时候最好使用$开头
console. log($one);
// $one.css("backgroundColor", "green"); // jQuery对象调用jQuery方法
// $one. style . backgroundColor = "green"; // 报错不能调用原生 的方法或者属性

jQuery对象是什么?

根据特征来看像数组 ,验证是不是说数组 jQuery 对象是一个伪数组不能调用数组里面的方法

  console. log($one.__proto__ === Array. prototype);
  console. log(Object.prototype.toString.call($one));

DOM和jQuery对象的相互转换
dom元素转换成jQuery对象 :直接把dom作为参数传递给$方法

var $divOne = $(one);
console.log($divOne);

把jQuery对象转换成dom元素直接使用下标职值获取到的是就是dom元素

$divs = $("div");
console . log($divs);
var divOne = $divs[0];
console.log(divOne);
//调用jQuery的get方法 参数传索引
var divTwo = $divs . get(1);
console . log(divTwo)

经典案例：

<body>
<ul>
    <li>我是第一个li元素</li>
    <li>我是第二个li元素</li>
    <li>我是第三个li元素</li>
    <li>我是第四个li元素</li>
    <li>我是第五个li元素</li>
    <li>我是第六个li元素</li>
    <li>我是第七个li元素</li>
    <li>我是第八个li元素</li>
</ul>
</body>
    <script src = ./jquery-1.12.4.min.js></script>
    <script>
        $(function(){
        // 1.获取所有的1i元素
            var $lis = $("li");
            console.log($lis);
            // 2.遍历每一个1i元素
            for(var i = 0; i < $lis.length; i++) {
                //判断是奇数行还是偶数行
                if (i % 2 == 0) {
                    // $lis[i].css("background-color", "pink" );
                    $lis[i].style.backgroundColor = "pink";
                }else{
                    // $lis[i]. style. backgroundColor = "skyblue" ;
                    $($lis[i]).css("background-color", "skyblue");
                }
            }
        })
    </script>