初识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 条评论
登录 后参与评论

相关文章

来自专栏前端儿

无聊的人用JS实现了一个简单的打地鼠游戏

如果点击颜色比较深的那个(俗称坏老鼠),将扣分50;如果点击颜色比较浅的那个(俗称好老鼠),将得分100

1951
来自专栏前端新视界

CSS 特殊属性介绍之 pointer-events

首先看一下 MDN 上关于 pointer-events 的介绍: CSS属性 pointer-events 允许作者控制特定的图形元素在何时成为鼠标事件的 t...

20510
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit

992
来自专栏前端说吧

JS-点和中括号

3835
来自专栏数据小魔方

超强脑洞第三弹之——ggplot构造瀑布图

对,就是瀑布图,你没看错。而且是使用ggplot现有图层叠加构造,并没有用任何ggplot的外挂插件。 作图理念是在数据源的构造上,方法与《Excel图表之道》...

2983
来自专栏前端说吧

css笔记 - 张鑫旭css课程笔记之 absolute 篇

即是说,absolute后,元素和浮动元素的特性差不多,只不过absolute脱离文档流,元素飘在天上,float还在凡间。

842
来自专栏练小习的专栏

display:inline-block的深入理解 BY blank

在使用CSS实现表现的时候,会经常接触到display:inline-block这一属性,无论是初接触Web标准还是接触标准已久的朋友,大都会对这一属性感觉很迷...

2179
来自专栏青蛙要fly的专栏

项目需求讨论- 自定义滚轮(第二波新实现)

大家好,在前段时间我写过用ScrollView实现了自定义滚轮,但是在循环的效果不是特别好。(这次文章底部附上了Demo。O(∩_∩)O~)

1052
来自专栏听雨堂

页面布局的一些心得

关于表格: 1. 表格用于控制大的板块比较好,居中很方便。同行同列等相对位置不会错乱。 2. 表格难于精确控制,由于历史长,表格属性,css等都能控制,也容易混...

1915
来自专栏mathor

概率论与数理统计(一)

1184

扫码关注云+社区

领取腾讯云代金券