手把手带你快速入门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 函数

jQuery入门看这一篇就够了!超详细!(三)

“这里是云端源想IT,帮你轻松学IT”

嗨~ 今天的你过得还好吗?

再坚持一下

这世间的温柔都在等你

– 2023.06.14 –

今天我们接着来看jQuery遍历的操作方法、事件和动画的基础操作,最后再简单介绍一下jQuery插件,希望能够帮助大家更好地掌握jQuery,那么我们就开始吧,别忘了收藏呦!

方法描述:遍历一个jQuery对象,为每个匹配元素执行一个函数。

需求描述:获取每一个li元素并把每一个li元素的标签及内容输出

<ul>

<p>我是段落1</p>

<li>列表项1</li>

<li id=\”two\”>列表项2</li>

<li>列表项3</li>

<p>我是段落2</p>

</ul>

$(\’li\’).each(function (index, element) {

console.log(index, element);

});

方法描述:获取匹配元素集合中第一个元素。

需求描述:设置ul下第一个li的背景为红色

<ul>

<li>列表项1</li>

<li id=\”two\”>列表项2</li>

<li>列表项3</li>

</ul>

$(\’ul>li\’).first().css(\’background\’, \’red\’);

方法描述:获取匹配元素集合中最后一个元素。

需求描述:设置ul下最后一个li的背景为红色

<ul>

<li>列表项1</li>

<li id=\”two\”>列表项2</li>

<li>列表项3</li>

</ul>

$(\’ul>li\’).last().css(\’background\’, \’red\’);

方法描述:获取匹配元素集合中指定位置索引的一个元素。

注意:索引下标从0开始

需求描述:设置ul下第二个li的背景为红色

<ul>

<li>列表项1</li>

<li id=\”two\”>列表项2</li>

<li>列表项3</li>

</ul>

$(\’ul>li\’).eq(1).css(\’background\’, \’red\’);

方法描述:从匹配的元素集合中移除指定的元素。

需求描述:设置ul下li标签的背景为红色,排除第二个li

<ul>

<li>列表项1</li>

<li id=\”two\”>列表项2</li>

<li>列表项3</li>

</ul>

var two = $(\’ul>li\’).eq(1);

$(\’ul>li\’).not(two).css(\’background\’, \’red\’);

方法描述:筛选元素集合中匹配表达式或通过传递函数测试的元素集合。

需求描述:查找所有id为two的li标签设置其背景为红色

<ul>

<li>列表项1</li>

<li id=\”two\”>列表项2</li>

<li>列表项3</li>

</ul>

