JQuery 测试内容(不保证内容完整性)

20171112 发布于2019-08-23 12:26 / 3395人阅读

摘要：三怎么下载使用版本选择兼容使用最为广泛的，官方只做维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用，最终版本年月日不兼容，只支持最新的浏览器。目前该版本是官方主要更新维护的版本。苟全性命于乱世，不求闻达于诸侯。

JQuery 基础

tags: 前端 JQuery 基础

一什么是JQery

是一个轻量级的兼容多浏览器的JavaScript库(类库)

jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是："Write less, do more."

二为什么使用JQery

<3>它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

<4>jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

<5>jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

三怎么下载使用 版本选择

1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)

2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)

3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

版本下载

官方地址:http://jquery.com/download/
压缩的版本3.3.1 --->上线使用
未压缩的版本3.3.1 --->开发使用

安装两种方式

pass

优美胜于丑陋（Python 以编写优美的代码为目标）

明了胜于晦涩（优美的代码应当是明了的，命名规范，风格相似）

简洁胜于复杂（优美的代码应当是简洁的，不要有复杂的内部实现）

复杂胜于凌乱（如果复杂不可避免，那代码间也不能有难懂的关系，要保持接口简洁）

扁平胜于嵌套（优美的代码应当是扁平的，不能有太多的嵌套）

间隔胜于紧凑（优美的代码有适当的间隔，不要奢望一行代码解决问题）

可读性很重要（优美的代码是可读的）

即便假借特例的实用性之名，也不可违背这些规则（这些规则至高无上）

不要包容所有错误，除非你确定需要这样做（精准地捕获异常，不写 except:pass 风格的代码）

当存在多种可能，不要尝试去猜测

而是尽量找一种，最好是唯一一种明显的解决方案（如果不确定，就用穷举法）

虽然这并不容易，因为你不是 Python 之父（这里的 Dutch 是指 Guido ）

做也许好过不做，但不假思索就动手还不如不做（动手之前要细思量）

如果你无法向人描述你的方案，那肯定不是一个好方案；反之亦然（方案测评标准）

命名空间是一种绝妙的理念，我们应当多加利用（倡导与号召）

基础知识 基本语法

jquery的基础语法：

$(selector).action()

查找标签

:::info
本章节练习题基于:jQuery选择器筛选器练习.html
:::

基本选择器

$("#id的值")

id选择器

$("#id的值")

举例:找到本页面中id是i1的标签

$("#i1")
--------
-> Object [ div#i1.container
 ]

标签选择器

查找所有标签

$("*")
----------
Object { 0: html
, 1: head, 2: meta, 3: meta, 4: meta, 5: title, 6: link, 7: link, 8: style, 9: body, … }

查找

class选择器

$(".class")

$(".c1")
Object { 0: h1.c1
, 1: h1.c1, length: 2, prevObject: Object(1) }

配合使用

找到div的container类的标签

