JavaScript框架jQuery入门
Posted 天码营
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript框架jQuery入门相关的知识,希望对你有一定的参考价值。
javascript框架jQuery入门 由David发表在天码营
jQuery入门
jQuery是一个快速简单的JavaScript工具库,为快速开发提供了DOM遍历、事件处理、动画、AJAX交互几个方面的工具。jQuery会改变你写JavaScript的方式。
先来看看jQuery用起来是怎样的:
// 给拥有continue类的<button>元素设置文本为:Next Step...
$( "button.continue" ).html( "Next Step..." )
// 监听拥有btn-next ID的元素的点击事件
$( "#btn-next" ).on( "click", function( event )
alert('clicked!')
);
引入jQuery
jQuery是一种JavaScript库,应当使用<script>
标签加以引入。可以有两种方式:
-
使用jQuery CDN。在HTML中加入下面的代码:
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
也有很多其他CDN可选,参见:https://code.jquery.com/
-
使用本地文件。首先在这里:https://jquery.com/下载
jquery.min.js
。然后在HTML中加以引入:<script src="your/path/to/jquery.min.js"></script>
名称选择器
jQuery最常用的特性便是DOM操作。使用$()
进行DOM元素的选择,其参数成为选择符(selector)。返回值为jQuery集合,该集合是DOM元素集合的一个包装,可以更方便地进行DOM操作。
顾名思义,名称选择器是根据DOM元素的名称进行选择的。例如下面的HTML:
<div>harttle</div>
<p>My name is harttle.</p>
<div>harttleland</div>
运行下列jQuery操作:
$('div').html('David');
你的HTML将会变成这样:
<div>David</div>
<p>My name is harttle.</p>
<div>David</div>
jQuery选中了所有的<div>
标签并设置了它的内容。
ID选择符
ID选择符是以#
起始的字符串,例如对下面的HTML:
<div id="name"></div>
<div></div>
运行下列jQuery操作:
$('#name').html('Harttle');
其中html()
函数用来设置jQuery集合中DOM元素的HTML内容,操作后HTML会变成这样:
<div id="name">Harttle</div>
<div></div>
其他选择器
到这里想必你会发现jQuery选择器和CSS选择器很像,这是jQuery故意设计的(CSS Compliance)。这样才方便前端人员的工作。其他的一些CSS风格选择符都是可用的,例如:
- Class选择符:
.active
。 - 后代元素选择符:
div #name
。 - 子元素选择符:
div>#name
。 - 属性选择符:
a[href="/foo.html"]
。
更多的jQuery选择器等着你去探索:http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
事件监听
DOM事件处理在不同浏览器中一直没有一致的实现,包括attachEvent
、addEventListener
、onclick
等方法。jQuery提供了一致的DOM事件处理方式,最常用的包括on
和click
方法:
<button class="next">下一步</button>
$('button.next').click(function()
alert('clicked 1!');
);
$('button.next').on('click', function()
alert('clicked 2!');
);
在鼠标点击那个具有next
类的<button>
时,便会弹出两个提示。其实.click()
只是.on('click')
的快捷方式,本质上还是调用后者来实现的。不同的是.on
还可以绑定其他事件,比如:.on('hover')
,.on('touch')
等等。
DOM创建
jQuery还提供了DOM创建和插入的工具,不需要再用繁琐的DOM API了!
<div class="name"></div>
<button>Remove</button>
将$()
函数传入参数的选择符替换成一段HTML即可创建HTML元素,然后使用.append()
方法将新创建的元素插入到DOM中对应的位置。使用.remove()
方法可以移除当前选择符选中的元素。
var element = $('<p>Harttle</p>');
$('.name').append(element);
$('button').click(function()
element.remove();
);
在页面初始化后,jQuery在<div class="name">
里面插入了一个<p>
标签。点击<button>
,jQuery会去移除刚刚插入的<p>
标签。
动画
jQuery集合还有一个.animate
方法,可以让某个属性的值产生渐变。例如:
<div style="background:red;height:20px;width:20px;"></div>
<button>Am Button</button>
.animate
的第一个参数是一个CSS属性列表,可以包含任意多的键值对。第二个参数是渐变的时间,这里没有设置采用默认值normal
。
$("button").click(function()
$("div").animate(height:"300px");
);
点击按钮后<div>
会逐渐变高。.animate
还有很多更好玩的参数,比如时间函数、结束回调等,可以在这里查阅:http://www.w3school.com.cn/jquery/effect_animate.asp
一个例子
上面详细介绍了jQuery的各种使用方式,包括DOM创建与遍历、事件监听、动画效果等。其实当你开始使用jQuery后会发现更多的特性,比你想象中还要好用!还是那句话:jQuery会改变你写JavaScript的方式。下面给一个例子,看看用jQuery写的JavaScript是怎样的:
// 选择 id 为 fruits 的元素集合(该集合中只有一个元素,即 ul )
var $ul = $('#fruits');
// 找到该元素的第一个子元素(即 li)并将其移除
$ul.find(':first-child').remove();
// 创建一个 li 元素,并设置其 color 样式为 red,其内容为 pear
var $pear = $('<li>')
.css('color', 'red')
.html('pear');
// 将 pear 添加到 ul 中
$ul.append($pear);
更多文章请访问天码营网站
以上是关于JavaScript框架jQuery入门的主要内容,如果未能解决你的问题,请参考以下文章