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

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)">