当前位置：移动技术网 > IT编程>开发语言>Jquery > 初识jQuery 基础篇

初识jQuery 基础篇

2018年04月09日 | 移动技术网IT编程 | 我要评论

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

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

　　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("查看全部");
        }
    });
});

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

VScode中的react自动补全标签代码及黄色or红色警告

解决在vscode中react标签代码不提示的问题：1、作为一个刚开始的react小白，一定有vscode中标签... [阅读全文]
荐 jquery层次选择器

jquery层次选择器按照我个人的习惯，还是先放上总的内容，然后再开始一个一个攻克。常用的几种(概述)：1.派生... [阅读全文]
关于React处理input的方法和多个input共用一个方法（不用jQuery）

关于React处理input的方法和多个input共用一个方法（不用jQuery）前言：笔者目前是一家公司的前... [阅读全文]
Jquery绑定事件及动画效果

绑定事件bind（type，data，fuc）one(type,data,fuc) //只执行一次常见事件类型名... [阅读全文]
荐 jQuery文档阅读笔记自整理——1.6w字笔记

文章目录一、jQuery 基本用法1. 入口函数的写法2. jQuery 的冲突问题3. 核心函数4. 对象5.... [阅读全文]
荐 jQuery框架（四）：动画效果

文章目录1、显示、隐藏动画（1）显示（2）隐藏（3）实现点击按钮显示、隐藏盒子（4）开关式显示隐藏动画2、滑入、... [阅读全文]
jQuery操作DOM对象的方法

# jQuery操作DOM 和增删改查 - 1.html() ```js $('ul li&... [阅读全文]
jQuery的clone()方法和data()方法

# jQuery中的clone()和data()方法 - clone() ```js $('.demo').clon... [阅读全文]
jq使用jsonp实现百度搜索

项目实现：还原百度搜索功能；项目原理：利用json回调页面传参; 什么是jsonp：就是利用<script>标签的src地址，让目标页面回... [阅读全文]
5.jQuery实现简单的on()和trigger()方法

# jQuery事件 - 1.on() ```js //1.事件类型type 2.selector 3.data... [阅读全文]

网友评论


验证码：

初识jQuery 基础篇

2018年04月09日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论