jQuery
- 使用时长:目前是前端里面最长寿的库。(14年)
- 广泛成度:它使用广泛成度是没有任何其他库可以比拟的 ,全球80%的网站在使用jQuery
jQuery如何获取元素
jQuery的基本设计思想和主要用法,就是"选择某个网页元素,然后对其进行某种操作"。这是它区别于其他Javascript库的根本特点。
使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素。
选择表达式可以是CSS选择器:
$(document) // 选择整个文档对象
$('myId') // 选择ID为myId网页元素
$('div.myClass') // 选择class为myClass的div元素
$('input[name=first]') // 选择name属性等于first的input元素
也可以是jQuery 特有的表达式
$('a:first') //选择网页中第一个a元素
$('tr:odd') //选择表格的奇数行
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
$('div:gt(2)') // 选择所有的div元素,除了前三个
$('div:animated') // 选择当前处于动画状态的div元素
链式操作是怎么样的呢?
使用api 调用了一个函数,这个函数返回前面的东西,于是你可以继续调用
$('div').find('h3').eq(2).html('Hello');
分解之后是就是下面这样:
$('div'), // 找到div 元素
find('h3') // 选择其中的 h3 元素
eq(2)// 选择第3个 h3 元素
html('hello') // 将它的内容改写为 hello
如何创建元素
$('<p>hello</p>') // 创建一个p 标签,内容是 hello
$('<li class ="new">new list </li>') // 添加 class 属性的标签
$('ul').append('<li>new list</li>') // 在无序列表中添加一个标签
如何移动元素
- 有两种方法:
//第一种方法是使用:
.insertAfter()
//把div 元素移动到 p 元素后面:
$('div').insertAfter($('p'));
//第二种方法是使用:
.after()
把p 元素加到div 元素前面:
$('p').after($('div'));
如何修改元素的属性
$div.text(?) // 括号内不加内容只为读文本内容,加内容修改文本内容
$div.html(?) // 括号内不加内容只为读 html 内容,加内容修改为html 内容
$div.attr('title',?) // 读写内容
$div.css({color:'red'}) // 读写style// $div.style
$div.add(Class('blue')/removeClass/hasClass
$div.on('click',fn) //监听事件,监听到了就执行fn
$div.off('click'fn)// 监听事件,监听到了就执行fn