作者 | Jeskson

来源 | 达达前端小酒馆

jquery的安装和语法，jquery的多种选择器，dom操作和jquery事件。

jQuery框架，简介，优势，安装，语法，jQuery选择器，id选择器，类选择器，标记选择器，属性选择器，位置选择器，后代选择器，子代选择器，选择器对象，选择器对象遍历，页面初始化，jQuery的dom操作，查找，删除，创建，复制，插入，替换，jQuery事件，事件绑定，鼠标事件，键盘事件，表单事件，窗口事件，事件冒泡，事件解除。

jQuery是一个很好用的JavaScript函数库，写的少，做的多。

请问jQuery的好处在哪里？

它的好处在于它轻量级，什么是轻量级呢？就是说它非常请求，大小在30kb左右；具有强大的选择器和dom操作的封装，可靠的事件处理机制，有完善的ajax，jquery将所有的ajax操作封装到函数``$.ajax()`中；具有丰富的插件，完善的文档，开源的产品。

jquery安装，从jquery下载jquery库，二是从cdn中下载。

jquery官方网址

http://jquery.com

首先进入download jquery下载页面，下载最新的jquery库文件，有两个版本：生产版，Production version，用于实际网站，Development version开发版，用于测试和开发。

<head>

 <meta charset="UTF-8">

 <title>jquery</title>

 <script type="text/JavaScript" src="./js/jquery-xx.js">

 </script>

</head>


<script type="text/JavaScript">

 $(document).ready(function(){

 // 等待dom元素加载完毕

 alert("成功引入");

 });

</script>

cdn中配置Jquery，如果不下载jquery的话，可以用cdn引用的。

jquery语法：

jquery

$(selector).action()

$(this).hide()

$("p").hide()

$("p.test").hide()

$("#test").hide()

// 入口

$(document).ready(function(){

 // 执行代码

});

$(function(){

 // 执行代码

});

JavaScript的入口函数

// 入口函数如下

window.onload = function(){

 // 执行代码

}

JavaScript的入口函数与jquery入口函数：

jquery的入口函数是在HTML所有标签都加载后执行；JavaScript的window.onload事件是等所有内容（包括图片文件等）加载完之后才执行。

jquery选择器

JavaScript的选择器：

document.getElementById();

document.getElementsByClassName()

document.getElementsByTagName()

选择器$(" "),

为一个函数，为工厂函数，$为函数名称。

id选择器

$("#id")

根据给定的id匹配一个元素

类选择器

$(".class")

根据给定的类匹配元素

标记选择器

$("element")

根据给定元素名匹配所有元素

属性选择器

$("element[attribute]")

匹配包含给定属性的元素

$("div[title=test]")

位置选择器

$(element:position)

匹配符合标签中相应位置的元素

$("div:first")

匹配所有div中第一个div元素

后代选择器

$("ancestor descendant")

匹配给定的祖先元素的所有后代元素

$("#ul li")

匹配 id 为null的所有li元素

子代选择器

$("parent>child")

匹配所有指定"parent"元素中指定"child"的直接子元素

$("#标签id值")

// 原生

var div = document.getElementById('test');

div.style.border = '3px solid blue';

// jquery

$("#test1").css("border", "3px solid red");

$(".class属性值")

$(".cls1").css(...);

$("标记名称");

// 找到所有P标签

$("p")

属性选择器

$("[属性名"])

匹配所有具有指定属性的元素

$("[属性名='值']")

匹配与值相等的元素

$("[属性名!='值']")

匹配与值不相等的元素

$("[属性名^='值']")

匹配以值开头的元素

$("[属性名$='值']")

匹配以值结尾的元素

$("[属性名*='值']")

匹配包含值的元素

位置选择器：

$("selector:first")

匹配第一个元素

$("selector:last")

匹配最后一个元素

$("selector:odd")

匹配索引值为奇数的元素，从0开始计数

$("selector:even")

匹配索引值为偶数的元素，从0开始计数

$("selector.eq(n)")

匹配集合中索引值为n的元素

$("selector.gt(n)")

匹配集合中索引值大于n的元素

$("selector:lt(n)")

匹配集合中索引值小于n的元素

$("选择器1 选择器2...")


$("#test li").css("border", "2px solid red");

子代选择器

$("选择器1>选择器2>...")

选择器对象：

$("选择器").each(function(index){this})

选择器对象的遍历

$("选择器").find()

找前面选择器匹配到的元素的子元素

$("选择器").not()

在前面选择器匹配到的元素中去除某个或者某几个

$("选择器").add()

在前面选择器中再追加节点

选择器对象遍历

<body>

 <ul id="test">

  <li>d</li>

  <li>a</li>

 </ul>

</body>

<script type="text/JavaScript">

 $("#test li").each(function(index){

  this.title="我是第"+(index+1)+"个";

 });

</script>

页面初始化

<script type="text/JavaScript">

 $(function(){

  //一定会在页面加载完成后运行

 })

</script>

将jquery函数代码放到这个函数就可以等到页面加载结束再运行。

Jquery中的dom操作。

dom是document object model的缩写。文档对象模型。dom是一种与浏览器，平台，语言无关的接口，jquery中的dom操作就是对HTML中的元素进行操作。

<script type="text/JavaScript">

 $(document).ready(function(){

  // 测试

  $("#btn1").click(function(){

   alert("文本内容："+$("#test0").text());

  });

 });

</script>

<p id="test0">da</p>

<button id="btn1">da</button>

attr()获取它的各种属性的值

$(document).ready(function(){

 $("button").click(function(){

  alert($("p").attr("title"));

 });

});

创建HTML元素：

$(document).ready(function(){

 var $li1 = $("<li>d</li>");

 var $li2 = $("<li>a</li>");

 $("button").click(function(){

  $("ul").append($li1);

  $("ul").append($li2);

 });

});

插入HTML元素

append()

向每个匹配的元素内部追加内容

appendTo()

将所有匹配的元素追加到另一个指定的元素集合中

注意：$(A).append(B)的操作，不是将B追加到A中，而是将A追加到B中

prepend()

向每个匹配的元素内部前置内容

prependTo()

将所有匹配的元素前置到另一个指定的元素集合中。

注意：$(A).prepend(B)的操作，不是将B前置到A中，而是将A前置到B中

after()

在每个匹配的元素之后插入内容

insertAfter()

将所有匹配的元素插入另一个指定的元素集合的后面

注意：$(A).after(B)的操作，不是将B插入到A后面，而是将A插入到B的后面

before()

在每个匹配的元素之前插入内容

insertBefore()

将所有匹配的元素插入另一个指定的元素集合的前面。

注意：$(A).before(B)的操作，不是将B插入A前面，而是将A插入B前面

删除HTML元素

删除HTML元素一般使用jquery中的remove()和empty()

remove()的作用就是从dom中删除被选元素以及子元素，就是如果某个元素被删除了，那么它的后代元素也都被删除。

empty()的作用并不是删除HTML元素，而是清空HTML元素，可以清空选中HTML元素中所有后代HTML元素。

复制HTML元素

clone()的作用是复制HTML元素。

$(document).ready(function() {

 $("button").click(function() {

  $("body").append($("p").clone());

  });

 });

});

替换HTML元素

有两种方法：replaceWith()和replaceAll()两个方法

repalceWith()

将所有匹配的元素替换成指定的HTML元素或dom元素

repalceAll(selector)

用匹配的元素替换所有selector匹配到的元素

replaceWith()和replaceAll()的作用是一样的，只是用法不同。

A元素替换B元素：

replaceWith()的写法

A.replaceWith("B")

B.replaceAll("A")

$(document).ready(function(){

 $("button").click(function(){

  $("ul li:eq(0)").replaceWith("<li>da</li>")

 });

});

事件

鼠标事件:

click，mouseover，hover

键盘事件：

keypress，keydown，keyup

表单事件：

submit，change，focus

窗口事件:

scroll，resize

事件绑定

事件绑定语法bind()方法：

bind(type,[data],fn)


click(),blur(),focus(),

mouseover(),mouseout(),

mousedown(),mouseup()

mouseenter(),mouseleave(),

resize(),scroll(),

keydown(),keyup(),keypress()

type参数是含有一个或多个事件类型的字符串，data参数是作为event.data属性值传递给事件对象的额外数据对象，fn参数为绑定到每个匹配元素事件上面的处理函数。

$(document).ready(function(){

 $("input").bind("focus",function(){

  $("span").show();

 });

});

简写绑定事件

$(document).ready(function(){

 $("input").focus(function(){

  $("span").show();

 });

});

鼠标事件click(),dblclick()双击在短时间内发生两次click就是依次双击事件。

mouseenter()当鼠标指针穿过元素时会发生mouseenter事件，mouseleave()当鼠标指针离开元素时会发生mouseleave事件。hover()用于模拟光标悬停事件。

$(document).ready(function(){

 $("#p1").hover{

  function(){

   $("#p1").css('background','green');

  },

  function(){

   $('#p1").css("background","pink");

  }

 }

});

keydown()键盘或按钮被按下时，发生keydown事件，keyup当键盘被松开时发生keyup事件。keypress()当键盘或按钮被按下时，发生keypress事件。

表单事件

当提交表单时，会发生submit事件。change()当元素的值发生改变时，会发生change事件，focus()当元素获得焦点时，触发focus事件。blur()当元素失去焦点时触发。

窗口事件：

scroll()当用户滚动指定的元素时，会触发scroll事件。scroll事件适用于所有可滚动的元素和window对象。resize()当调整浏览器窗口的大小时，会触发resize事件。

x=0;

$(document).ready(function(){

 $(window).resize(function(){

  $("span").text(x+=1);

 });

});

事件冒泡，事件会按照dom的层次结构像水泡一样不断向上直至顶端

停止冒泡和默认行为：

stopPrapagation()和preventDefault()

event.preventDefault();

// 阻止默认行为


event.stopPropagation();

// 停止事件冒泡

事件解除：

unbind(type, [data])

type为事件类型

data为将要解除的函数

❤️ 不要忘记留下你学习的脚印 [点赞 + 收藏 + 评论]

作者Info：

【作者】：Jeskson

【原创公众号】：达达前端小酒馆。

【福利】：公众号回复 “资料” 送自学资料大礼包（进群分享，想要啥就说哈，看我有没有）！

【转载说明】：转载请说明出处，谢谢合作！~

大前端开发，定位前端开发技术栈博客，PHP后台知识点，web全栈技术领域，数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持，承蒙厚爱！！！

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

请点赞！因为你们的赞同/鼓励是我写作的最大动力！

欢迎关注达达的CSDN！

这是一个有质量，有态度的博客

【领会要领】web前端-轻量级框架应用（jQuery基础）的更多相关文章

  1. Web前端学习笔记之jQuery基础

    0x0 jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Aja ...

  2. 2015年最全的移动WEB前端UI框架

    目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率.下面P ...

  3. web前端UI框架

    分类:WEB前端 时间:2016年1月13日 目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WE ...

  4. Web前端MVC框架的意义分析

    前言: Web前端开发是Web技术发展中的一个重要组成部分,在传统的前端开发中由于外界因素的影响导致其开发形式呈现出简单化的特点,即以页面为主体来展示界面中的信息.然而随着科学技术的不断进步,Web前 ...

  5. web前端开发学习：jQuery的原型中的init

    web前端开发学习:jQuery的原型中的init 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 jQuery.fn ...

  6. Web前端三大框架_angular.js 6.0（二）

    Web前端三大框架_angular.js 6.0(一) 需要视频教程,看头像昵称处 一.Angular 6.0  1.1样式 html中引入样式:内嵌式,外链式,行内式. ng6中组件引入样式的方式也 ...

  7. 第二节：Web前端-ASP.NET之C#基础

    第二节:Web前端-ASP.NET之C#基础 学习ASP.NET,要掌握学习语言,控件等技能, <div style="text-align: center; line-height: ...

  8. web前端技术框架选型参考

    一.出发点 随着Web技术的不断发展,前端架构框架.UI框架.构建工具.CSS预处理等层出不穷,各有千秋.太多的框架在形成初期,都曾在web领域 掀起过一场技术浪潮,可有些却仅仅是昙花一现,随着他们用 ...

  9. 收集几个Web前端UI框架

    原文:http://www.isaced.com/post-200.html 关于Web前端UI库/框架,我觉得是非常方便的东西,对于我们这种业余的Web开发人员,有时候要写点前端代码的时候把UI框架 ...

随机推荐

  1. 使用 jQuery.TypeAhead 让文本框自动完成 （二）（访问远程数据）

    项目地址:https://github.com/twitter/typeahead.js 直接贴代码了: @section headSection { <script type="te ...

  2. WPF-介绍一款能够自动格式化XAML界面代码的的插件

    因为之前有小伙伴问格式化XAMl的快捷键按钮,所以在这里分享一款格式化XAMl的插件,非常好用. 直接在工具-->扩展和更新里搜索XamlStyler下载安装即可. 安装后按CTRL+S保存后就 ...

  3. RSA应用指数与模生成公钥（ArcGIS Server）

    参考: https://www.cnblogs.com/luo30zhao/p/10515594.html https://blog.csdn.net/skiof007/article/details ...

  4. ASP.NET Core 发布到Linux需要注意的地方

    此文持续更新. 读取本地目录的问题, 在windows下,一般会用“\”,但在Linux中用的是“/” 待续..

  5. Android App压力测试方法（Monkey）

    一.为什么要开展压力测试 a.提高产品的稳定性:b.提高产品的留存率 二.什么时候开展压力测试 a.首轮功能测试通过后:b.下班后的夜间进行 三.7个基础知识(理论部分) 3.1 手动测试场景与自动测 ...

  6. 使用Javamail实现邮件发送功能

    目录 相关的包 编写工具类 环境说明 @(使用Javamail实现邮件发送功能) 相关的包 activation.jar javax.mail.jar mail包建议使用高版本写的包,否则可能会发空白 ...

  7. 华为手机 android8.0APP更新时出现安装包解析异常的提示及安装闪退（无反应）问题

    在做android app升级更新时遇到几个问题,我用的测试机是华为V10 系统为8.0 一.安装闪退(无反应) 解决办法: 只要在Mainfest.xml 中加入权限编码即可解决 <uses- ...

  8. 第五篇：Python函数基础篇

    本篇介绍什么是函数.函数的特性.函数的定义.函数的调用.以及函数的参数.以及关于全局变量和局部变量的使用等等. 一.什么是函数: 函数是最基本的一种代码抽象方式,为了实现某种特定的功能而组织的带名字的 ...

  9. Linux 用epoll实现的简单http服务器

    Linux 用epoll实现的简单http服务器 main.c #include <stdio.h> #include <sys/types.h> #include <s ...

  10. Linux 信号量之Posix有名字的信号量

    信号量(semaphore),也和互斥锁一样提供了线程间或者进程间的同步功能. 信号量有三种: Posix有名字的信号量 Posix基于内存的信号量 System V信号量 信号量比互斥锁高级,互斥锁 ...