$(\’ul>li\’).filter(\'[id=two]\’).css(\’background\’, \’red\’);

方法描述:为 JavaScript 的 “resize” 事件绑定一个处理函数,或者触发元素上的该事件。

需求描述:当浏览器窗口的尺寸改变时,控制台输出“浏览器尺寸改变了”

$(window).resize(function () {

console.log(\’浏览器尺寸改变了\’);

});

方法描述:为 JavaScript 的 “scroll” 事件绑定一个处理函数,或者触发元素上的该事件。

需求描述:当浏览器窗口的滚动条滚动时,控制台输出“浏览器滚动条改变了”

body {

height: 2000px;

}

$(window).scroll(function () {

console.log(\’浏览器滚动条改变了\’);

});

方法描述:在选定的元素上绑定一个或多个事件处理函数。

需求描述:为按钮添加单击事件,当按钮单击的时候,向控制台输出“按钮被单击了”

<button>按钮</button>

$(\’button\’).on(\’click\’,function () {

console.log(\’按钮被单击了\’);

});

方法描述: 移除一个事件处理函数。

需求描述:为按钮添加单击事件,然后再解绑,这时候你在点击按钮看看是不是不会输出信息了

<button>按钮</button>

$(\’button\’).on(\’click\’,function () {

console.log(\’按钮被单击了\’);

});

$(\’button\’).off(\’click\’);

方法描述:设置事件委托。

需求描述:为ul下的所有li添加单击事件,要求将该单击事件委托给ul,当单击li时,所对应的li背景变为红色

<ul>

<li>1111</li>

<li>2222</li>

<li>3333</li>

<li>4444</li>

</ul>

$(\’ul\’).delegate(\’li\’, \’click\’, function () {

this.style.background = \’red\’;

});

方法描述:移除事件委托。

需求描述:要求移除上一节中设置的事件委托,然后在分别点击li进行验证是否移除事件委托

<ul>

<li>1111</li>

<li>2222</li>

<li>3333</li>

<li>4444</li>

</ul>

// 设置事件委托

$(\’ul\’).delegate(\’li\’, \’click\’, function () {

this.style.background = \’red\’;

});

// 移除事件委托

$(\’ul\’).undelegate(\’click\’);

方法描述:当获取焦点时触发所绑定的函数。

需求描述:当文本框获取焦点时,设置其背景为红色

<input type=\”text\”>

$(\’:text\’).focus(function () {

$(this).css(\’background\’, \’red\’);

});

方法描述:当失去焦点时触发所绑定的函数。

需求描述:当文本框获取焦点时,设置其背景为红色,当文本框失去焦点时,设置其背景为绿色

<input type=\”text\”>

$(\’:text\’).focus(function () {

$(this).css(\’background\’, \’red\’);

});

$(\’:text\’).blur(function () {

$(this).css(\’background\’, \’green\’);

});

方法描述:当内容改变时触发所绑定的函数。

需求描述:当文本框内容改变时,就向控制台输出当前文本框的内容

<input type=\”text\”>

$(\’:text\’).change(function () {

console.log($(this).val());

});

需求描述:当选择框的内容改变时,就向控制台输出当前选中项的内容

<select>

<option>河北</option>

<option>河南</option>

<option>上海</option>

<option>北京</option>

<option>广东</option>

</select>

$(\’select\’).change(function () {

console.log($(this).val());

});

方法描述:当内容选择时触发所绑定的函数。

需求描述:当文本框的内容被选择时,就向控制台输出当前文本框的内容

<input type=\”text\” value=\”123456\”>

$(\’input\’).select(function () {

console.log($(this).val());

});

方法描述:当表单提交时触发所绑定的函数。

需求描述:当表单提交的时候,弹出对话框“表单提交了”

<form action=\”#\”>

<input type=\”submit\”>

</form>

$(\’form\’).submit(function () {

alert(\’表单提交了\’);

});

方法描述:当鼠标单击时调用所绑定的函数。

需求描述:为按钮绑定一个单击函数,然后点击按钮,在控制台输出“按钮被单击了”

<button>按钮</button>

$(\’button\’).click(function () {

console.log(\’按钮被单击了\’);

});

方法描述:当鼠标双击时调用所绑定的函数。

需求描述:为按钮绑定一个双击函数,然后双击按钮,在控制台输出“按钮被单击了”

<button>按钮</button>

$(\’button\’).dblclick(function () {

console.log(\’按钮被双击了\’);

});

方法描述:当鼠标左键按下的时候调用所绑定的函数。

需求描述:当鼠标左键按下的时候,控制台输出“鼠标左键按下”

<button>按钮</button>

$(\’button\’).mousedown(function () {

console.log(\’鼠标左键按下\’);

});

方法描述:当鼠标左键松开的时候调用所绑定的函数。

需求描述:当鼠标左键松开的时候,控制台输出“鼠标左键松开”

<button>按钮</button>

$(\’button\’).mouseup(function () {

console.log(\’鼠标左键松开\’);

});

方法描述:当鼠标进入目标元素的时候调用所绑定的函数。

需求描述:创建两个div,当鼠标移到外层div的时候,向控制台输出“mouse enter”

.outer {

width: 200px;

height: 200px;

background: coral;

}

.inner {

width: 100px;

height: 100px;

background: pink;

}

<div class=\”outer\”>

<div class=\”inner\”></div>

</div>

$(\’.outer\’).mouseenter(function () {

console.log(\’mouse enter\’);

});

方法描述:当鼠标离开目标元素的时候调用所绑定的函数。

需求描述:创建两个div,当鼠标移出外层div的时候,向控制台输出“mouse leave”

.outer {

width: 200px;

height: 200px;

background: coral;

}

.inner {

width: 100px;

height: 100px;

background: pink;

}

<div class=\”outer\”>

<div class=\”inner\”></div>

</div>

$(\’.outer\’).mouseleave(function () {

console.log(\’mouse leave\’);

});

mouseover()

方法描述:当鼠标进入目标元素的时候调用所绑定的函数。

注意:mouseenter事件和mouseover的不同之处是事件的冒泡的方式。mouseenter 事件只会在绑定它的元素上被调用,而不会在后代节点上被触发。

需求描述:创建两个div,当鼠标移到外层div的时候,向控制台输出“mouse over”,鼠标移到内层div的时候,向控制台输出“mouse over”,当鼠标移到外层div的时候,向控制台输出“mouse over”

.outer {

width: 200px;

height: 200px;

background: coral;

}

.inner {

width: 100px;

height: 100px;

background: pink;

}

<div class=\”outer\”>

<div class=\”inner\”></div>

</div>

$(\’.outer\’).mouseover(function () {

console.log(\’mouse over\’);

});

mouseout()

方法描述:当鼠标离开目标元素的时候调用所绑定的函数。

注意:mouseleave事件和mouseout的不同之处是事件的冒泡的方式。mouseleave 事件只会在绑定它的元素上被调用,而不会在后代节点上被触发。

需求描述:创建两个div,当鼠标移出外层div的时候,向控制台输出“mouse out”

.outer {

width: 200px;

height: 200px;

background: coral;

}

.inner {

width: 100px;

height: 100px;

background: pink;

}

<div class=\”outer\”>

<div class=\”inner\”></div>

</div>

$(\’.outer\’).mouseout(function () {

console.log(\’mouse out\’);

});

方法描述:当鼠标指针在元素内移动时,mousemove事件就会被触发,任何HTML元素都可以接受此事件。

需求描述:鼠标在div内移动,获取当前鼠标相对div的位置坐标

.outer {

width: 200px;

height: 200px;

background: black;

position: absolute;

left: 20px;

top: 20px;

}

<div class=\”outer\”></div>

$(\’.outer\’).mousemove(function (event) {

console.log(event.offsetX, event.offsetY);

});

hover()

方法描述:.hover()方法是同时绑定 mouseenter和 mouseleave事件。

需求描述:当鼠标进入div设置背景为红色,当鼠标移出div设置背景为绿色,默认背景为黑色

.outer {

width: 200px;

height: 200px;

background: black;

}

<div class=\”outer\”></div>

$(\’.outer\’).hover(function () {

$(this).css(\’background\’, \’red\’);

}, function () {

$(this).css(\’background\’, \’green\’);

});

方法描述:当键盘按键按下的时候调用绑定的函数。

需求描述:当键盘按键按下的时候,输出当前的按键

<input type=\”text\”>

$(\’:text\’).keydown(function (event) {

console.log(event.key);

});

方法描述:当键盘按键松开的时候调用绑定的函数。

需求描述:当键盘按键松开的时候,输出当前的按键

<input type=\”text\”>

$(\’:text\’).keyup(function (event) {

console.log(event.key);

});

方法描述:keypress与keydown类似,当键盘按键按下的时候调用绑定的函数。

需求描述:当键盘按键按下的时候,输出当前的按键

<input type=\”text\”>

$(\’:text\’).keypress(function (event) {

console.log(event.key);

});

方法描述:隐藏元素。

需求描述:创建一个显示div,然后隐藏该元素

.box {

width: 200px;

height: 200px;

background: coral;

display: block;

}

<div class=\”box\”></div>

$(\’.box\’).hide();

方法描述:显示元素。

需求描述:创建一个隐藏div,然后显示该元素

.box {

width: 200px;

height: 200px;

background: coral;

display: none;

}

<div class=\”box\”></div>

$(\’.box\’).show();

方法描述:如果隐藏就设置为显示,如果显示就设置为隐藏。

需求描述:创建一个按钮,控制div显示和隐藏

.box {

width: 200px;

height: 200px;

background: coral;

display: block;

}

<button>隐藏/显示</button>

<div class=\”box\”></div>

$(\’button\’).click(function () {

$(\’.box\’).toggle();

});

方法描述:通过淡入的方式显示匹配元素。

需求描述:创建一个按钮,控制div缓慢淡入

.box {

width: 200px;

height: 200px;

background: coral;

display: none;

}

<button>淡入</button>

<div class=\”box\”></div>

$(\’button\’).click(function () {

$(\’.box\’).fadeIn(\’slow\’);

});

方法描述:通过淡出的方式隐藏匹配元素。

需求描述:创建一个按钮,控制div缓慢淡出

.box {

width: 200px;

height: 200px;

background: coral;

display: block;

}

<button>淡出</button>

<div class=\”box\”></div>

$(\’button\’).click(function () {

$(\’.box\’).fadeOut(\’slow\’);

});

方法描述:用淡入淡出动画显示或隐藏一个匹配元素。

需求描述:创建一个按钮,控制div淡入和淡出

.box {

width: 200px;

height: 200px;

background: coral;

display: block;

}

<button>淡出/淡入</button>

<div class=\”box\”></div>

$(\’button\’).click(function () {

$(\’.box\’).fadeToggle(\’slow\’);

});

方法描述:用滑动动画显示一个匹配元素。

需求描述:创建一个按钮,控制div滑动显示

.box {

width: 200px;

height: 200px;

background: coral;

display: none;

}

<button>滑动显示</button>

<div class=\”box\”></div>

$(\’button\’).click(function () {

$(\’.box\’).slideDown();

});

方法描述:用滑动动画隐藏一个匹配元素。

需求描述:创建一个按钮,控制div滑动隐藏

.box {

width: 200px;

height: 200px;

background: coral;

display: block;

}

<button>滑动隐藏</button>

<div class=\”box\”></div>

$(\’button\’).click(function () {

$(\’.box\’).slideUp();

});

方法描述:用滑动动画显示或隐藏一个匹配元素。

需求描述:创建一个按钮,控制div滑动显示和滑动隐藏

.box {

width: 200px;

height: 200px;

background: coral;

display: block;

}

<button>滑动隐藏/滑动显示</button>

<div class=\”box\”></div>

$(\’button\’).click(function () {

$(\’.box\’).slideToggle();

});

方法描述:根据一组 CSS 属性,执行自定义动画,并且支持链式调用。

需求描述:创建一个div,默认div宽高100px,背景颜色为黑色,先让div宽度变为200px,再让div高度变为200px

.box {

width: 100px;

height: 100px;

background: black;

}

<button>自定义动画</button>

<div class=\”box\”></div>

$(\’.box\’)

.animate({

width: \’200\’

})

.animate({

height: \’200\’,

});

方法描述:停止匹配元素当前正在运行的动画。

给 jQuery工具 添加4个工具方法:

  • min(a, b) : 返回较小的值
  • max(c, d) : 返回较大的值
  • leftTrim() : 去掉字符串左边的空格
  • rightTrim() : 去掉字符串右边的空格

如何实现呢?请参考以下代码:

// 扩展jQuery工具的方法

$.extend({

min: function (a, b) {

return a < b ? a : b

},

max: function (a, b) {

return a > b ? a : b

},

leftTrim: function (str) {

return str.replace(/^\\s+/, \’\’)

},

rightTrim: function (str) {

return str.replace(/\\s+$/, \’\’)

}

});

// 测试扩展jQuery工具的方法

console.log($.min(3, 5));

console.log($.max(3, 5));

console.log(\’—–\’ + $.leftTrim(\’ hello \’) + \’—–\’);

console.log(\’—–\’ + $.rightTrim(\’ hello \’) + \’—–\’);

给 jQuery对象 添加3个功能方法:

  • checkAll() : 全选
  • unCheckAll() : 全不选
  • reverseCheck() : 全反选

如何实现呢?请参考以下代码:

// 扩展jQuery对象的方法

$.fn.extend({

checkAll: function () {

this.prop(\’checked\’, true);

},

unCheckAll: function () {

this.prop(\’checked\’, false);

},

reverseCheck: function () {

this.each(function () {

this.checked = !this.checked;

});

}

});

<input type=\”checkbox\” name=\”items\” value=\”足球\”/>足球

<input type=\”checkbox\” name=\”items\” value=\”篮球\”/>篮球

<input type=\”checkbox\” name=\”items\” value=\”羽毛球\”/>羽毛球

<input type=\”checkbox\” name=\”items\” value=\”乒乓球\”/>乒乓球

<br/>

<input type=\”button\” id=\”checkedAllBtn\” value=\”全 选\”/>

<input type=\”button\” id=\”checkedNoBtn\” value=\”全不选\”/>

<input type=\”button\” id=\”reverseCheckedBtn\” value=\”全反选\”/>

// 测试扩展jQuery对象的方法

var $items = $(\’:checkbox[name=items]\’);

$(\’#checkedAllBtn\’).click(function () {

$items.checkAll();

});

