第六章-jQuery

jQuery的理念是: 写更少的代码, 完成更多的工作

jQuery有两个版本1.x和2.x, 版本2.x不再支持IE678

jQuery最明显的标志就是$, jQuery把所有的功能都封装在了jQuery变量中, 而$就等同于jQuery变量

可以使用jQuery.noConflict()交出$变量(在最新的3.2.1中已经删除了这个方法)

1 选择器

  jQuery对象 = $(选择器);  

  该jQuery对象类似于数组, 数组中的每个元素是引用了的一个DOM对象

  可以通过 jQuery对象.get(索引) 获得DOM对象, 又可以将DOM对象传给$()返回一个jQuery对象

  

  返回的jQuery对象不会是undefined或者null, 最差也是一个空数组

  查找得到的结果是按照顺序排列

  元素也不会被重复查找

1.1 基本选择器

  1) ID查找

var div = $(‘#abc‘);

  2) tag查找

var ps = $(‘p‘); // 返回所有<p>节点
ps.length; // 数一数页面有多少个<p>节点

  3) class查找

var a = $(‘.red‘); // 所有节点包含`class="red"`都将返回

  4) 属性查找

  其中属性可以不加引号, 但是有空格等特殊字符时, 需要加上

var email = $(‘[name=email]‘); // 找出<??? name="email">
var passwordInput = $(‘[type=password]‘); // 找出<??? type="password">
var a = $(‘[items="A B"]‘); // 找出<??? items="A B">

  还可以使用前缀或者后缀查找

var icons = $(‘[name^=icon]‘); // 找出所有name属性值以icon开头的DOM
var names = $(‘[name$=with]‘); // 找出所有name属性值以with结尾的DOM

  5) 组合查找

var emailInput = $(‘input[name=email]‘); // 不会找出<div name="email">
var tr = $(‘tr.red‘); // 找出<tr class="red ...">...</tr>

  6) 多项查找

$(‘p,div‘); // 把<p>和<div>都选出来
$(‘p.red,p.green‘); // 把<p class="red">和<p class="green">都选出来

1.2 层级选择器

  基本的层级选择器是用空格表示层级关系, (逗号表示多项查找)

$(‘form.test p input‘); // 在class为test的form表单中选择被<p>包含的<input>

  子选择器

  限定关系必须是父子关系

$(‘div.main>p#test‘); //选择class为main的div的子节点中id为test的p标签

  过滤器

  限定选择到的内容

  

  还有一些关于表单的过滤器

:input:可以选择<input>,<textarea>,<select>和<button>;

:file:可以选择<input type="file">,和input[type=file]一样;

:checkbox:可以选择复选框,和input[type=checkbox]一样;

:radio:可以选择单选框,和input[type=radio]一样;

:focus:可以选择当前输入焦点的元素,例如把光标放到一个<input>上,用$(‘input:focus‘)就可以选出;

:checked:选择当前勾上的单选框和复选框,用这个选择器可以立刻获得用户选择的项目,如$(‘input[type=radio]:checked‘);

:enabled:可以选择可以正常输入的<input>、<select> 等,也就是没有灰掉的输入;

:disabled:和:enabled正好相反,选择那些不能输入的。

:visible : 选择可见的标签

:hidden : 选择隐藏的标签

1.3 查找过滤

  使用find(选择器)来在子节点中查找

  使用parent()获得父节点, next()获得下一个节点, prev()获得上一个节点, 其中next和prev还可以使用选择器

  使用filter()过滤节点, 其中可以传入选择器, 也可以传入一个函数, 内含this指定为调用对象中的每个元素

  使用map()可以用于处理得到的jQuery对象, 里面传入一个函数进行处理

  使用first(), last(),slice(), 获得第一个, 最后一个, 和切片获取, 其中切片获取规则与python切片类似

  具体使用如下:

  对于HTML

<ul class="lang">
    <li class="js dy">JavaScript</li>
    <li class="dy">Python</li>
    <li id="swift">Swift</li>
    <li class="dy">Scheme</li>
    <li name="haskell">Haskell</li>
</ul>

  有以下操作

var ul = $(‘ul.lang‘); // 获得<ul>
var dy = ul.find(‘.dy‘); // 获得JavaScript, Python, Scheme
var swf = ul.find(‘#swift‘); // 获得Swift
var hsk = ul.find(‘[name=haskell]‘); // 获得Haskell

var swift= $(‘#swift‘); // 获得Swift
var parent = swift.parent(); // 获得Swift的上层节点<ul>
var a = swift.parent(‘div.red‘); // 从Swift的父节点开始向上查找,直到找到某个符合条件的节点并返回

swift.next(); // Scheme
swift.next(‘[name=haskell]‘); // Haskell,因为Haskell是后续第一个符合选择器条件的节点
swift.prev(); // Python
swift.prev(‘.js‘); // JavaScript,因为JavaScript是往前第一个符合选择器条件的节点

var langs = $(‘ul.lang li‘); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var a = langs.filter(‘.dy‘); // 拿到JavaScript, Python, Scheme

var langs = $(‘ul.lang li‘); // 拿到JavaScript, Python, Swift, Scheme和Haskell
langs.filter(function () {
    return this.innerHTML.indexOf(‘S‘) === 0; // 返回S开头的节点
}); // 拿到Swift, Scheme

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‘]

var langs = $(‘ul.lang li‘); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var js = langs.first(); // JavaScript,相当于$(‘ul.lang li:first-child‘)
var haskell = langs.last(); // Haskell, 相当于$(‘ul.lang li:last-child‘)
var sub = langs.slice(2, 4); // Swift, Scheme, 参数和数组的slice()方法一致

2 操作DOM

  1) 获取和设置节点文本或者HTML文本采用text()html()

  如果不传入参数, 那么就是获取值; 如果需要设置, 那么就将设置的值传入参数

  

  2) 修改css样式直接使用css(样式名, 样式值), 多个css可以使用链式写法

  3) 操作class属性可以使用hasClass(), addClass(), removeClass()

  4) 显示和隐藏元素可以直接使用show()和hide(), 隐藏后原标签的位置会被别的占领

  5) 获取DOM信息