$("div.container")
----------
r.fn.init(6) [div.container, div.container, div.container, div#i1.container, div.container, div.container, prevObject: r.fn.init(1)]

层级选择器

练习：

自定义模态框，使用jQuery实现弹出和隐藏功能。




    
    模态框
    



    《钗头凤》唐婉
    世情薄
    人情恶
    雨送黄昏花易落
    晓风干
    泪痕残
    欲笺心事
    独语斜阑
    难 难 难

    人成各
    今非昨
    病魂长似秋千索
    角声寒
    夜阑珊
    怕人询问
    咽泪装欢
    瞒 瞒 瞒





    X

基本筛选器

:first ->第一个

举例:找到id值为f1的标签内部的第一个input标签

$("#f1:first")

Object { 0: form#f1
, length: 1, prevObject: Object(1) }

:last ->最后一个
找到id值为my-checkbox的标签内部最后一个input标签

举例:

$("#my-checkbox:last")

Object { 0: div#my-checkbox.panel-body
, length: 1, prevObject: Object(1) }

:eq(index) -->索引等于index的那个元素

举例:

属性选择器

[arribute]
[attribute=value] //属性等于
[attribute!=value] //属性不等于

表单筛选器 练习题

找到本页面中id是i1的标签

找到本页面中所有的h2标签

找到本页面中所有的input标签

找到本页面所有样式类中有c1的标签

找到本页面所有样式类中有btn-default的标签

找到本页面所有样式类中有c1的标签和所有h2标签

找到本页面所有样式类中有c1的标签和id是p3的标签

找到本页面所有样式类中有c1的标签和所有样式类中有btn的标签

找到本页面中form标签中的所有input标签

找到本页面中被包裹在label标签内的input标签

找到本页面中紧挨在label标签后面的input标签

找到本页面中id为p2的标签后面所有和它同级的li标签

找到id值为f1的标签内部的第一个input标签

找到id值为my-checkbox的标签内部最后一个input标签

找到id值为my-checkbox的标签内部没有被选中的那个input标签

找到所有含有input标签的label标签

实例

垂直菜单
/Users/chery/Documents/LearnPython/E_前端/day51/垂直菜单.html




    
    Vertical menu with CSS
    
    



    
        
            主页
            用户
                
                    添加
                    编辑
                    删除
                
            
            设计
            数据
            关于我

效果:

[x] 延迟显示

[x] 多级菜单

操作元素(属性,css,文档处理) 文本操作

/E_前端/day51/文本操作.html




    
    文本操作



    《前出师表》
    
        臣本布衣，躬耕于南阳。苟全性命于乱世，不求闻达于诸侯。
        先帝不以臣卑鄙，位子望去，三顾晨宇草湖之中，自衬衣党史知识
    




    
篮球

云服务器 GPU云服务器完整的nlp课程包含哪些内容 jquery内容筛选邮件内容测试内容不居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98504.html

JS干货｜浏览器缺陷、浏览器的缺陷修复等五大开发问题解决之道

摘要：图对可复用代码挑战最大的五项问题五大开发问题如下。浏览器的缺陷修复。浏览器缺失的功能。复杂的地方是，当前浏览器会在未来的浏览器版本中被修复。假设浏览器引起常见的网站问题为解决浏览器使用特殊技巧，将来浏览器发布新版本修复了，就会出现问题。任意一段重要的代码都需要关注无数的开发问题。但是，其中对可复用JavaScript代码挑战最大的五项问题如图14.2所示。 showImg(https...

qiangdada 2019-08-26 13:43 评论0 收藏0
自定义jquery插件

摘要：的编写并没有想象中的难，下面通过编写一个拥有属性和一些回调函数的简单插件介绍下如何编写。在当前这个前端mv**框架盛行的年代，翻译这样一篇关于如何编写jquery插件的文章好像显得有点多余和那么的不接时代，不过还是自私点，努力翻译一把起码可以提高自己（）。 jquery非常棒，它兼容性好，入门简单，让我们在处理终端交互的时候来的轻而易举，同时他还有非常庞大的插件库，几乎你能想到的功能...

AnthonyHan 2019-08-21 18:35 评论0 收藏0
分分钟教你用node.js写个爬虫

摘要：爬虫介绍二爬虫的分类通用网络爬虫全网爬虫爬行对象从一些种子扩充到整个，主要为门户站点搜索引擎和大型服务提供商采集数据。分分钟教你用node.js写个爬虫写在前面十分感谢大家的点赞和关注。其实，这是我第一次在segmentfault上写文章。因为我也是前段时间偶然之间才开始了解和学习爬虫，而且学习node的时间也不是很长。虽然用node做过一些后端的项目，但其实在node和爬虫方面...

fanux 2019-08-22 17:07 评论0 收藏0
如何正确学习JavaScript

摘要：然而，虽然先生对无所不知，被誉为世界的爱因斯坦，但他的语言精粹并不适合初学者学习。即便如此，在后面我还是会建议把当做补充的学习资源。但目前为止，依然是学习编程的好帮手。周正则表达式，对象，事件，阅读权威指南第，，，章。既然你找到这篇文章来，说明你是真心想学好JavaScript的。你没有想错，当今如果要开发现代网站或web应用（包括互联网创业），都要学会JavaScript。而面对泛...

canger 2019-08-21 10:23 评论0 收藏0
从jQuery核心源码学习设计思想和JS特性

摘要：原型数据类型检测指向绑定执行环境深拷贝三源码分析匿名自执行函数和闭合包这里形成闭包保护变量不被直接访问和篡改保证框架完整性，闭包的作用域内也会帮助缓存变量值。一、导读文章作为学习笔记的形式，记录学习的一点体会和原理知识，如有错误欢迎指正。本文根据一些简单的jQuery源码入手分析一个框架从哪方面入手，js在底层做了那些事，了解他的设计思想，jquery整体架构还是依托于js，在...

LucasTwilight 2019-08-26 10:56 评论0 收藏0