jQuery其实是一个轻量级 JavaScript框架,它可以让我们能够方便的去处理HTML文档,兼容各种浏览器,支持CSS3的布局,它方便了我们修改页面的表现,以及能够用简单的代码给界面添加动画,而且还方便了我们对事件的处理,我们还可以在其中去进行CSS样式的修改,jQuery实际上就是一个外部的js的文件,我们如果要去使用的话其实直接进行导入这个js文件就可以了。
如果我们自己去写JS代码的话,可能会存在以下的问题
1、浏览器兼容问题
2、如果有复杂的dom操作需要我们自己去写大量的代码
3、复杂的动画和特效也都需要我们自己去写
4、跨域访问的问题,跨域访问其实简单的说就是 A 网站的 javascript 代码试图访问 B 网站去提交内容和获取内容等。
jQuery的优点
1、很好的解决了浏览器的兼容问题
2、能够简单的去实现Dom操作和动画
3、有多种的网络请求方案
下面简单的介绍下它的用法,在jQuery中到处都能见到这个符号$,而$()这个代表的就是jQuery中的一个对象
我们这样就可以拿到img标签
$("img")
返回img标签的src值的话,我们可以这么做,也就是说下面的attr其实就是拿到标签中的属性
$('img').attr('src')
修改标签中的属性,举个例子下面的就是把所有的img标签的src的值都给改了
$('img').attr('src','img/HBuilder.png');
批量进行修改属性
$('img').attr({src:'img/HBuilder.png',width:'500px'});
拿到标签内容,下面拿到p标签的内容
$('p').text()
改变标签的内容,例如下面我们修改的是p标签
$('p').text('嘿嘿');
获取数组中的元素监听点击事件,比如说我们有两个按钮
<button>显示</button>
<button>隐藏</button>
我们想去获取第一个并且去监听点击事件的话可以这么做,就比如说我们点击显示按钮让所有的图片隐藏,hide方法就是隐藏显示的图片
$('button').eq(0).on('click',function (){
$('img').hide();
})
与之相反的就是show方法就是展示,就是显示隐藏的图片
$('img').show();
遍历数组
$.each(["a","b","c"],function(index,value){
console.log(index+value);
});
获取相应的元素在数组里面的角标
var array1 = ["a","b","c"];
console.log($.inArray('b',array1));
写CSS的样式
$('p').css({
background:'red',
});