JavaScript（十四）jQuery

21，jQuery

​ Write Less, Do More

21.1，导入jQuery

下载JS文件，再导入

有compressed（已压缩）和uncompressed（未压缩）两种版本，使用时完全一样。

直接引用网上的JS

//下载后放在项目文件中，再调用
    <script src="jQuery.js"></script>
    //调用现成的cdn
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

21.2，选择器

用法： $(‘css选择器’)

一句话：css里选择器咋么样，这里就咋么样，简单粗暴，突然感觉原生js白学了.jpg

关于css选择器咋么样，参考我之前的博客就行，这里就直接写例子了

<!-- HTML结构 -->
<div id="test-jquery">
   <p id="para-1" class="color-red">JavaScript</p>
   <p id="para-2" class="color-green">Haskell</p>
   <p class="color-red color-green">Erlang</p>
   <p name="name" class="color-black">Python</p>
   <form class="test-form" target="_blank" action="#0" onsubmit="return false;">
       <legend>注册新用户</legend>
       <fieldset>
           <p><label>名字: <input name="name"></label></p>
           <p><label>邮件: <input name="email"></label></p>
           <p><label>口令: <input name="password" type="password"></label></p>
           <p><button type="submit">注册</button></p>
       </fieldset>
   </form>
</div>

    //1.仅选择JavaScript
    //ID选择器
    var JavaScript =$('#para-1');
    //2.仅选择Erlang
    //class选择器(复合类，注意两个类中间不能加空格！！)
    var Erlang=$('.color-red.color-green');
    //3.选择JavaScript和Erlang
    //多项选择器，多个选择器用,组合起来一块选：
    var both1=$('p.color-red,p.color-green.color-red');
    //4.选择所有编程语言
    //后代选择器,这里注意>表示的单单指div的下一子代
     var codes=$('div>p');
     //5.选择名字input
    //属性选择器符合类选择器
    var names =$('input[name=name]');
    //6.选择邮件和名字input
    //属性选择器+多项选择器
    var both2=$('input[name=name],input[name=email]');

过滤器

$('ul.lang li:first-child'); // 仅选出JavaScript
$('ul.lang li:last-child'); // 仅选出Lua
$('ul.lang li:nth-child(2)'); // 选出第N个元素，N从1开始
$('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
$('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素

表单相关的特殊选择器

名称	作用
:input	选择所有的input标签
:file	选择所有的file标签
:checkbox	选择所有的checkbox
:focus	选择当前输入焦点的标签
:checked	选择当前勾上的单选框和复选框
:enable	选择可以正常输入的标签
:disable	与enable相反，选择不能输入的

基于已获得的标签进行查找

find();//查找当前标签的子代
parent();//查找当前标签的父亲，括号里填过滤条件
next();//查找同一层级的下一个节点
prev();//查找同一层级的下一个节点

对已获得的结果进行过滤

filter();//括号里填过滤条件，或者过滤函数
var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
langs.filter(function () {
    return this.innerHTML.indexOf('S') === 0; // 返回S开头的节点
}); // 拿到Swift, Scheme
map();
//方法把一个jQuery对象包含的若干DOM节点转化为其他对象：
var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var arr = langs.map(function () {
    return this.innerHTML;
}).get(); // 用get()拿到包含string的Array：['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']

这里注意一个点，假如没有查询到对象，会返回一个[]，而不会是不存在或null

21.3，操作DOM

语法：$(‘selector’).action();

text() html()

操作jQuery对象的文本属性或原始HTML文本属性

JavaScript.text();//无参数调用是获取text
JavaScript.text("Set Text")//有参数调用是设置参数
//一个jQuery对象可能包括多个Dom节点，因此对一个jquery的修改会改变所有的Dom节点

css

通过调用jQuery对象的css() 方法，可以以键值对的形式，快速修改样式

both2.css('background');//获取css属性
both2.css('background','#FF0000');//设置css属性
both2.css('background','');//清空css样式

显示和隐藏

a.hide(); // 隐藏
a.show(); // 显示

表单操作

对于表单元素，jQuery对象统一提供val()方法获取和设置对应的value属性：

jQuery对象的所有方法都返回一个jQuery对象（可能是新的也可能是自身），这样我们可以进行链式调用，非常方便。(jQuery真香！)

21.4，增删Dom节点

添加DOM：

append();//在最后面添加一个节点
prepend();//在最前面添加一个节点
after();//在当前节点的后面添加
before();//在当前节点的前面添加

删除Dom:

remove();//删除当前节点

21.5，事件

on方法用来绑定一个事件，我们需要传入事件名称和对应的处理函数。

a.click(function () {
    alert('Hello!');
});

鼠标事件

• click: 鼠标单击时触发；
• dblclick：鼠标双击时触发；
• mouseenter：鼠标进入时触发；
• mouseleave：鼠标移出时触发；
• mousemove：鼠标在DOM内部移动时触发；
• hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。

键盘事件

键盘事件仅作用在当前焦点的DOM上，通常是和。

• keydown：键盘按下时触发；
• keyup：键盘松开时触发；
• keypress：按一次键后触发。

其他事件

• focus：当DOM获得焦点时触发；

• blur：当DOM失去焦点时触发；

• change：当、或``的内容改变时触发；

• submit：当``提交时触发；

• ready：当页面被载入并且DOM树完成初始化后触发。

  • $(function () {
        // init...
    });
    //上面的这种写法最为常见。如果你遇到$(function () {...})的形式，牢记这是document对象的ready//事件处理函数。
    

• 完全可以反复绑定事件处理函数，它们会依次执行：

取消绑定

一个已被绑定的事件可以解除绑定，通过off('click', function)实现：

function hello() {
    alert('hello!');
}

a.click(hello); // 绑定事件

// 10秒钟后解除绑定:
setTimeout(function () {
    a.off('click', hello);
}, 10000);

这里需要注意一个点：想要解除已绑定的函数，传入的参数，必须和绑定时的参数时同一个对象

事件触发条件

当用户在文本框中输入时，就会触发change事件。但是，如果用JavaScript代码去改动文本框的值，将不会触发change事件,这里我们可以调用无参数的change();进行代码的事件触发