jquery find class 收藏 0

手把手带你快速入门jQuery（建议收藏！！！）

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。

jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器，并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

搭配视频效果更佳哦~~~

https://www.ixigua.com/6846624275877593611

jQuery 是一款跨主流浏览器的JavaScript 库，封装了JavaScript 相关方法调用，简化JavaScript 对HTML DOM 操作

官网地址： https://jquery.com/

官网首页jQuery 介绍：

原文翻译：

jQuery 是一个快速，小巧，功能丰富的JavaScript 库。 它通过易于使用的API 在大量浏览器中运行，使得HTML 文档遍历和操作，事件处理，动画和Ajax 变得更加简单。 通过多功能性和可扩展性的结合，jQuery 改变了数百万人编写JavaScript 的方式。

非常重要的理由就是：它能够兼容市面上主流的浏览器， IE 和FireFox， Google 浏览器处理 AJAX，创建异步对象是不同的，而jQuery 能够使用一种方式在不同的浏览器创建AJAX 异步对象。

其他优点：

（1） 写少代码,做多事情【write less do more】

（2） 免费，开源且轻量级的js 库，容量很小

（3） 兼容市面上主流浏览器，例如 IE，Firefox，Chrome

（4） 能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果， 也能提供异步AJAX 功能

（5） 文档手册很全，很详细

（6） 成熟的插件可供选择，多种js 组件，例如日历组件（点击按钮显示下来日期）

（7） 出错后，有一定的提示信息

（8） 不用再在html 里面通过<script>标签插入一大堆 js 来调用命令了

例如：使用JavaScript 定位DOM 对象常用的三种方式：

（1） 通过ID 属性：document.getElementById()

（2） 通过 class 属性：getElementsByClassName()

（3） 通过标签名：document.getElementsByTagName()

