jQuery的诞生及简单操作

一、jQuery诞生背景

JavaScript中原生的好多写法对操做页面元素来说一个词“繁琐”,虽然原生有原生的好处,但是“繁琐”在好多时候还是让人难以忍受的。

就在那个时候,有位名叫John Resig的外国工程师创立了名为jQuery的一个框架库。jQuery横空出世后,成为了DOM编程领域的霸主,极大的简化了原生JavaScript的DOM编程。
围观一下jQuery的整体架构:

jQuery整体框架.png

二、jQuery能够解决处理js原生DOM操作的几个问题及相关函数

1. 页面元素选择问题解决及$()函数

$()函数就是jQuery的核心函数,query就是选择的意思,也就是说jQuery的核心功能就是选择元素:

$("#box ul li.light span")

()函数语法:```(“选择器”)```
选择的就是所有符合条件的元素(可以说成是一个集合,类似数组),而不是一个。

可以用jQuery来代替,和jQuery是同一个函数:

jQuery("#box ul li.light span")

2. 页面元素样式问题解决及CSS()函数

获取页面类名为box的元素的宽度,得到样式如下:

$(".box").css("width");

通过$()函数选择出来的东西,都是jQuery对象,所有的jQuery对象,都可以继续打点调用css函数,css函数已经封装了计算后的样式。设置样式如下:

$(".box").css({
    "width":700,
    "height" : 300,
    "opacity" : 0.4
});

3. 页面元素动画问题的解决及animate()函数

jQuery内部含有一个运动框架(牛牛牛,比原生看起来强好多!)

$(".box").animate({"left":900},4000,function(){
    alert("运动完成");
});

4. 批量添加监听、节点

$(".circles ol li").mouseenter(function(){
        $(this).css("background-color","red");
});

三、应用实例展示

1.文本加颜色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!-- 1. 引入jQuery库-->
        <script type="text/javascript" src="js/jquery-3.2.1.js" ></script>  
    </head>
    <body>
        <p> p1 </p>
        <p> p2 </p>
        <p> p3 </p>
        <p> p4 </p>
        <script>
            // $ 是1个函数
            // $("p") 是1个函数调用
            //  返回的结果  jQuery 的内部【对象】
            //  所有的p元素
            //  css 是设置样式
            //  {"color": "red"} 是 css 的参数
            $("p").css({color: "red"}); //  一行代码搞定
        </script>
    </body>
</html>
文本颜色.png

2.div元素加样式背景

<head>
      <script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
      <script>
          $(function() {
            $(".c1").css(
                    {width: 100,
                    height: 100,
                    background: "red"})
                $(".c2").css(
                    {width: 200,
                    height: 100,
                    background: "blue"})
            })
        
      </script>
        
</head>
<body>
        
        <div class="c1" ></div>
        <div class="c2" ></div>
</body>
div加背景.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,681评论 18 503
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,466评论 0 44
  • 第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 1,618评论 0 11
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    前端进阶之旅阅读 114,840评论 24 450
  • 麻将声声响,围城声声震。推手时间快,转眼又晚餐。赢输一声笑,输赢得餐饭。乐得升太平,餐后余粮分。
    甘朝武阅读 155评论 0 0