初学jQuery

什么是jQuery？

jQuery就是javascript的一个库，一个快速、简洁的代码库，把我们常用的一些功能进行了封装，方便我们来调用，提高我们的开发效率，极大地简化了 JavaScript 编程。

Javascipt跟jQuery的区别

1. Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。
2. jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发
3. jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到。

如何使用jQuery代码库？

 

从官网jquery.com上下载jquery文件，在html源文件中导入jquery文件，即可使用

<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

jQuery的DOM操作

1、获取DOM对象

<script type="text/javascript">
    //$不是特殊符号，只是1个变量的名称
    console.log($)
    console.log(jQuery)
    console.log($==jQuery)
    
    var h1 = document.querySelector('h1')//JavaScript的获取方式
    var h11 = $("h1")//jQuery的获取方式
    var h12 = jQuery("h1")//jQuery的获取方式
    console.log(h1)
    console.log(h11)
    console.log(h12)
</script>

 2、修改DOM对象元素的内容

//获取和修改HTML的内容
$('h1').html('今晚吃啥？');//jQuery的修改
document.querySelector("h1").innerHTML = "今晚吃啥？"//JavaScript方式

//获取DOM对象上的内容,不传参数就是获取内容
var html = $('h1').html()
console.log(html)

　　3、修改DOM元素的属性

//设置和修改dom元素的属性
$('img').attr("src","img/cxk.gif")//修改图片的路径
//获取dom属性的值
var imgSrc = $("img").attr("src")//获取图片的路径
console.log(imgSrc)

 

4、修改DOM元素的样式

注意：属性是由多个单词组成，那么key要用引号引起来，或者使用驼峰命名法，如下所示

$(".abc").css({
    background:"skyblue",
    color:"#fff",
    "border-bottom":"10px solid purple",
    borderTop:"10px solid yellow"
})
//一次性只设置1个样式
//$(".abc").css("border","10px solid pink")

 

 5、添加和删除className

$('button').click(function(e){
    console.log($('.d1').attr("class"))
    if($('.d1').attr("class")=="d1"){
        $('.d1').addClass("swiper");//添加类名
    }else{
        $('.d1').removeClass("swiper");//删除类名
    }
    //$('.d1').addClass("swiper");
    //$('.d1').toggleClass("swiper");//切换类名
})

 　　6、插入和删除DOM元素

<img src="img/cxk.gif"/>
<h1>-------------------------------------</h1>
<div id="main">
    
</div>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    //可以追加html代码
    $('#main').append("<h1>helloworld</h1>")
    //可以追加既存在的元素对象
    $('#main').append($("img"))
    //删除元素
    $(".delete").remove()
</script>

 

　　7、DOM的相关事件

语法：$('css选择器').事件名称(function(事件对象){})
$(".d1").click(function(e){
    console.log("1")
})
$(".d1").click(function(e){
    console.log("2")
})
$('body').keypress(function(e){
    console.log(e)
})