上面代码可以看出JavaScript 方法名太长了，大小写的组合太多了，编写代码效率，容易出错。jQuery 分别使用$(“#id”) , $(“.class 名”) , $(“标签名) 封装了上面的 js 方法。

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。

通过 DOM 对 HTML 页面的解析，可以将页面元素解析为元素节点、属性节点和文本节点，这些解析出的节点对象，即 DOM 对象。DOM 对象可以使用 JavaScript 中的方法。

官网下载地址：https://jquery.com/download/

jQuery 的不同版本中，2.xx 不再支持 IE6/7/8 浏览器。现阶段IE6/7/8 已经是淘汰的，非主流。可以不用考虑兼容问题。

对于每一个同一版本号的 jQuery，其库又分为两个。一个是未压缩版，可查看源码，开发时使用；一个是压缩版，将注释、空格均做了删除，将变量字符数减少，产品上线时使用。

编写jQuery 的工具很多，能编写HTML 的工具都支持jQuery. 例如记事本 ，EditPlus, webStorm, Visual Studio Code , HBuilder , HBuilderX , IDEA.

单独学习jQuery 库使用，可以轻量的开发工具，例如EditPlus ,HBuilder,HbuilderX

编写项目可以使用集成开发工具，例如在IDEA， Eclipse ,MyEclipse ,WebStorm 等

第一个例子完成：浏览器完全装载html 页面 DOM 后,显示一个提示信息框

实现步骤：

1. 使用HBuilder 或HbuilderX, idea 都可以，以HbuilderX 为工具，创建一个项目（名称：jquery-course），给项目选择一个文件存放目录。

2. 在项目中再创建一个目录

右键项目名称—新建—目录，常用名称为 js

3. 拷贝下载的jQuery.js 文件到目录

4. 使用 jQuery，首先要将 jQuery 库引入。使用如下语句：

<script type=\”text/javascript\” src=\”js/jquery-3.4.1.js\”></script>

5. $(document)，将 DOM 对象 document 转换为jQuery 对象。

$(document).ready()函数是当 DOM 对象加载完毕后，马上执行的函数。

$(document).ready()与$()、jQuery()、window.jQuery()是等价的，所以

$(document).ready()可以写成 $(function() { alert(“Hello jQuery”) } );

6. 完整代码

DOM 对象是用JavaScript 语法创建的对象，也看做是 js 对象。

使用$(DOM 对象) 方式，可以 DOM 对象转换为 jQuery 对象， 转换为jQuery 对象才可以使用jQuery 中的提供的方法，操作DOM 对象。一般情况下，在命名 jQuery 对象时，为了与 DOM 对象进行区分，习惯性的以$ 开头，这不是必须的。

例：新建html 页面文件 domTojQuery.html

1. 页面加入按钮 button

2. 转换 DOM 对象

jQuery 对象本身为数组对象，该数组中的第 0 个元素即为该 jQuery 对象对应 的 DOM

对象。所以有两种方式可以获取到 DOM 对象：get(0) 方式与下标[0]

例：新建html 文件 jQueryToDom.html

1. 页面添加 text ，button

2. jQuery 对象.get(0) 或 jQuery 对象[0] 均可完成 jQuery 对象转 DOM对象

选择器: 就是定位条件；通知jquery 函数定位满足条件的DOM 对象

根据ID，class 属性，标签类型名定位HTML 元素，转为jQuery 对象.

1. id 选择器

语法：$(“#id”)

2. class 选择器

语法：$(“.class 名称”)

3. 标签选择器

语法：$(“标签名”)

例：新建selector.html

1. 在页面 head 部分加入 css

2. 加入 jQuery 引用

3.body 部分定义div

4.创建 js 函数

4. 所有选择器

语法：$(“*”) 选取页面中所有DOM 对象。

5. 组合选择器

组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合 id， class，标签名等。

语法：$(“#id, .class, 标签名”)

例：

1. 上面的 selector.html 页面中加入按钮

2. 增加 js 函数

表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单<form>，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的

<input type=\”text\”>

<input type=\”password\”>

<input type=\”radio\”>

<input type=\”checkbox\”>

<input type=\”button\”>

<input type=\”file\”>

<input type=\”submit\”>

<input type=\”reset\”>

$(\”:tr\”): 不能用，tr 不是input 标签语法： $(\”:type 属性值\”)

例如：

$(\”:text\”)选取所有的单行文本框

$(\”:password\”)选取所有的密码框

$(\”:radio\”)选取所有的单选框

$(\”:checkbox\”)选取所有的多选框

例：

新建form.html 页面定义元素：

定义 js 函数：

jQuery 对象中存储的DOM对象顺序与页面标签声明位置关系

<div>1</div> dom1

<div>2</div> dom2

<div>3</div> dom3

$(\”div\”) == [dom1,dom2,dom3]

过滤器就是过滤条件，对已经定位到数组中DOM 对象进行过滤筛选，过滤条件不能独立出现在jquery 函数，如果使用只能出现在选择器后方。

1. 选择第一个first, 保留数组中第一个DOM 对象

语法：$(“选择器:first”)

2. 选择最后个last, 保留数组中最后DOM 对象

语法：$(\”选择器:last\”)

3. 选择数组中指定对象

语法：$(“选择器:eq(数组索引)”)

4. 选择数组中小于指定索引的所有DOM 对象

语法：$(“选择器:lt(数组索引)”)

5. 选择数组中大于指定索引的所有DOM 对象

语法：$(“选择器:gt(数组索引)”)

1.定义样式

2. 页面加入div

3. 定义js 函数

1. 选择可用的文本框

$(“:text:enabled”)

2. 选择不可用的文本框

$(“:text:disabled”）

3. 复选框选中的元素

$(“:checkbox:checked”)

4. 选择指定下拉列表的被选中元素

选择器>option:selected

例：

创建filterForm.html 页面：

js 函数

你没有看错，爬网页数据，C# 也可以像 Jquery 那样

前段时间搞了一个地方性民生资讯号，资讯嘛，都是我抄你的，你抄官媒的，小市民都喜欢奇闻异事，所以就存在一个需求，如何去定向抓取奇闻异事的地方号上的新闻，其实做起来很简单，用逻辑回归即可，这篇主要讨论如何去抓取，在 C# 中大家都知道抓取通用的库是 HtmlAgilityPack，但是这个库主流的做法是采用 xpath 提取网页内容，这就让我很不爽了，毕竟不熟悉莫名的抵抗哈，像我这个年纪的码农，被 Jquery 教育了至少 5-6 年，所以必须用 类Jquery 的方式，在 python 中有 cquery 做这件事情，那在 C# 中有没有类似的方式呢？ 嘿嘿，万能的 github 上还真有。。。 就是本篇介绍的 CSQuery。

github的地址： https://github.com/zone117x/CsQuery 然后在vs中 nuget 一下即可：

一切都准备就绪了，那怎么用呢？ 不着急，我以博客园举两个例子。

如上图，要想获取这里的 友情链接几个大字，直接用 text() 肯定是不行的，默认情况它会将所有的子节点的文本也会抓到，如下图：

那怎么处理呢？ 可以用 jquery 提供的 contents 方法，然后在获取的所有子节点中判断是否有 文本节点，最后获取文本节点的内容即可，如下代码：

用js是搞定了，那用 CSQuery 代码怎么搞定呢？模仿呗，如下代码：

我不知道用 xpath 提取这样的内容麻不麻烦，不过用 jquery 方式不简单，但轻车熟路。

有时候为了业务需要将某些 html 标签改一下颜色，比如说将首页的 tabmenu 中 博问 和 专区 改成红色，如下图：

那用 CSQuery 怎么处理呢？ 如果玩过 jquery，一般来说步骤如下：

• 使用 each 遍历每一个子 li 标签
• 使用 CSS 方法给 li 中 a 标签赋样式
• 使用 Render 渲染生成一个新的的html

有了步骤，C#代码如下：

除了上面两个操作方法外，你还可以使用 after，before，replaceAll,IS 等等一百来个实用的方法，这篇肯定也无法一一介绍了，大家有兴趣可以下载下来看一看，捣鼓捣鼓。

除了抓取html中的元素，我觉得这玩意还可以用在发送邮件时操控邮件模板，毕竟在很久以前大家都是用jquery来绘制 html，所以用 CSQuery 也是可以的，相对使用 xslt 有利有弊吧，接下来做一个例子：

可以用 Append 将内容追加到 <ul> 节点内。

Render方法是将整个Dom渲染成html，但有时候你只需要得到你修改的那部分内容，而不是整个html，这就涉及到了部分渲染，可以用 RenderSelection 方法即可，代码如下：

Jquery 这种操作模式对我个人来说还是比较舒服的，毕竟熟！ 不过在 html5 中也新增了 querySelector 和 querySelectorAll 支持 css3 选择器，非常强大，可 jquery 不光在选择器的灵活上，还在于对节点的灵活操作上，总的来说不是特别富交互的情况下可以怀旧一把。

12个免费学习编程的网站

曾几何时，编程对极客来说是最讨厌的事，但在今天，事情已经不再是这样了。大多数的企业家、自由职业者和市场推销人员都会告诉你：编程改变命运。在过去几年里，我一直在学习如何编程，编程也帮助我成为了一个更好的企业家——当我的团队需要我修理一些网站的bug时，我都可以鞠躬尽瘁了。

你完全不必倾家荡产去学习如何编程，这12个提供免费编程课的地方推荐给你。

1. CodeAcademy

最受欢迎的学习编程的网站之一就是CodeAcademy啦。事实上，已经有超过2400万人通过这个教育公司的迷人经验学习过如何编程，在CodeAcademy,通过上课你可以深入了解到从HTML&CSS、JavaScript、jQuery、PHP、Python到Ruby的所有东西。

2. Coursera

创办于2012年，Coursera已经成长为一个以营利为目的的教育技术公司，它提供119个机构的超过1000个课程。虽然你可以支付某些程序来获得一个证书，但还是有免费的各种专门化编程的介绍课程，这些课程由各个大学提供，例如华盛顿大学、斯坦福大学、多伦多大学和范德比尔特大学。

3. edX

EdX是另一个开源非营利在线学习平台的代表。它是由哈佛大学和麻省理工学院在2012年创办的，在这里你会学到一些尖端技术和理论。如今，edX的加入者已经包括60所学校，你可能不会在这个免费的哈佛大学电脑课程介绍上走错。

4. Udemy

Udemy成立于2010年，是一个可以学习和提高职业技巧的在线学习平台。虽然有需要付费的课程，但也有大量通过视频课教授的免费编程课，比如为企业家量身打造的编程——HTML&CSS和Python编程介绍。

5. aGupieWare

AGupieWare是一个独立的应用程序开发商，它从美国的一些领导机构中调查计算机科学程序，后来它创办了一个由斯坦福大学、麻省理工学院、卡内基梅隆大学、伯克利大学和哥伦比亚大学提供的免费教程，这个项目之后被分成了15个课程：3个入门课程、7个核心课程和5个选修课。

尽管实际上你不会收到贷款,这仍然是一个为未来的计算机程序员准备的完美的介绍程序。

6. GitHub

有时你会被一个问题困住，需要翻看参考书，那就来找GitHub吧。你可以在基于web的Git存储库主机服务中，找到囊括80多种编程语言的超过500个免费的编程书。

7. MIT Open Courseware

如果你已经学过了基础知识，想学学更深层的知识，例如探索编程背后的理论。那就是MIT免费课件网站的优势了，它包括了例如电脑科学及编程、Java编程简介和C语言编程实例这些课程。

8. Hack.pledge

这是一个开发者社区，包括一些像BitTorrent的创造者Bram Cohen这样的高知名度开发者。因此，你可以向世界上一些首席开发者学习，使你的编程能力变得完美无缺。

9. Code Avengers

总部在新西兰的Code Avengers提供有趣且互动的编程课，教你如何用JavaScript、HTML和CSS编游戏、应用程序和网站。每个课程仅在12小时内完成且有英语、俄语、荷兰语、西班牙语、意大利语、土耳其语和葡萄牙语版本。

10. Khan Academy

Khan Academy由教育家Salman Khan创办于2006年，是最原始的免费在线学习机构之一。通过一步步的视频教程，你可以学会如何用JavaScript和ProcessingJS编程图画、动画和游戏，还可以学会如何用HTML和CSS创建网站。

11. Free Food Camp

这里你可以通过加入社区的专业人士和学生学到HTML5、CSS3、JavaScript、Databases、DevTools、Node.js、Angular.js和Agile。你们甚至可以用编程技能在一起工作，这样就可以构建免费的应用程序。要记得这点：你正在学习的这些技能有助于解决实际问题，代码应该是非营利的。

12. HTML5 Rocks

这个Google project发布于2010年，是为了和苹果的HTML5对着干，这个网站满是教程、资源和最新版的HTLM5。它是开源的，所以开发者可以随意使用HTML5代码，而且因为它比大多数入门课程更先进，你可能想要在进入网站之前先学习一些基础知识和经验。

学习代码原本需要昂贵的书籍和课程，但以后再也不需要了。我强烈建议每个企业家都应该学习编程。还在纠结你要不要编程？这本编程指南会详细向你展示我从一个企业家到编程者的每个步骤。

原文链接： http://www.entrepreneur.com/article/250323（译者/何抒灿 责编/钱曙光）

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com