// 浏览器可视窗口大小:
$(window).width(); // 800
$(window).height(); // 600

// HTML文档大小:
$(document).width(); // 800
$(document).height(); // 3500

  6) 设置和删除元素的属性  

// <div id="test-div" name="Test" start="1">...</div>
var div = $(‘#test-div‘);
div.attr(‘data‘); // undefined, 属性不存在
div.attr(‘name‘); // ‘Test‘
div.attr(‘name‘, ‘Hello‘); // div的name属性变为‘Hello‘
div.removeAttr(‘name‘); // 删除name属性
div.attr(‘name‘); // undefined

  关于radio选择

// <input id="test-radio" type="radio" name="test" checked value="1">

var radio = $(‘#test-radio‘);
radio.attr(‘checked‘); // ‘checked‘
radio.prop(‘checked‘); // true
radio.is(‘:checked‘); // true

  类似的is还可以判断:selected, 一般也是使用is而不是prop更不是attr

  7) 关于表单

  可以使用val()来获取和设置值  

input.val(); // ‘test‘
input.val(‘[email protected]‘); // 文本框的内容已变为[email protected]

  8) 添加节点

  使用append或者是prepend()

  可以传入jQuery对象, DOM对象, 或者是一个函数 

// 创建DOM对象:
var ps = document.createElement(‘li‘);
ps.innerHTML = ‘<span>Pascal</span>‘;
// 添加DOM对象:
ul.append(ps);

// 添加jQuery对象:
ul.append($(‘#scheme‘));

// 添加函数对象:
ul.append(function (index, html) {
    return ‘<li><span>Language - ‘ + index + ‘</span></li>‘;
});

  当然也可以使用after()和before在某个节点之后或者之前添加一个元素

  9) 删除节点

  节点.remove() 就可以直接删除  

3 事件

  1) 绑定事件

jQuery对象.on("事件名", 执行函数);
jQuery对象.事件名(执行函数);

  2) 解绑事件

jQuery对象.off("事件名", 指定解绑的函数)

  一般地, 绑定事件的时候都是生成的匿名函数, 所以在解绑的时候是无法指定该解绑的函数的, 因此一般解绑都是省略第二个参数, 直接解绑所有该类型的事件

  3) 事件触发条件

  一般地, 事件触发的原则是用户自己触发, 对于文本框, 如果设置change事件, 当用JS代码去改变它的值的时候, 是不会触发change时间的

  代码触发事件的方式

jQuery对象.trigger("事件名");
// 可以简写为
jQuery对象.事件名();

  4) 浏览器安全限制

  同样有的代码必须要用户才能执行, 例如window.open(), 直接是无法执行的, 一般的解决办法是把这个代码方法点击事件的相应函数里面

  由于点击事件是用户触发的, 所以此时触发的函数内的window.open()可以被执行  

  5) 事件的分类

  事件分为鼠标事件, 键盘事件, 其他事件

