JQuery的使用

1、JQuery是什么

JQuery是一个js的框架

JQuery实际上就是对js的一种封装  这个封装的目的 是为了 让我们的js操作 更加简单

JQuery他的实现功能和JS实现的功能是一样的

jQuery的出现就是为了简化js的操作

2、JQuery能干什么

js能干的事情JQuery能干，而且代码更加简洁
js不能干的一些操作JQuery也能干

3、JQuery的使用

JQuery的使用需要在JS中导入JQuery的包

示例：

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

3.1 选择器

注：

JQuery中通过选择器 获取的对象都是 数组

而JS中的对象 获取到的是单个的对象

选择器

JQuery

id选择器

var div1=$("#div1")

class选择器

var div2=$(".class1")

标签选择器

var div3=$(“div”)

后代选择器

var div4=$(“div div span”)

专用于表单的选择器

var val=$(":button") （input标签下的 type）

拓展：获取各种子标签

示例：

<ul>
    <li>这里是第一个</li>
    <li>这里是第二个</li>
    <li>这里是第三个</li>
    <li>这里是第四个</li>
    <li>这里是第五个</li>
</ul>

获取子标签

格式

获取标签的第一个子标签

var li1=$(“li:first-child”)

选中ul中的最后一个孩子

var li2=$(“li:last-child”)

选中ul中的奇数的孩子 （这里要注意的是 下标是从0开始的）

var li3=$(“li:odd”)

选中ul中所有偶数的孩子

var li4=$(“li:even”)

选中从前往后数的第三个

var li3=$(“li:nth-child(3)”)

选中从后往前数的第二个孩子

var li3=$(“li:nth-last-child(2)”)

3.2 事件的使用

3.2.1 鼠标事件

1.点击事件：单击（.click）、双击（.dblclick）

区分：时间间隔阈值

使用示例：

$(document).ready(function() 与JS中的window.onload(function)相同

<div id="div1">
    按钮
</div>

<script type="text/javascript">
    $(document).ready(function() {

        var div1 = $("#div1")
        //单击事件
        div1.click(function(){
            console.log("单击......");
        })

        //双击事件
        div1.dblclick(function(){
            console.log("双击......");
        })
    })
</script>

2.鼠标移动事件：移进（.mouseenter）、移出（.mouseleave）

使用示例：

<div id="div1">
    按钮
</div>

<script type="text/javascript">
    $(document).ready(function() {

        //鼠标移进
        div1.mouseenter(function(){
            $(this).css("background","red");
        })
        
		//鼠标移出
        div1.mouseleave(function(){
            $(this).css("background","white");
        })
    })
</script>

注：

  1. this在JQuery中的使用：this在事件处理中使用的较多，表示当前元素，但this是js对象而不是JQuery对象，所以在使用时需要将JS对象转化为JQuery对象（$(this)）

JS对象转化为JQuery对象

JQuery对象转化为JS对象

$(JS对象)

(JQuery对象).get(0)

3.2.2 键盘事件

键盘按下（.keydown）、键盘松开（.keyup）、键盘长按（ .keypress ）

使用示例：

<div id="div1">
    按钮
</div>

<script type="text/javascript">
    $(document).ready(function() {
        //键盘按下
        $(document).keydown(function(event){
            console.log("按下了....:"+event.keyCode)
        })
        
        //组合键读取：每一个key都有一个键码  这个码值就能唯一的标识。
        //注：（组合键存在优先级，Ctrl>alt>字母键，与if语句中的前后表达式无关。）
        $(document).keydown(function(event) {
            //这个条件成立的时候就便是按下了 CTRL+ALT+B
            if(event.keyCode == 66&& event.ctrlKey && event.altKey ) {
                console.log("按下了CTRL+ALT+B");
            }
        })

        //键盘松开
        $(document).keyup(function(event) {
            console.log("按键抬起了....")
        })
    })
</script>
3.2.3 焦点事件

得到焦点（.focus）、失去焦点（.blur）（常常用作文本验证）

使用示例：

<input type="text" value="JQuery！" />

<script type="text/javascript">
    $(document).ready(function() {
        //得到焦点
        $(":text").focus(function(){
            console.log("得到焦点的事件....")
        })
        //失去焦点
        $(":text").blur(function(){
            console.log("焦点失去的事件....")
        })
    })
</script>
3.2.4 改变事件(.change)
<input type="text" value="JQuery！" />

<script type="text/javascript">
    $(document).ready(function() {
        //改变了内容只有焦点失去之后才有作用
        $(":text").change(function(){
            console.log("文本内容改变了....")
        })
    })
</script>

3.3 获取值

JS

JQuery

获取HTML内容

.innerHTML 示例：document.getElementById(“div1”).innerHTML;

.html 示例：$("#div1").html

获取文本值

.innerText 示例：document.getElementById(“div1”).innerHTML;*/

.text 示例：$("#div1").text

获取表单value值

.value

.val() 示例：$(":text").val()

3.4 添加元素

在JS中：createElement（“标签名”）+append（标签元素）

在JQuery中：

最简单的添加元素示例：

<script type="text/javascript">
    //准备的数据
    var user = {
        id: 1,
        userName: "JQuery",
        password: "123"
    }

    $(document).ready(function() {
        //使用标签选择器
        var tb = $("table");
        //拼接要添加的字符串
        var str="<tr><td>"+user.id+"</td><td>"+user.userName+"</td><td>"+user.password+"</td></tr>"
        tb.append(str);

    });
</script>

其他方法：

插入元素方式

JQuery

元素中添加

$(“table”).append(str);

在元素的开头写入内容

$("#div1").prepend(“

嘿嘿嘿”) 这个表示的是整个元素的后面（不是内容的后面） $("#div1").after(“这里是元素后面”); 置空元素 $("#div1").empty(); 删除元素 $("#div1").remove();

3.5 添加样式

添加样式的方式

JQuery

添加一个已经存在的样式

$(“div”).addClass(“bobo”);

删除元素样式

$(“div”).removeClass();

原来如果是有这个样式 那么就删除 原来没有这个样式那么就添加

$(“div”).toggleClass(“bobo”);

手动添加一个样式

$(“div”).css(“color”,“red”)

手动添加多个样式

$(“div”).css({ “color”:“blue”,“font-size”:“30px” })

样式示例：

<style type="text/css">
    .bobo{	
        width: 200px;
        height: 200px;
        border-radius: 10px;
        border: 1px solid blue;
    }
</style>

注：这里只是简略展示一些JQuery常用知识