jQuery的基本使用

jQuery是什么？能干什么？

jQuery是一款开源免费的JS 框架，对JS进一步封装
没有改进语法，只是让我们开发者，在操作页面元素、给页面元素绑定事件、发送AJAX请求等方面，代码可以写得更简洁一些

jQuery版本介绍

jQuery1.x：经典版本，兼容 IE6、7、8。
jQuery2.0：改进版本，后续版本将不再支持 IE6、7、8浏览器

jQuery的基本使用

jQuery对象与Dom对象之间的转换

<button id="btn">按钮</button>

// $与jQuery变量作用一致
console.log($ === jQuery);//true

// Dom对象
let btn = document.getElementById("btn");
console.log(btn);

// jQuery对象
let $btn = $("#btn");
console.log($btn);

// Dom对象转换为jQuery对象
console.log($(btn));

// jQuery对象转换为Dom对象
console.log($btn.get(0));

jQuery的常用方法

<h1 id="h1">做人<i>要低调</i></h1>

<input type="text" id="username" value="wolfcode"/><br/><br/>
<div>
    jQuery 常用方法:<br/>
    jQuery对象.size(); // 获取 jQuery 中包含元素的个数<br/>
    jQuery对象.val(); // 操作元素的 value 属性<br/>
    jQuery对象.html(); // 操作元素内的 HTML 代码<br/>
    jQuery对象.text(); // 操作元素内的文本，忽略 HTML 标签<br/>
    jQuery对象.css(); // 操作元素的 style 属性
</div>

<hr/>

<div>
    <p>
        问题 1：获取 jQuery 中包含 DOM 的个数，比如获取页面上 p 元素的个数
    </p>
    <p>
        问题 2：获取 id 为 username 元素的 value 属性值
    </p>
    <p>
        问题 3：设置 id 为 username 元素的 value 属性值为"叩丁狼教育"
    </p>
    <p>
        问题 4：对比 h1 元素的内容和纯文本的区别
    </p>
    <p>
        问题 5：把 h1 元素内容的颜色改为黄色
    </p>
</div>

//问题 1：获取 jQuery 中包含 DOM 的个数，比如获取页面上 p 元素的个数
console.log($("p").size());

//问题 2：获取 id 为 username 元素的 value 属性值
console.log($("#username").val());

//问题 3：设置 id 为 username 元素的 value 属性值为"禹王穆好帅"
$("#username").val("禹王穆好帅");

//问题 4：对比 h1 元素的内容和纯文本的区别
console.log($("h1").html());
console.log($("h1").text());

//问题 5：把 h1 元素内容的颜色改为黄色
$("#h1").css("color", "yellow");

jQuery的常用选择器

<div id="msg">使用 ID 选择器获取当前 DIV元素</div>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>
<ul id="myul">
    <li>item1</li>
    <li class="selected">item2</li>
    <li>item3</li>
    <li class="selected">item4</li>
</ul>
<hr/>
<div>
    <p>
        问题 1：获取 id 为 msg 的元素的内容
    </p>
    <p>
        问题 2：获取所有的 li 元素并打印数量
    </p>
    <p>
        问题 3：获取所有 class 为 selected 的元素，字体颜色改为 red
    </p>
</div>

// 问题 1：获取 id 为 msg 的元素的内容
console.log($("#msg").text());

// 问题 2：获取所有的 li 元素并打印数量
console.log($("li").size());

// 问题 3：获取所有 class 为 selected 的元素，字体颜色改为 red
$(".selected").css("color", "red");

jQuery的层次选择器

<ul id="myul">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>
        <ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
        </ul>
    </li>
</ul>
<label>LABEL1</label>
<input type="text" value="text1"/>
<input type="text" value="text2"/>
<br/>
<label>LABEL2</label>
<input type="text" value="text3"/>
<input type="text" value="text4"/>
<br/>
<label>
    LABEL3
    <input type="text" value="text5"/>
    <input type="text" value="text6"/>
</label>
<hr/>
<div>
    <p>
        问题 1：获取所有 ul 下的所有 li 元素，并打印分析结果
    </p>
    <p>
        问题 2：获取 id 为 myul 下的所有子 li 元素，并打印分析结果
    </p>
    <p>
        问题 3：获取所有 label 元素后的 input 元素，并打印分析结果
    </p>
    <p>
        问题 4：获取紧跟着 label 元素后的 input 元素，并打印分析结果
    </p>
</div>

// 问题 1：获取所有 ul 下的所有 li 元素，并打印分析结果
console.log($("ul li"));