鼠标事件有:
click: 鼠标单击时触发;
dblclick:鼠标双击时触发;
mouseenter:鼠标进入时触发;
mouseleave:鼠标移出时触发;
mousemove:鼠标在DOM内部移动时触发;
hover:鼠标进入和退出时触发两个函数,相当于mouseenter加上mouseleave

键盘事件有:
keydown:键盘按下时触发;
keyup:键盘松开时触发;
keypress:按一次键后触发

其他事件有:
focus:当DOM获得焦点时触发;
blur:当DOM失去焦点时触发;
change:当<input>、<select>或<textarea>的内容改变时触发;
submit:当<form>提交时触发;
ready:当页面被载入并且DOM树完成初始化后触发, 且只触发一次, ready仅作用于document对象

  其中由于ready事件十分的常用, 一般的写法是

$(document).ready(function () {
    函数体;
});

  可以简写为

$(function () {
    函数体;
});

  这个简写可以反复绑定事件处理函数(可以出现多个这个简写形式), 它们会一次执行

  关于mousemove和keypress等函数需要获取鼠标位置按键位置等值, 所以在绑定方法的参数中可以设置一个变量e获取Event对象

$(function () {
    $(‘#testMouseMoveDiv‘).mousemove(function (e) {
        $(‘#testMouseMoveSpan‘).text(‘pageX = ‘ + e.pageX + ‘, pageY = ‘ + e.pageY);
    });
});

4 AJAX

  使用JavaScript来书写AJAX的时候需要判断浏览器的类型, 还需要判断状态和错误, 写起来十分不方便    

  在jQuery中绑定了一个专门用于处理的ajax()函数

$.ajax(url, settings);

  其中settings是一个对象, 常用的属性有:  

async:是否异步执行AJAX请求,默认为true,千万不要指定为false;

method:发送的Method,缺省为‘GET‘,可指定为‘POST‘、‘PUT‘等;

contentType:发送POST请求的格式,默认值为‘application/x-www-form-urlencoded; charset=UTF-8‘,也可以指定为text/plain、application/json;

data:发送的数据,可以是字符串、数组或object。如果是GET请求,data将被转换成query附加到URL上,如果是POST请求,根据contentType把data序列化成合适的格式;

headers:发送的额外的HTTP头,必须是一个object;

dataType:接收的数据格式,可以指定为‘html‘、‘xml‘、‘json‘、‘text‘等,缺省情况下根据响应的Content-Type猜测。

  同时使用ajax()得到的对象其实也是一个Promise对象, 因此可以在后面加上done(), fail()和always()函数用于回调完成时, 错误时, 任何情况都要执行的函数

  针对常见的请求方法, jQuery封装了ajax的常用请求方式

  1) get  

var jqxhr = $.get(‘/path/to/resource‘, {
    name: ‘Bob Lee‘,
    check: 1
});

  由于第二个参数是一个对象, 表示需要附带参数, 因此此时请求的地址就变为了

/path/to/resource?name=Bob%20Lee&check=1

  这样可以省去构造请求地址

  2) post

  与get类似, 不过第二个参数会被序列化为application/x-www-form-urlencoded

  实际的内容也会被当做post的body被发送

var jqxhr = $.post(‘/path/to/resource‘, {
    name: ‘Bob Lee‘,
    check: 1
});

  3) getJSON

var jqxhr = $.getJSON(‘/path/to/resource‘, {
    name: ‘Bob Lee‘,
    check: 1
}).done(function (data) {
    // data已经被解析为JSON对象了
});

5 扩展jQuery

  可以通过扩展jQuery来实现一些自定义的方法来满足不同的需求

  扩展的方式是给 $.fn 绑定

  一般地

    绑定的方法内可以使用this变量, 表示当前的jQuery对象, 这就保证了之后可以直接是用$().自定义函数()  

    绑定的方法一般会 return this; 这样才能保证链式写法的正常运行 

    插件函数要有默认值, 设置在$.fn.插件函数名.defaults

    还需要接受参数, 以便覆盖原有的默认值

  设置高亮的插件函数实例为

// 设定默认值:
$.fn.highlight.defaults = {
    color: ‘#d85030‘,
    backgroundColor: ‘#fff8de‘
}

// 设置高亮函数
$.fn.highlight = function (options) {
    // 合并默认值和用户设定值:
    var opts = $.extend({}, $.fn.highlight.defaults, options);
    this.css(‘backgroundColor‘, opts.backgroundColor).css(‘color‘, opts.color);
    return this;
}

  给a标签加上判定是否需要跳转

