jQuery学习

最新推荐文章于 2024-05-05 23:51:11 发布

Init1al-Z

最新推荐文章于 2024-05-05 23:51:11 发布

阅读量236

点赞数

分类专栏：学习感悟前端文章标签： jQuery

本文链接：https://blog.csdn.net/ezio23/article/details/96448676

版权

学习感悟同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

jQuery 学习

$1 jQuery相对于原生JS的优势

可以写多个入口函数
函数名字简单易记
jQuery代码简洁（隐式迭代）
解决了浏览器兼容问题
代码容错率高，前面的代码有问题不影响后面代码的执行
链式编程

$1.1 入口函数

// 第一种写法
$(document).ready(function() {
    ...
    });
// 第二种写法
$(function() {
    ...
});

jQuery入口函数与原生window.onload方法的区别：

jQuery可以写多个入口函数而原生JS不能
jQuery的入口函数先于window.onload方法执行，与书写顺序无关；因为jQuery在页面的DOM树加载完毕后进行，而window.onload在页面上所有的资源（DOM树，外部css/js文件，图片等等）加载完毕后进行

$1.2 '$'是什么？

// jQuery源码
// 观察jQuery源码可知jQuery文件定义了一个自执行函数
(function(){
...
}(...));
// 源码中还定义了
window.$ = window.jQuery = jQuery
// 又因为引入js文件会执行js文件，引入jQuery.js就会自动执行其中定义的自执行函数
// 这个自执行文件相当于为window添加了$和jQuery属性
// $和jQuery等价，是一个函数，参数传递不同，效果也不一样
// 1.传入匿名函数-入口函数
$(function() {
});
// 2.传入字符串-选择器/创建标签
$('#id');
$('<div>new div</div>');
// 3.传入DOM对象-将DOM对象转换为jQuery对象

什么是DOM对象？
简单的说，DOM对象就是通过原生JS选择器获取到的对象document.getElementById('#od')
什么是jQuery对象？
简单的说，jQuery对象就是通过原生JS选择器获取到的对象$('#id')，jQuery对象是一个‘伪’数组，是DOM对象的包装集
注意DOM对象只能调用DOM的属性和方法，jQuery对象只能调用jQuery的属性和方法

DOM对象与jQuery对象的相互转化：

DOM转jQuery：

var div1 = document.getElementById("id");
var $div1 = $(div1);    // 习惯以‘$’开头命名jQuery对象

jQuery转DOM：

// 1.使用下标取出DOM对象
var $divs = $('div');
var div0 = $divs[0];
// 2.使用get方法，依然是传下标
var div1 = $divs.get(0);

不要忘记，jQuery对象用数组下标的形式获取的是DOM对象而不再是jQuery对象！！！

$1.3 开关灯实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.4.1.js"></script>
    <style>
        div {
            margin: 0 auto;
            text-align: center;
        }
        .container {
            border: 2px solid deepskyblue;
            height: 100%;
            width: 50%;
        }
        img #main-image {
            height: 100%;
            width: 100%;
        }
        img #lightBulb {
            height: 40px;
            width: 40px;
        }
    </style>
    <title>开关灯</title>
</head>
<body>
<div class="container" >
    <img src="001.png" id="main-image" alt="图片加载失败">
</div>
<div class="controller">
    <img src="images/lightOff.png" id="lightBulb">
</div>
<script type="text/javascript">
    // 入口函数
    $(function () {
        var light = 1;
        var turnLights = function () {
            light = (light+1)%2;
            if (light == 1) {
                $("body").css("backgroundColor", "#FFFFFF");
                $bulb.attr("src", "images//lightOff.png");
            }
            else {
                $("body").css("backgroundColor", "#0F0F0F");
                $bulb.attr("src", "images//lightOn.png");
            }
        }
        var $bulb = $('#lightBulb');
        $bulb.click(turnLights);
    })
</script>
</body>
</html>

$1.4 其他常用方法

text()

// 获取文本，会获取到标签中的所有文本，包括后代元素中的文本
$("#id").text();
// 设置文本，会覆盖原来的文本；
// 即使文本中包含标签，也仍会按照文本添加到页面显示出来
$("#id").text("文本"); 
// 由于jQuery隐式迭代的特性，jQuery对象设置文本会替换掉
// 选择到的多个DOM元素的文本

css()

// 获取css属性
$("div").css("border");
// 在IE浏览器中获取border这样的属性一定要明确
// 具体的边框和具体的边框属性
$("div").css("border-top-width");
// css格式和JS格式都可以获取到属性
$("div").css("background-color");
$("div").css("backgroundColor");
// 若要获取到的多个DOM对象的同一个属性值，只能获取到第一个DOM对象的属性值
// <div width="300px"></div>
// <div width="200px"></div>
// <div width="400px"></div>
$("div").css("width");  // 300px
// 设置多样式
$("div").css({
    "width": "300px";
    "background-color": "red";
});

设置的样式是行内样式

$2 jQuery选择器

$("div");   // type选择器
$(".myClass");  // class选择器
$("#myID"); // id选择器
// 组合选择
$("div.myClass");   // 交集选择器
$(".myClass,.hisClass");    // 并集选择器
// 子代选择器
$("ul > li");   // 不会选择到孙代
// 后代选择器
$("ul li");     // 选择所有后代元素
// 过滤选择器
$("li:eq(n)");   // 索引为n的li标签
$("li:odd");    // 索引为奇数
$("li:even");   // 索引为偶数
// 筛选选择器
$("ul").children("li"); // 选择子代
$("ul").find("li"); // 选择后代
$("#myID").siblings("li");  // 兄弟节点，不包括自己
$("#myID").parent();    // 父亲节点
$("#myID").eq(index);   // 类似于过滤选择器
$("#myID").prev();  // 上一个兄弟节点
$("#myID").next();  // 下一个兄弟节点

Init1al-Z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习

jQuery 学习$1 jQuery相对于原生JS的优势可以写多个入口函数函数名字简单易记jQuery代码简洁（隐式迭代）解决了浏览器兼容问题代码容错率高，前面的代码有问题不影响后面代码的执行链式编程$1.1 入口函数// 第一种写法$(document).ready(function() { ... });// 第二种写法$(function() {...
复制链接

扫一扫

专栏目录