$(\’#checkedNoBtn\’).click(function () {

$items.unCheckAll();

});

$(\’#reverseCheckedBtn\’).click(function () {

$items.reverseCheck();

});

到这里,jQuery的相关知识点就讲完啦,大家学的怎么样了呀,总共3期内容找不到的可以去主页查看,基础的知识点掌握了也要多找些项目实际操练哦!

今天就先讲到这里了,更多Java基础知识持续更新中,欢迎一起学Java!

我们下期再见!

END

文案编辑|云端学长

文案配图|云端学长

内容由:云端源想分享

这可能是全网 最 详细的编程入门教程,学编程看这套视频就够了

Python是一种简单易学,功能强大的编程语言,它有高效率的高层数据结构,简单而有效地实现面向对象编程。Python简洁的语法和对动态输入的支持,再加上解释性语言的本质,使得它在大多数编程语言的使用场景中都堪称最优解。

成熟的Python工程师在自己的工作中会使用不同的工具,也因此产生不同见解,有人爱Django,有人爱Numpy,有人爱Tensorflow,甚至有些程序员会自己创造工具。不过对于初学者而言,答案可能只有一个:爬虫。

那么什么是爬虫?互联网上有着无数的网页,包含着海量的信息,无孔不入、森罗万象。但很多时候,无论出于数据分析或产品需求,我们需要从某些网站,提取出我们感兴趣、有价值的内容,那么我们如何去提取?难道还是要靠传统模式去粘贴和复制吗?在当今大数据时代,显然这种模式已经不适用,所以我们需要一种能自动获取网页内容并可以按照指定规则提取相应内容的程序。这就是爬虫!

