jQuery入门和响应式布局3种方法

本文介绍了jQuery的基本概念和使用方法,包括如何加载jQuery库、使用jQuery提供的API简化DOM操作等,并探讨了jQuery对象与原生JS对象之间的转换。此外,还详细讲解了响应式布局的三种实现方式及其应用场景。
jQuery是一个js库。里面封装了各种各样的js方法。
用户在使用jQuery的时候,只需要调用jQuery里的方法,
即可完成相对复杂的功能,没有必要自己去定义相关的方法。
jQuery语法
$(selector).action;
jquery框架本身就是一个js文件,可以像导入普通的js文件一样导入jquery文件导入jquery文件以后,就可以使用jquery提供的各种各样的方法。
/*js的文档就绪函数*/
window.onload = function () {
//document.getElementById("text").style.display = "none";
$(document.getElementById("text")).hide();
};
/*jquery文档就绪函数 方法1*/
$(document).ready(function () {
//$("#text2").html("jredu");
$("#text2")[0].innerHTML = "jredu";
});

/*jquery文档就绪函数 精简方法2 用法广泛*/
$(function () {
$("#text3").html("文档就绪完成!")
});
需要注意的是,js的文档就绪函数只有一个有效,后定义的会覆盖之前的,而jQuery的可以定义多个而且不会被覆盖
jQuery中$()就可以代表就绪函数。
对象的转换:
/* js类型的对象和jquery类型的对象,是完全不同的两种对象。
* 两种对象的方法不能相互相互调用。
* 那么js对象如果想调用jquery里的方法,或者jquery对象想调用js的方法,怎么办?
* 这时候涉及到js对象和jquery对象的相互相互转换的问题。
* 转换1:js对象转换成jquery对象
* 转换2:jquery对象转换成js对象*/

/*___________________js ---> jquery________________*/

/*document.getElementById("text"):返回的是js类型的对象*/
//document.getElementById("text").innerHTML = "ccy";

//没有实现 因为hide()是jquery对象的方法,js对象是没办法调用的
//document.getElementById("text").hide();无法调用。

//转换1:js对象转换成jquery对象
// $():jquery对象的转换工厂,可以把js对象转换成jquery对象
var jsObj = document.getElementById("text");
var jqueryObj = $(jsObj);//js对象转换成jquery对象。
用$符号(包裹js对象)转换成jQuery对象。
jqueryObj.hide();

/*__________________jquery --->js__________________*/

/*$("#text2"):返回的是jquery类型对象*/

/*也不能实现,因为innerHTML是js对象的属性,jquery对象是没办法使用的。*/
//$("#text2").innerHTML = "jredu";

/*通过$()获取的元素都是数组类型的,可以通过索引获取数组里的元素,得到的元素就是js类型的*/
/*转换2:jquery对象转换成js对象*/
var jqObj = $("#text2");
var jsObj = jqObj[0];
jQuery元素的第1个(数组号为0)为js类型的对象。
jsObj.innerHTML = "jredu";



响应式布局
因为电子设备的多样化和普及化,为了让网页分别支持手机端,平板电脑端,笔记本电脑端,大屏电脑端。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。
响应式布局基本有三种写法:
1:
在style中使用@media分别为不同模式添加不同样式,例如:
/*屏幕宽度大于2014的时候,显示一行四列*/
@media all and (min-width: 1024px){
#div1,#div2,#div3,#div4{
width: 25%;
float: left;
}
}

/*当屏幕宽度大于768小于1024(范围一定要明确指定)的时候,显示一行两列*/
@media all and (min-width: 768px) and (max-width: 1024px){
#div1,#div2,#div3,#div4{
width: 50%;
float: left;
}
}
/*当屏幕宽度小于768的时候,显示一行一列*/
@media all and (max-width: 768px){
#div1,#div2,#div3,#div4{
width: 100%;
float: left;
}
}
2:
在style中使用@import分别为不同模式添加不同样式,需要注意,使用了@import的style中只能添加@import不能写任何样式代码,对于低端ie,style中最多只能添加20多条@import。
例如:
<style>
@import "CSS0.css";
@import "CSS1.css" all and (min-width: 1024px);
@import "CSS2.css" all and (min-width: 768px) and (max-width: 1024px);
@import "CSS3.css" all and (max-width: 768px);
</style>

3:
使用link标签添加不同样式,需要注意标签的3种属性,rel,herf和media。
<link rel="stylesheet" href="CSS0.css">
<link rel="stylesheet" href="CSS1.css" media="all and (min-width:1024px)">
<link rel="stylesheet" href="CSS2.css" media="all and (min-width:768px) and (max-width:1024px)">
<link rel="stylesheet" href="CSS3.css" media="all and (max-width:768px)">
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值