DAY3:学习jQuery的设计思想

in #code6 years ago

最近学完了css和bootstrap,接下来在jQuery的学习中遇到了一些困惑,感觉上手很容易,但是想真正做到自己使用还是挺难。在过完了freecodecamp上的代码完以后,重新整理下设计思想。

这里参考阮一峰老师的教程,写的很清楚,我自己又重新概括了下。http://www.ruanyifeng.com/blog/2011/07/jquery_fundamentals.html

一、选择网页元素

jQuery的基本设计思想和主要用法,就是"选择某个网页元素,然后对其进行某种操作"。这是它区别于其他Javascript库的根本特点。

第一步,就是选择一个对象,可以选择的对象和语法:

$(document) //选择一个对象
$('#myId') //选择ID为myId的网页元素
$('div.myClass') // 选择class为myClass的div元素(注意哦是div)
$('input[name=first]') // 选择name属性等于first的input元素

也可以是表达式

$('a:first') //选择网页中第一个a元素
$('tr:odd') //选择表格的奇数行
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
$('div:gt(2)') // 选择所有的div元素,除了前三个
$('div:animated') // 选择当前处于动画状态的div元素

二、设定效果集
可以这么理解,选中元素后,提供各种过滤器,来缩小选定结果。。

$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').first(); //选择第1个div元素
$('div').eq(5); //选择第6个div元素(按0算起)

好了,今天先学到这里,去写代码了

Coin Marketplace

STEEM 0.19
TRX 0.12
JST 0.027
BTC 60185.13
ETH 3290.40
USDT 1.00
SBD 2.44