特别的Python爬虫入门到实战课程,从最基础的爬虫分类讲起,用史上最详细的视频教程帮助你快速入门爬虫。只需要10个小时,你就能从新手完成进阶!

这是一门什么样的课程?

这是一门面向Python初学者和爬虫爱好者,提供爬虫知识入门和进阶的课程,可以帮助你快速入门。

这门课程有什么特点?

这门课程为零基础人士进行了特别优化。我们将从爬虫基础开始讲起,视频教程内容十分详细,涵盖几乎所有初学者必备知识点。可以帮你实现从零到进阶的过程。

在这门课程里,你将学到:Python学习清单

第一阶段

python开发基础和核心特性

1.变量及运算符

2.分支及循环

3.循环及字符串

4.列表及嵌套列表

5.字典及项目练习

6.函数的使用

7.递归及文件处理

8.文件

9.面向对象

10.设计模式及异常处理

11.异常及模块的使用

12.坦克大战

13.核心编程

14.高级特性

15.内存管理

第二阶段

数据库和linux基础

1.并发编程

2.网络通信

3.MySQL

4.Linux

5.正则表达式

第三阶段

web前端开发基础

1.html基本标签

2.css样式

3.css浮动和定位

4.js基础

5.js对象和函数

6.js定时器和DOM