$.fn.external = function () {
    // return返回的each()返回结果,支持链式调用:
    return this.filter(‘a‘).each(function () {
        // 注意: each()内部的回调函数的this绑定为DOM本身!
        var a = $(this);
        var url = a.attr(‘href‘);
        if (url && (url.indexOf(‘http://‘)===0 || url.indexOf(‘https://‘)===0)) {
            a.attr(‘href‘, ‘#0‘)
             .removeAttr(‘target‘)
             .append(‘ <i class="uk-icon-external-link"></i>‘)
             .click(function () {
                if(confirm(‘你确定要前往‘ + url + ‘?‘)) {
                    window.open(url);
                }
            });
        }
    });
}

  

  

时间: 2024-10-22 11:37:31

第六章-jQuery的相关文章

锋利jQuery 学习整理之 第六章 jQuery 与Ajax 的应用

1.Ajax 的XMLHttpRequest 对象 XMLHttpRequest 是Ajax 的核心,它是Ajax 实现的关键---发送异步请求.接受响应及执行回调都是通过它来完成的.XMLHttpRequest最早是在Microsoft Internet Explorer  5.0  ActiveX 组件中被引用的. 2.JQuery 中的Ajax jQuery 对Ajax 进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第二层是load().$.load()和$.post(

第六章 jQuery操作表单

1.单行文本框的应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

使用jQuery快速高效制作网页交互特效——06 第六章 jQuery选择器

1.jQuery选择器:jQuery选择器类似于CSS选择器,用来选取网页中的元素.       Eg:$("h3").css("background","#09F");            分析:  获取并设置网页中所有<h3>元素的背景   "h3"为选择器语法,必须放在$()中    $("h3")返回jQuery对象           .css()是为jQuery对象设置样式的方法

Ajax本地跨域问题 Cross origin requests are only supported for HTTP(针对jQuery基础教程第四版第六章)

出现的问题: 解决的步骤: 谷歌浏览器出现的效果: 针对jQuery基础教程(第四版),第六章  成功: 原文地址:https://www.cnblogs.com/qinghui258/p/8432569.html

锋利的jQuery第5章 jQuery对表单、表格的操作及更过应用

1,button和checkbox的例子: form表单 <form action=""> 你爱的远动有?<br /> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="蓝球" />

读《编写可维护的JavaScript》第六章总结

第六章 避免使用全局变量 JavaScript执行环境在很多方面都有其独特之处,全局变量就是其中之一.“全局变量”是一个神秘的对象,它表示了脚本的最外层上下文. 在浏览器中,windows对象往往重载并等同于全局对象,因此任何在全局作用域声明的变量和函数都是windows对象的属性. 6.1 全局变量带来的问题 这个就不用照着书详谈了,当我们进入团队合作编写代码时,若大家自定义的变量都是直接挂载在windows对象上(也就是全局变量),很容易发生命名冲突.像这样: function sayCol

第六章SignalR的服务器广播

第六章SignalR的服务器广播 1.概述: VS可以通过 Microsoft.AspNet.SignalR.Sample NuGet包来安装一个简单的模拟股票行情应用.在本教程的第一部分,您将从头开始创建一个应用程序的简化版本.在本教程的剩余部分,您将安装NuGet包,审阅Sample中的一些附加功能. 在本模拟股票行情应用代表了实时应用中的"推" ,或称之为广播,即我们将消息通知传播给所有已连接的客户端. 首先,您将要创建该应用程序的显示表格用于显示股票数据. 接下来,服务器会随机

数据库系统实现 第六章 查询执行

第六章 查询执行 查询执行也就是操作数据库的算法 一次查询的过程: 查询-->查询编译(第七章)-->查询执行(第六章)-->数据 查询编译预览 查询编译可以分为三个步骤: a)分析:构造分析树,用来表达查询和它的结构 b)查询重写,分析树被转化为初始查询计划,通常是代数表达式,之后初始的查询计划会被优化为一个时间更小的计划 c)物理计划生成,将查询计划转化成物理的计划, 为了选择更好的查询计划,需要判断 1)查询哪一个代数的等价形式是最有效的 2)对选中形式的每一个操作,所使用的算法选

第六章:异常机制

第六章:异常机制 异常的定义 异常:在程序运行过程中出现的意外事件,导致程序中断执行. 异常处理 try...catch 语法:try{ //可能出现异常的代码}catch(异常类型 异常对象名){ //处理异常的代码:}执行过程:当try中的代码异常发生时抛出一个异常对象,该异常对象与catch中异常类型进行匹配,匹配成功进入catch块,否则不执行catch中代码(相当于异常未被处理).程序只有当异常处理成功后才能继续执行. try...catch...catch 语法:try{ //可能出