jQuery教程

JQuery:

什么是JQuery?

　　JQuery就是一个javascript函数库,没什么特别的.

JQuery能作什么?jQuery是作什么的?

　　JQuery自己就是一堆JavaScript函数,JavaScript是作什么的,jQuery也同样.毕竟JQuery只是用JavaScript编写的函数库而已,有些功能JQuery没有封装,则还须要经过本身写JavaScript来实现.

好处:

JQuery的特色?

　　Write Less,Do More(写更少(的代码),作更多(的事情))

　　①更好的解决了不一样的浏览器兼容问题(IE 6.0+, FireFox 2+, Safari 3.0+, Chrom)css仍是有些问题的,对于不一样控件具备统一的操做方式.

　　②体积小(几十KB)、使用简单方便（Write Less,Do More）

　　③链式编程$('#div1').draggble().show().hide().fly()

　　④隐式迭代

　　⑤插件丰富、开源、免费.让JavaScript程序风简单、更强大！

JQuery中的顶级对象$:

　　JQuery中最经常使用的对象即$对象,想要使用JQuery的方法必须经过$对象.只有普通的DOM对象封装成JQuery对象,而后才能调用JQuery中的各类方法.

　　$是JQuery简写,在代码中可使用JQuery代替$,但通常为了方便都是用$.

Window.onload事件:

　　window.onload通常都是写在<script>标签中的js代码里,众所周知,代码的执行顺序是从上倒下的,若是你的js代码写在你要添加功能的html前边那么,代码执行时,执行到js代码后,没有获取到html,在执行完成后,就会执行html,所以js代码会无效.而添加了window.onload的事件处理函数，它会只有当文档加载完成后，才会执行事件处理函数.因此若是js代码和html代码写在一块儿了,而且js代码在html代码的上边就必须这样写:window.onload=function(){js代码}.

 

为何Jquery对象和DOM对象要互转?

 

　　DOM对象转Jquery对象操做方便,毕竟Jquery中方法都是封装好了的,并且兼容问题解决的很好,代码少,方便. Jquery对象转DOM对象,由于Jquery中文件一直在更新，不少东西都是随着使用而进行封装和升级,不太可能把全部dom中用到的进行封装,还有不少未知的兼容问题没有封装进去,因此,有的时候jquery中不能解决的问题,还须要原生的js代码来解决,因此,jquery对象有的时候须要转成dom对象来进行操做.

Jquery对象和DOM对象互转:

 

$(function () {
    var bt1=$("#btn")[0];//由jquery对象转成了dom对象
    var bt2=document.getElementById("btn");//对象        
    console.log(bt1==bt2);
});

 

将dom对象转成jQuery对象,加$就能够了

如何将jquery对象转dom对象

$(function () {
    var dv1 = $("#dv");//由jquery对象转成了dom对象
    var dv2 = document.getElementById("dv");//对象    
//必然报错,为何?由于jquery对象不能直接调用dom中对象的属性或者是方法    
    dv1.innerHTML = "<p>哈哈</p>";    
    //同理,下面这行代码必然报错,为何呢?由于dom对象是不能直接调用jquery对象的方法的    
    dv2.html("<p>哈哈</p>");
});

$('#btn')[0]和$('#btn').get(0)均可以转dom对象, $(dom对象)及可转jquery对象

案例:(网页开关灯)

DOM写法:

$(function () {
    $("#btn").click(function () {
        if($(this).val()=="开灯") {                    
              $("body").css("backgroundColor", "black");              
              $(this).val("关灯");
        }else{
            $("body").css("backgroundColor", "");
           $(this).val("开灯");
        }
    });
});
        

JQuery写法:

$("#btn").click(function () {
        if(this.value=="开灯") {
            $("body")[0].style.backgroundColor="black";
            this.value="关灯";
        }else{
            $("body")[0].style.backgroundColor="";
            this.value="关灯";
        }
    });
});

因而可知JQuery比DOM写法简便不少.

JQuery中的选择器:

选择器:就是为了获取元素进行操做.

DOM中获取元素的方式:

 

document.getElementById();　　　　//经过id来获取元素
document.getElementByTagName();　//经过标签名来获取元素
document.getElementByClassName();//经过class类来获取元素

 

JQuery中获取元素的方式

$("#btn");//经过id获取元素
$("div"); //经过标签名来获取元素
$(".cls") //经过class类名来获取元素

因而可知DOM中选择器代码多、长、麻烦，而JQuery中简单，而且方便。

下边介绍些JQuery中的一些特殊选择器写法：

好比点击按钮设置页面上应用cls类样式li标签的背景颜色就能够用:
$(li.cls)；  //标签加类选择器

好比点击一个按钮,设置页面中的span标签,li标签,div标签的背景颜色就可使用:
$(span,li,div)  //多条件选择器

 

层级选择器:

 

后代选择器(子元素中元素,子,仔仔,孙)$(“#dv li”)或者$(“ul li”)或者$(“.cls li”)

$("#dv li").css("backgroundColor","red");//给id叫dv的全部li元素设置背景颜色为红色(只要是这个div里面的li就都变色)

 

子代选择器(直接的全部子元素,儿子) $(“#ul>li”)或者$(“div >span”)或者$(“.cls >li”)

$("#dv>li").css("backgroundColor","red");//给id叫dv的元素里面的li元素设置背景颜色为红色(若是里面还有嵌套,嵌套里面的li不变色)

索引选择器:

$("#u1 li:eq(7)").css("backgroundColor","red");// 获取索引为7的元素
$("#u1 li:gt(7)").css("backgroundColor","green");//索引大于7的全部元素
$("#u1 li:lt(5)").css("backgroundColor","black"); //索引小于5的全部的元素

运行结果:

 

JQuery中的常见方法

 

.html()方法,设置标签中间显示其余标签及内容,相似于innerHTML

.text()方法,设置标签中间显示的文本内容,相似于innerText

.val()方法,设置input标签中value的值,相似于value

.css()方法,设置元素的样式,相似于style

注意:

()中写字符串,一个参数,就是要设置的值,什么也不写,返回的是这个属性的值

.css()写的是键值对

 

 

 

 

 

今天就先总结到这吧!有缘下次再见