7.js事件响应

8.使用jquery

9.jquery动画特效

10.Ajax异步网络请求

第四阶段

Python Web框架阶段

1.Django-Git版本控制

2.Django-博客项目

3.Django-商城项目

4.Django模型层

5.Django入门

6.Django模板层

7.Django视图层

8.Tornado框架

第五阶段

Python 爬虫实战开发

1.Python爬虫基础

2.Python爬虫Scrapy框架

以上这python自学教程小编已经为大家打包准备好了,希望对正在学习的你有所帮助!

1.有基础,最好是计算机相关专业毕业

2.逻辑思维能力、数学能力较好

3.对互联网开发有热情

4.年龄在28岁以下

5.一线城市工作最好大专以上学历

最后我采访了两位正在做开发的朋友,他的看法如下:

总结,想在一线城市发展、想往大数据、爬虫、人工智能方向发展,选Python;

想做传统的互联网程序开发,未来在一二线城市都可以发展,选Java。

Java学习清单

第1阶段 :Java基础

1.认知基础课程

2. java入门阶段

3. 面向对象编程

4. 飞机小项目

5. 面向对象和数组

6. 常用类

7. 异常机制

8. 容器和数据结构

9. IO流技术

10. 多线程

11. 网络编程

12. 手写服务器

13. 注解和反射

