JQuery全面解析(一)
前言:
jQuery的使用需要有JavaScript基础,则否你将很难理解操作的目的.
问题一:
jq是什么:一个优秀的js库 (js的升级版),大型开发必备
问题二有什么用:
1.简化了js的复杂操作
2.不再需要关心兼容性
3.提供大量实用方法
问题三:怎么使用?
1.登录 网站:http://jquery.com/
2.点击
3.
4.下载之后,得到二个文件,将其中的文件放在你的工程的文件夹
5.在代码中添加,指向你添加进来的文件即可
JQ的设计思想:
选择页面元素
-1.模拟css选择元素 什么意思呢?
<body>
<div id="box" class="pow">div</div>
<span class ="pow">span</span>
<body>
$('#box').css('background','red') //模拟css找到id选择元素 并且设置背景颜色为红色
$('.pow').css('background','red')//模拟css找到class选择元素 并且设置div和span标签背景颜色为红色(在这里如果是原生js想要设置还需要for循环遍历 ,使用jq是不是简化很多?)
$('div').css('background','red')//模拟css找到标签选择元素 并且设置背景颜色为红色
是不是比原生js :document.getElementById('box').style.background="red"; 要方便的多
-2.独有表达式选择
<ul>
<li></li>
<li></li>
<li></li>
</ul>
使用jq 将第一个li标签变成红色 操作 $('li:first').css('backgroud','red');
使用jq 将最后一个li标签变成红色 操作 $('li:last').css('backgroud','red');
使用jq 将中间li标签变成红色 操作 $('li:eq(2)').css('backgroud','red'); //eq(0) 表示第一个 eq(1) 表示最后一个 eq(2) 表示中间一个
使用jq 将全部li标签变成红色 操作 $('li').css('backgroud','red'); 或者$('ul').children().css('backgroud','red');
使用jq 将偶数li标签变成红色 操作 $('li:odd').css('backgroud','red'); 偶数行全部边红色
使用jq 将奇数li标签变成红色 操作 $('li:even').css('backgroud','red'); 奇数行全部边红色
-3.多种筛选方法
如果我想将二个class的box挑选出来怎么办?
第一种:$('.box').css('background','red')
第二种:$('li').filter('.box').css('background','red') //这里的.filter('.box')意思是已.box为class的元素进行过滤.
如果我想将二个title的hello挑选出来怎么办?
第一种:$('li').filter('[title=hello]').css('background','red') //这里的.filter('[title=hello]')意思是已title的hello的条件进行过滤.
JQ的写法:
1.方法函数化
原生js写法:window.onload=function(){};
jQ写法: $(function(){}) ; // $(); //像不像函数调用
原生js写法:innerHTML=123;
jQ写法: html(123);
原生js写法:onclick=function(){};
jQ写法: click(function(){});
//看到这里有点懵?没有关系看看你熟悉的例子把
案例:模拟点击div 弹出div中的内容的对话框
//模拟点击div 弹出div中的内容的对话框 原生js写法
window.onload=function(){
var oDiv= document.getElementById('box')
oDiv.onclick=function(){
alert(this.innerHTML);
};
};
/*//模拟点击div 弹出div中的内容的对话框 jq写法
$(function(){
$('#box').click(function(){
alert($(this).html()); //如果这里你不知道为什么要$(this) ? 因为$(this) 是jQ的写法 ,不能和js写法混用!!!
//alert(this.innerHTML); //这里这样写也可以 ,因为他是纯js写法.
//唯一需要注意的是不能jQ和js一起写.
})
});
如果觉得有点难? 那么你动手试一试,你会发现当你习惯这样的写法,那么你就会爱上他了!
2.链式操作
$(function(){ //这里并没有使用链式调用,看着结构很清晰,但是作为一名日夜加班的程序狗来说,显然是不符合我们的要求.
var oDiv= $('#box');
oDiv.html(123);
oDiv.css('backgroud','red');
oDiv.onclick(function(){
alert(123);
});
});
$(function(){ //这里使用链式调用,就是程序狗们追求的简单暴力.
$('#box').html(123).css('backgroud','red').click(function(){
alert(123);
});
});
3.取值赋值合体
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
使用原生js如何获取和赋值?
Oli.innerHTML='abc'; 赋值
alert(Oli.innerHTML); 取值
使用jq如何获取和赋值?
$('li').html('abc'); 赋值 (需要注意的是赋值是同时给三个li赋值)
alert($('li').html()); 取值 (取值是取到第一个li的值,并没有把三个值全部取出来); (如果想取全部li值 需要使用循环);
jq的赋值和取值一般情况下:
css('width','200px'); 赋值
css('width') 取值
jq与js关系:
可以共存,不能混用
这里就基本把jq的基本使用和js的区别方式告诉大家,后面会陆续将jquery继续解析给大家!感谢大家 如果有错误请指正,作者是一名android程序狗,目前正在学习前端!欢迎添加作者微信群 一起学习交流! 您的点赞是对作者最大的支持,汪汪汪!!!
微信群:
