jquery基础知识

1、jquery 特点：
jquery是一款免费且开放源代码的javascript代码库，引入了全新的DOM选择器引擎，同时提供UI库组件。
jquery优点：
轻量级
强大的DOM选择器，简化javascript和ajax开发。
解决不同浏览器兼容问题
提供UI库组件，让页面开发更方便。

2、导入jquery:
<script src="js/jquery-1.10.2.js"></script>

3、Jquery事件添加，全部采用现代事件添加方式，一个事件可以绑定多个函数
$("#mydiv").click( function () {

}

4、$(function(){
……
}) 文档加载完毕后，再执行，相当于window.onload

5、jquery对象和dom对象互换。jquery对象和DOM对象方法是不一样的，使用前需要注意是什么对象
dom转为jquery
var obj = document.getElementById("div1");
var jq = $(obj);
jquery转为dom
var jq = $("#div1");
var obj = $(jq)[0];

6、选择器：
id选择器： var msg =$("#div1").html(); //得到id为div1的元素，标签中间的内容

子元素选择器：（相当于getElementsByTagName），找到元素指定标签子元素集合
var msg = $("#div1 label");
var msg = $("#div1").find("label");//得到的是集合
alert($("#div1 label")[1].innerHTML); //注意取出的数组元素为DOM对象

类选择器：$("#div1 .mm").html();//得到id为div1的元素中，所有class="mm"元素集合

属性选择器： $('#selectObj option:selected') 选择下拉框中所有选中项

7、设置元素属性
$("#showImg").attr("src","1.jpg");

8、设置元素样式
$("#div1").css(
{border:'5px solid #9f0',backgroundColor:'yellow'})

9、设置获得元素内容
设置、获得标签中的内容（相当于innerHMTL）
$("#div1").html("<p>aaa</p>");//设置内容
alert($("#div1").html());//获得内容

设置、获得value值
$("#userName").val("张三");//设置value值
alert($("#userName").val());//获得value值

10、遍历数组
$("#div1 label").each(function (){
//得到原始DOM对象
alert(this.innerHTML);
});

11、显示、隐藏元素
$("p").show("slow");//附加动画，显示元素
$("p").hide("slow");//附加动画，隐藏元素

12、DOM操作
元素添加
$("#m1div").append("<img src='1.jpg'>");

元素移除
//从父容器中移除id为 p1的元素
$("#p1").remove();
//从mydiv元素中移除所有样式为mm的元素
$("#mydiv").remove(".mm");

元素替换
//将所有的p元素替换为b元素
$("p").replaceWith("<b>Paragraph. </b>");

元素下一个元素
$("#p1").next();

元素上一个元素
$("#p1").prev();

元素父元素
$("#p1").parent()

 

 

有效分行：

<div class="row">

　　<div class=" col-xs-2"></div>

　　<div class=" col-xs-3"></div>

　　<div class=" col-xs-4"></div>

　　<div class=" col-xs-3"></div>

　　　　　　　　　　//加起来总份数为12

</div>