14. GOF23种设计模式

15. 正则表达式

16. JDBC数据库操作

17. 手写SORM框架

18. JAVA10新特性

19.数据结构和算法

20. JVM虚拟机讲解

21. XML技术解析

第2阶段:数据库开发全套课程

1.Oracle和SQL语言

2.Mysql快速使用

3.PowerDesigner使用

4.JDBC数据库

5.Mysql优化

6.oracle深度讲解

第3阶段:网页开发和设计

1.HTML基础

2.CSS基础

3.JavaScript编程

4.jQuery

5.easyUI

第4阶段:Servlet和JSP实战深入课程

1.Servlet入门和Tomcat

2.request和response对象

3.转发和重定向_Cookie

4.session_Context对象

5.JSP

6.用户管理系统

7.Ajax技术

8.EL和JSTL标签库

9.过滤器

10.监听器

第5阶段:高级框架阶段

1.Mybatis

2.Spring

3.Spring MVC

4.SSM框架整合

5.RBAC权限控制项目

6.Hibernate3

7.Hibernate4

8.jFinal

9.Shiro安全框架

10.Solr搜索框架

11.Struts2

12.Nginx服务器

13.Redis缓存技术

14.JVM虚拟机优化

15.Zookeeper

第6阶段:微服务架构阶段

1.Spring Boot

2.Spring Data

3.Spring Cloud

第7阶段:互联网架构阶段

1.Linux系统

2.Maven技术

3.Git

4.SVN

5.高并发编程

6.系统和虚拟机调优

7.JAVA编程规范

8.高级网络编程

9.Netty框架

10.ActiveMQ消息中间件

11.单点登录SSO

12.数据库和SQL优化

13.数据库集群和高并发

14.Dubbo

15.Redis

16.VSFTPD+NGINX

第8阶段:分布式亿级高并发电商项目

1.基于SOA架构介绍

2.VSFTPD和Nginx和商品新增

3.商品规格参数管理

4.Jsonp

5.CMS模块

6.广告位数据缓存

7.SolrJ和SolrCloud

8.商品搜索

9.商品详情

10.单点登录

11.购物车

12.订单系统

13.分库和分表

14.分布式部署

第9阶段:毕设项目第1季

1. 电子政务网

2. 企业合同管理系统

3. 健康管理系统

4. 商品供应管理系统

5. 土地档案管理系统

6. 聊天室设计和实现

7. 码头配套和货柜管理系统

8. 百货中心供应链系统

9. 病历管理系统

10. 超市积分管理系统

11. 动漫论坛

12. 俄罗斯方块

13. 个人博客系统

14. 固定资产管理系统

15. 影视创作论坛

16. 屏幕截图工具

17. 超级玛丽游戏

18. 飞机大战游戏

19. 雷电

第10阶段:毕设项目第2季

1. 微博系统

2. 写字板

3. 坦克大战

4. 推箱子

5. 电脑系统

6. 记账管理系统

7. 新闻发布系统

8. 医院挂号系统

9. 仓库管理系统

10. 停车场管理系统

11. 网络爬虫

12. 酒店管理系统

13. 企业财务管理系统

14. 车辆管理系统

15. 员工信息管理系统

16. 旅游网站

17. 搜索引擎

18. 进销存管理系统

19. 在线考试系统

20. 物流

21. 住院管理系统

22. 银行柜员业务绩效系统

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

点赞 0
收藏 0

文章为作者独立观点不代本网立场,未经允许不得转载。