// 问题 2：获取 id 为 myul 下的所有子 li 元素，并打印分析结果
console.log($("#myul > li"));

// 问题 3：获取所有 label 元素后的 input 元素，并打印分析结果
console.log($("label ~ input"));

// 问题 4：获取紧跟着 label 元素后的 input 元素，并打印分析结果
console.log($("label + input"));

jQuery的过滤选择器

<input type="hidden" name="id" value="1">
<select>
    <option value="1">Flowers</option>
    <option value="2" selected>Gardens</option>
    <option value="3">Trees</option>
</select>
<hr/>
<div>
    <p>
        问题 1：获取隐藏 input 的 value 属性值, 不能使用根据元素名, 也不能通过给元素加
        id 属性，再通过 id 选择器找
    </p>
    <p>
        问题 2：获取选中的 option
    </p>
</div>

// 问题 1：获取隐藏 input 的 value 属性值, 不能使用根据元素名, 也不能通过给元素加id 属性，再通过 id 选择器找
console.log($("input[type=hidden]").val());

// 问题 2：获取选中的 option
console.log($("option:selected").text());

jQuery事件绑定

<button id="btn1">btn1</button>

$("#btn1").click(function () {
    // this是Dom对象
    console.log(this);

    // 转换为jQuery对象
    console.log($(this));
});

jQueryDOM操作

<span style="background-color : blue;color: red;" id="span">SPAN</span>
<div id="div1" style="background-color: gray;">DIV1</div>
<div id="div2" style="background-color: green;">DIV2</div>

<ul id="ul">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>

<input id="btn" type="button" value="删除我"/>

<form>
    <fieldset>
        <legend>内部插入节点(插入子节点)</legend>
        <input type="button" value="append" id="append"/>
    </fieldset>
</form>

<form>
    <fieldset>
        <legend>外部插入节点(插入兄弟节点)</legend>
        <input type="button" value="after" id="after"/>
    </fieldset>
</form>

<form>
    <fieldset>
        <legend>删除节点</legend>
        <input type="button" value="删除所有子节点" id="empty"/>
        <input type="button" value="删除节点" id="remove"/>
        <input type="button" value="恢复节点" id="resume"/>
    </fieldset>
</form>

//父亲加小儿子
$("#append").click(function () {
    $("#div1").append($("#span"));
});

//哥哥加弟弟
$("#after").click(function () {
    $("#div2").after($("#div1"));
});

//清空所有节点
$("#empty").click(function () {
    $("#ul").empty();
});

//删除自己 detach
$("#btn").click(function () {
    console.log("我被删除了...");
});

let $btn;
//删除节点
$("#remove").click(function () {
    //$btn = $("#btn").remove();
    $btn = $("#btn").detach();
});

//恢复节点
$("#resume").click(function () {
    $("#ul").after($btn);
});

jQuery属性操作

.other {
    background-color: orange;
    font-size: 20px;
}
.myBtn{
    background-color: red;
}

<input id="btn" type="button" value="点我"/>
<form>
    <fieldset>
        <legend>属性操作</legend>
        <input type="button" value="获取属性值" id="getAttr"/>
        <input type="button" value="设置属性值" id="setAttr"/>
    </fieldset>
</form>
<form>
    <fieldset>
        <legend>CSS 操作</legend>
        <input type="button" value="添加CSS" id="addClass"/>
        <input type="button" value="删除CSS" id="removeClass"/>
        <input type="button" value="轮换CSS" id="toggleClass"/>
        <input type="button" value="判断CSS" id="hasClass"/>
    </fieldset>
</form>
<input type="checkbox" value="1" checked name="gender" id="gender" dataoption='{"name" : "蒋干"}' style="color: red; background: aqua" class="myBtn other" > 男

// 获取属性值
$("[id=getAttr]").click(function () {
    console.log($("legend").val());
});

// 设置属性值
$("[id=setAttr]").click(function () {
    $("legend").val("禹王穆专属");
});

// 添加CSS
$("#addClass").click(function () {
    $("legend").addClass("other");
});

// 删除CSS
$("#removeClass").click(function () {
    $("legend").removeClass("other");
});

// 轮换CSS
$("#toggleClass").click(function () {
    $("legend").toggleClass("myBtn");
});

// 判断CSS
$("#hasClass").click(function () {
    console.log($("legend").hasClass("myBtn"));
});

jQuery的基本使用

jQuery是什么？能干什么？

jQuery版本介绍

jQuery的基本使用

推荐阅读更多精彩内容