jQuery初识 - 掘金

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情

jQuery封装了JavaScript常用的功能代码.

slogan: Write Less, Do More!

jQuery提供的功能

优化了HTML文档操作
优化了事件处理
优化了动画设计
优化了Ajax交互

jQuery的优点

提供了链式语法
提供了短小清晰的多功能接口
高效灵活的css选择器
兼容各种主流的浏览器

css中的选择器

有id选择器, 类选择器和标签选择器

jQuery选择器的作用是方便获取html中的dom元素

使用原始方式绑定一个事件

<button onclick="clickMe()">点我</button>

    function clickMe() {
        alert("我被点了")
    }

使用jQuery方式绑定一个事件

首先要引入jquery

如果绑定事件在body标签的前面, 同需要将绑定事件放入ready函数的回调中

如果在body的后面, 则不需要

<script type="text/javascript" src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

        $('Document').ready(function(){
                $('#clickBtn').click(function func() {
                    alert('我被点了2')
                })
        })

jquery查找元素

    <ul>
        <li id="id1">我是文本1</li>
        <li id="id2">我是文本2</li>
        <li id="id3">我是文本3</li>
        <li id="id4">我是文本4</li>
        <li id="id5">我是文本5</li>
    </ul>

    // 第一种方式获取dom元素
    var ul = $("ul")
    var lis = ul.find("li")
    var li = lis.eq(1)
    console.log("1:", li.text())

    // 第二种方式获取dom元素
    console.log("2:", $('ul li:eq(1)').text())

    // 第三种方式获取dom元素
    console.log("3:", $('ul li').eq(1).text())

jquery查找属性

    // 获取元素上的属性, 第一种方式
    var lis = $('ul li')
    var len = lis.length
    var res1 = lis.eq(len-1).attr('id')
    console.log(res1);

    // 获取元素上的属性, 第二种方式
    var res2 = $('ul li:last').attr('id')
    console.log(res2);

jquery添加元素

    // 添加新的元素, 第一种方式
    $('ul').append($("<li id="id6">我是文本6</li>"))

    // 添加新的元素, 第二种方式
    $("<li id=‘id7’>我是文本7</li>").appendTo($('ul'))

    // 替换ul标签下的全部元素, , 第三种方式
    $('ul').html($("<li id=‘id8’>我是文本8</li>"))

链式调用

在对象调用方法之后, 这个方法的返回是还是对象自己, 因此可以继续使用.来调用其它的方法

    // 链式调用
    var myFunction = function() {
        return {
            func0: function() {
                console.log('func0');
                return this
            },
            func1: function() {
                console.log('func1');
                return this
            }
        }
    }
    myFunction().func0().func1()

jquery删除和隐藏元素

remove方法是将元素完全从页面上移除

hide方法是将元素的display属性设置none

show方法是将元素的display属性重新设置为block或才inline

   
    <h2 id="a">我是一个元素</h2>

    // 删除元素
    function removeEle() {
        $("#a").remove();
    }

    // 隐藏元素
    function hideEle() {
        $("#a").hide();
    }
    
    // 显示元素
    function showEle() {
        $("#a").show();
    }

jquery操作属性

attr()方法, 有三种使用方式

一种是传入一个参数, 也就是属性名, 来获得对应的属性值

一种是传入一个参数和一个值, 来设置这个标签的属性

一种是传入一个对象, 来设置这个标签的多个属性

如果要给元素设置多个属性，就需要给attr方法传入一个JavaScript对象，对象里面是键值对的集合，每个键值对的格式为key：value，不同的键值对用逗号分隔

<h2 id="a">我是一个元素</h2>

    // 获取属性
    function getAttr() {
        alert($('#a').attr('id'))
    }

    // 设置属性
    function setAttr() {
        $('#a').attr('id', 'b')
    }

    // 设置多个属性
    function setAttrs() {
        $('#b').attr({
            name: 'shaosiming',
            age: 18
        })
    }

    // 移除某个属性
    function removeAttr() {
        $('#b').removeAttr('name')
    }

jquery的内容操作

html()如果不传入参数则是获取带有标签的文本, 如果传入参数, 则可以将带有标签的文本动态的解析插入到页面中

text()如果不传入参数则是获取不带标签的文本, 如果传入参数, 则可以将文本原封不动的插入到页面中

    function setHtml() {
        $('#a').html("<table border="1px" cellpadding="10px">" + 
                "<tr>>" +
                    "<th>111</th>>" +
                    "<th>222</th>>" +
                    "<th>333</th>>" +
                "</tr>>" +
                "<tr>>" +
                    "<th>444</th>>" +
                    "<th>555</th>>" +
                    "<th>666</th>>" +
                "</tr>>" +
                "<tr>>" +
                    "<th>777</th>>" +
                    "<th>888</th>>" +
                    "<th>999</th>" +
                "</tr>>" +
            "</table>"
        )
    }

    function setText() {
        $('#a').text(    
            "<table border="1px" cellpadding="10px">" + 
                "<tr>>" +
                    "<th>111</th>>" +
                    "<th>222</th>>" +
                    "<th>333</th>>" +
                "</tr>>" +
                "<tr>>" +
                    "<th>444</th>>" +
                    "<th>555</th>>" +
                    "<th>666</th>>" +
                "</tr>>" +
                "<tr>>" +
                    "<th>777</th>>" +
                    "<th>888</th>>" +
                    "<th>999</th>" +
                "</tr>>" +
            "</table>"
        )
    }

    // 获取html文本
    function getHtml() {
        alert($('#a').html());
    }

    // 获取纯文本
    function getText() {
        alert($('#a').text());
    }

jquery操作元素的值

val()如果不传入参数, 则是获取元素的值, 如果传入参数, 则是设置元素的值

    <input type="text" value="please input your name">
    <button onclick="getName()">getName</button>

    <br>

    <select id="fruits" multiple>
        <option value="01">苹果</option>
        <option value="02">香蕉</option>
        <option value="03">西瓜</option>
    </select>

    // 获取input元素的值
    function getName() {
        alert($('input:eq(0)').val())
    }

    // 设置单选select元素的值
    // $('select:eq(0)').val('西瓜')
    // $('select:eq(0)').val('02')

    // 设置多选select元素的值
    $('select:eq(0)').val(['02', '03'])

jquery寻找节点

    <ul id="menu">
        <li>我是第1行</li>
        <li>我是第2行</li>
        <li id="node">我是第3行</li>
        <li>我是第4行</li>
        <li>我是第5行 <span style="background: pink;">我是一个span</span></li>
    </ul>

    // 获取该节点的下一级节点
    function getChildren() {
        console.log($('#menu').children());
        alert($('#menu').children())
    }

    // 获取该节点的孙节点
    function getGrandChildren() {
        var lis = $('#menu').children()
        console.log(lis.last().find('span'));
        alert(lis.last().find("span"))
    }

    // 获取该节点的父节点
    function getParent() {
        var li = $('li:eq(0)')
        console.log(li.parent());
    }

    // 获取该节点的上一个节点和下一个节点
    function getPrevAndNext() {
        var node = $('#node')
        console.log(node.prev());
        console.log(node.next());
    }

    // 获取该节点的兄弟节点
    function getSiblings() {
        var node = $('#node')
        console.log(node.siblings());
    }