专栏首页个人随笔初识jQuery 基础篇

初识jQuery 基础篇

首先提供一个知识点外资源:

在线编程:无需编程环境:

  https://codepen.io/pen

  添加jQuery库:

    Settings-->JavaScript-->quick-add-->jQuery

 jQuery:

基于js研发的封装库:可以屏蔽之前书写js代码考虑浏览器兼容性的问题。问题交给框架的编写者

企业生成环境经常使用js库jQuery是以后学习其他封装的基础库,99%企业都在使用jQuery

高级库:

  Bootstrap(http://www.bootcss.com/p/layoutit/ 可视化布局),zepto,YUI,easyUI,jQuery UI,Ext js(非常笨重,页面效果非常华丽,适合局域网)

  Vue

  Angular

  React

jQuery:

  所有高级库的基础

  高于js ,但又低于其他高级库

  万事万物皆方法(将js属性功能封装为方法)

  设计思想:写最少的代码,做最好的事情

      Write less,do more

搭建jQuery开发环境:

  引用jQuery库

jQuery能做什么?

  1.Js能做的都可以做

  2.访问和操作DOM元素

  3.控制页面样式

  4.对页面事件进行处理

  5.扩展新的jQuery插件

  6.与Ajax技术完美结合

优势:

  1.体积小

  2.强大的选择器:精确定位(重点)

  3.出色的DOM封装

  4.可靠的事件处理机制

  5.浏览器兼容

  6.隐式迭代简化编程

  7.丰富的插件支持

装载的先后次序:

jQuery封装库在上

  Js代码在下

语法结构:

$(document).ready()=function(){};

$(function(){});

注:$(function(){})执行顺序在window.onload之前

语法结构:

1. 工厂函数$():将DOM对象转化为jQuery对象、$(selector).action();

2. 选择器selector:选择器

方法:

  1. $(selector).addClass()

    A. 向被选元素添加一个或多个类样式

    B. 可以是一个,也可以是多个

 2. $(this)

    A. 是一个jQuery对象

    B. 指向鼠标指针当前移向的一菜单级

    C. 代表当前

  3. $(selector).css()

    A. css(“属性”,”属性值”);//设置一个css属性

    B. css({“属性1”:”属性值1”,属性2””:”属性值2”......});//同时设置多个css属性

  4. $(selector).children()

    A. jQuery中遍历后代的一种方法

    B. 用作查找元素的所有直接子元素

5. $(selector).show()

    显示元素

 6. $(selector).hide()

    隐藏元素

论css()方法与addClass方法的区别:

  A. css()方法为所匹配的元素设置给定的css样式

  B. addClass()方法向所匹配的元素添加一个或多个类,改方法不会删除已经存在的类,仅在原有基础上追加新的类样式

  C. 基于结构与样式分离的原则,通常在实际应用中,为谋元素添加样式,使用addClass()方法比css()方法的频率高很多,因此建议使用addClass()方法为元素添加样式

jQuery程序的代码风格

  1. ”$”的使用

    A. jQuery程序的标志

    B. $==jQuery

    C. 无论页面元素的选择器,还是功能函数的前缀,都必须使用改符号

 2. 链式操作

    A. 在对DOM元素进行多个操作时。为避免过度使用临时变量或不必要重复代码

    B. 链式编程:可以对一个对象进行多重操作,将操作结果返回给该对象

    C. 栗子:光棒效果

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="../jquery-1.12.4.js"></script>
<script type="text/javascript" src="Day01.js"></script>
<body>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>西雅图</li>
    </ul>
</body>
</html>

jQuery:

$(function () {
    $("li").mouseover(function () {
        $(this).css("background-color","pink");
    }).mouseout(function () {
        $(this).css("background-color","");
    });
});

3. 隐式迭代

  $(“li”):一行代码即可获取页面所有的li标签,可以为其所有li表示绑定事件或设置样式等

4. 添加注释

 A. 开发阶段:

    a) 为代码添加注释,可以增加代码的可读性

    b) 能够让别人很容易地读懂你的代码

    c) 便于后期维护

 B. 维护阶段:

    a) 建议把关键的模块形成开发文档

    b) 便于后期维护,即便后期删除代码注释,也不影响后期维护

C. 产品正式发布:

    a) 建议删除注释

    b) 减少文件大小,加快下载速度

    c) 提高用户体验

DOM对象与jQuery对象:

一. DOM对象

  1. 文档对象模型 (Document Object Model)

  2. 每个HTML页面都有一个DOM,每个DOM都可以表示一棵树

简要图:

论DOM拿文本值:

1. inner HTML:拿到的是标签与文本值

2. inner Text:拿到的是金文本值

3. Value:表单元素的value值

