jQuery

1、何为jQuery

（1）、jQuery是一个快速、简洁的JavaScript框架，一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

（2）、jQuery  代码库（封装好了很多的方法）<===> Vue （MVVM）

（3）、MVC --> M-model(数据) ----> V-view视图--->C-control（控制器）--->M-model(数据)--->V-view

（4）、jQuery是1个对象，也是1个函数对象，有很多好用的属性和方法。JavaScript语言写出来的一个函数对象。

（5）、jQuery现在已经发布到第三个大版本，一般用第一个版本，因为兼容性最好。第三个版本是IE9以上才兼容。(功能也没什么变化)

2、jQuery的使用

开始需引入jQuery框架

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

2.1快速获取dom

语法：$(“选择器”)，按照css选择器进行选择即可

返回值：jQuery文档对象,注意这个jQuery对象跟原生的dom对象不是一个东西，这里面有jQuery封装好的方法。

2.2快速设置文档样式

语法：$(“选择器”).css(“样式的属性”，“样式的值”)

例：

 <h1>helloworld</h1>
    <script type="text/javascript">
        var h1=$("h1")
       h1.css("fontSize","100px")
        h1.css({
            border:"1px solid #000"
           // "box-shadow":"0px 5px 10px #ccc"
        })

    </script>

 

一次性设置多个样式：

$(“选择器”).css({属性key：属性value,属性key:属性value......})

注意：如果属性key是由多个单词用-并联组成，那么必须用驼峰命名法，或者加引号来解决。

例：

<script type="text/javascript">
    var h1=$("h1")
    h1.css({
        border:"1px solid #000"
       boxShadow:"0px 5px 10px #ccc"
    })
</script>

2.3设置获取及修改文档内容

语法：

$(“选择器”).html()   ---->获取文档的html内容

$(“选择器”).text()    ---->获取文档的text内容

$(“选择器”).val()     ---->获取输入框的value值

$(“选择器”).html(“html内容”)  ---->设置文档的HTML内容

$(“选择器”).text(“文本内容”)    ---->设置文档的text内容

$(“选择器”).val(“value”)     ---->设置输入框的value值

//设置和修改HTML的内容
$('h1').html('今晚吃啥？');
document.querySelector("h1").innerHTML = "今晚吃鸡"

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

注意：获取DOM对象上的内容,不传参数就是获取内容，传参数就是修改内容

2.4快速将内容插入及删除

语法：

$(选择器).append("<h1>helloworld</h1>") ---->将参数里面的html追加到选择器对象的最后一个子元素上

$('.child').appendTo('.parent2')  ---->将选择器的对象插入到参数的对象上

$(".child").insertBefore("ul") ---->在什么前面插入内容

$('.child').insertAfter("ul")    ---->//在什么后面插入内容

例：

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

2.5快速的写JS的动画

 

语法:

$(".parentt").slideToggle(5000)  --->//滑动切换

$(".parentt").fadeToggle(5000) --->//淡入淡出切换

$(".parentt").fadeIn(5000,"linear",function(){console.log("动画完成")}) --->淡入进来

$(".parentt").fadeOut(5000) --->淡入出去

$('.parentt').animate({width:"900px"},5000,"linear",function(){console.log("动画已完成")})

 

推荐：添加类名的方式完成动画

$('.parentt').addClass("animate")

2.6快速html事件

语法：

$(选择器).click(function(e){点击事件之后要执行的内容})

$(选择器).on(“事件的名称”，function(e){事件要执行的内容})

//文档加载完毕即执行事件，仅文档加载完毕，不用等待图片加载，可以将js代码放置到前后都行。

$(document).ready(function(){})

缩写：$(function(){})

例：

$(".d1").click(function(e){
    console.log("1")
})
$(".d1").click(function(e){
    console.log("2")
})
$('body').keypress(function(e){
    console.log(e)
})