网页前端基础四：JQuery

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

2. 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常用知识