二.jQuery对象

  jQuery对象就是通过jQuery包装DOM对象后产生的对象,就能够使用jQuery中的方法

  栗子:

$(“#box”).html();
//获取id为box元素内的html代码

jQuery不可使用DOM对象一系列方法,它有自己的资源

论jQuery拿文本值:

4. html():拿到的是标签与文本值

5. text():拿到的是金文本值

6. val():表单元素的value值

三.互转

DOM:土鳖

jQuery:土豪

1. DOM-->jQuery(土鳖变土豪)拿钱砸:$

Var txtName = document.getElementById(“txtName”);

Var $txtName = $(txtName);

2. jQuery-->DOM(土豪变土鳖)分解

Var $div = $(“#box”);

Var div = $div[0];

操作样式:

1. dom:三种

(1) Dom.style.fontSize=”属性值”;

(2) Dom.className = “class属性值”;

(3) Dom.style.cssText=”A:B;C:D”;

2. jQuery:三种

(1) Jquery.css(“属性”,”属性值”);

(2) Jquery.css({“属性1”:”属性值1”,属性2””:”属性值2”......});

(3) jQuery.addClass(“类的属性值”);

事件注册:

1. dom: 有 on前缀

Dom中所有事件的开始都是有on的

栗子:

Dom.onclick=function(){};

2. jQuery: 无on前缀

直接上栗子:

jQuery.click(function(){});

经典栗子:使用jQuery变换网页效果:

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="../../../../../jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<body>
<h1>你是人家的四月天</h1>
<div>
    <p> 笑响亮了四面风</p>
    <p> 轻灵在春的光艳中交舞看变</p>
    <p>你是一月早天的云烟</p>
    <p>黄昏吹着风的软</p>
    <p>....</p>
    <p><a href="#">查看全部</a></p>
</div>
<hr/>
<div>
    你是人间四月天是永正图书推出的“比烟花寂寞”系列之三。“比烟花寂寞"系列包括《民国女子》《爱眉小札》《你是人间四月天》《你是我眉心未完的诗》。这系列以前所未有的包装形式推出,引起读者尖叫连连。一经上市,便引发各大报纸、媒体的一致报道。
    有人崇拜她,把她当做女神、偶像;也有人放出话来,“喜欢她的女人,品行有问题;喜欢她的男人,脑子有问题。”
    她是缺乏幽娴品德的女人,她喜好与人辩论,她用诗句表达她的哀愁,她精通文理,学贯中西。她对文学和艺术,具有本能的、直接的感悟。生长富贵,命运坎坷,修养让她把热情藏在里面,热情却是她生活的支柱。
    她,就是那个万千宠爱于一身的一代才女——林徽因。
    《你是人间四月天》是林徽因的一本小说、诗歌、散文、剧本集,几乎收录了林徽因所有的经典文学作品。其散文成就颇大,虽然数量不多,但风格独特,知识性强。诗歌尤
</div>
</body>
</html>

jQuery:

$(function () {
    var $div = $("div:last");
    var $a = $("a");
    $div.hide();
    $a.click(function () {
        if ($a.text() == "查看全部") {
            $div.show();
            $a.text("折叠");
        }else {
            $div.hide();
            $a.text("查看全部");
        }
    });
});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 析构函数(C#)

     析构函数又称终结器,用于析构类的实例。 定义   析构函数(destructor) 与构造函数相反,当对象结束其生命周期时(例如对象所在的函数已调用完毕),系...

    房上的猫
  • GRPC-JAVA

    近一年来一直在用公司内wiki进行技术调研以及记录,后期有时间将逐步迁移至博客园。

    房上的猫
  • Java MD5加密与RSA加密

    房上的猫
  • 前端基础-jQuery简介

    JavaScript开发的过程中,处理浏览器的兼容很复杂而且很耗时,于是一些封装了这些操作的库应运而生。这些库还会把一些常用的代码进行封装。

    cwl_java
  • 强烈推荐:240多个jQuery插件

    概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后...

    hbbliyong
  • 【深入浅出jQuery】源码浅析2--奇技淫巧

    Sb_Coco
  • 【深入浅出jQuery】源码浅析--整体架构

    Sb_Coco
  • Github改版,宣布放弃jQuery || 你的青春里,是否有过 JQuery 的身影?

    2018年7月25日,Mislav Marohnić在推文中宣布GitHub前端已经彻底删除jQuery依赖,并全部依赖原生API。

    芋道源码
  • 2019 年了,为什么我还在用 jQuery?

    为了保证可读性,本文采用意译而非直译。翻译仅供学习探讨,不代表 Fundebug 观点。

    Fundebug

扫码关注云+社区

领取腾讯云代金券