jQuery(一)

jquery

jquery为一种库,属于最基础的一个库,伴随着h5的到来,很多jquery的规则直接融入到了规则本身了,直接使用原生的js也能达到相同的目的。虽然如此,不过依旧要继续。

jquery介绍

官网:https://jquery.com/

github: https://github.com/jquery/jquery

blog:https://blog.jquery.com/

学习中心:https://learn.jquery.com/ 推荐使用学习中心学习jquery

文档:https://api.jquery.com/ 推荐使用文档进行相关的查询

封装jquery插件 http://plugins.jquery.com/ 官网推荐使用npm包的方式,带上jquery-plugin

相关插件:npm包 https://www.npmjs.com/search?q=keywords:jquery-plugin jquery 官方插件 http://plugins.jquery.com/ 不过目前处于不更新的状态,不推荐使用内部的插件,因为很可能没有作者维护了。并且已经处于自读的方式,不推荐使用,推荐使用npm的方式,使用jquery的相关插件

jquery官方推荐图书 https://www.packtpub.com/web-development/learning-jquery-fourth-edition

https://www.manning.com/books/jquery-in-action-third-edition

https://www.syncfusion.com/ebooks/jquery

一本都看不懂。。。

js基金会 https://js.foundation/ 是滴,js也拥有基金会了,和linux一样

目前js基金会下属项目 https://js.foundation/community/projects

好啦,有点小乱。大概也就这些了。

其中jquery的最出色的地方在于对元素的选择。

jQuery Mobile 介绍

jquery mobile 属于移动端的js库

ps 移动端的兼容问题,没有客户端的兼容问题的严重

官网 https://jquerymobile.com/

文档 https://api.jquerymobile.com/

ps 该项目博客保留在2017年,提交截止在去年,测试状态不通过 https://travis-ci.org/jquery/jquery-mobile/builds/313129853?utm_source=github_status&utm_medium=notification

╮(╯▽╰)╭

下载jquery

打开 https://jquery.com/download/

在开发和调试的时候使用未压缩的文件,在上线的时候使用压缩的文件,节省空间。

使用npm安装

npm install --save jquery 

上方将会保存在依赖项中

将会在

node_modules/jquery/dist/

中找到生产环境的版本和开发版本

使用bower

bower一个类似于npm的包管理

bower install jquery

将会在

bower_components/jquery/dist/

中找到生产环节版本和开发版本

关于测试

浏览器的兼容测试,在微软提供的在线测试进行测试

https://developer.microsoft.com/en-us/microsoft-edge/

以及chrome官方提供的https://developers.google.com/web/tools/lighthouse/?hl=zh-cn

谷歌web开发者 https://developers.google.com/web/ 里面有很多新奇好玩的东东

关于CDN

由于是国内的缘故,境外的源无法使用,所以使用国内的缓存服务

由bootcdn提供的jquery

https://www.bootcdn.cn/jquery/

这个使用比较多

由百度云CDN提供

貌似已经不同步了。

又拍云提供

http://jscdn.upai.com/

同样版本也不同步了

七牛云提供

http://www.staticfile.org/

同样版本稳定在2.0

谷歌

因为某些缘故,无法使用

https://developers.google.com/speed/libraries/

总结

唯一一个能用的只有bootcdn了。无奈。

很无奈,不可控的服务,唉

jquery基础

jquery定义了一个全局函数,由于使用频繁定义了一个别名即

$

其中$和jQuery()为相同的。

如果在自己代码中使用$作为变量,为了避免冲突,通过调用 jQuery.noConflict()

释放$变量,让其指向原始值

其拥有两个名字的全局方法为jquery的核心查询方法。

var divs = $('div');

获得全部元素

由于需要引入库,在本地写及其的不方便,如果学习直接在线书写 http://jsfiddle.net/ 即可 或者 https://codepen.io 即可 下面使用http://jsfiddle.net/

页面引入jquery

https://cdn.bootcss.com/jquery/3.3.1/jquery.js

书写获得全部div

<script async src="//jsfiddle.net/melovemingming/3uw4y5tz/8/embed/"></script>

var divs = $('div');

或者

var divs = jQuery('div')

其中

$ 和 jQuery 

等价

其中Jquery为工厂函数,将会返回一个新创建的对象。

栗子

找到所有拥有details类的p元素,将其高亮显示,

$('p.datails').css('background-color', 'yellow')

jQuery()函数

在Jquery中为最终要的为Jquery()方法,即$

选择的方式

第一种

传递css选择器(字符串)给$()方法。通过这种方法调用,$()会返回当前文档中匹配该选择器的元素集。

第二种

传递一个Element,Document或Window对象给$()方法,$()将会将其封装成对象并返回。即,可以通过这种方式完成通过Jquery方法操作元素,而不使用原生DOM的方法。

$(document) 或 $(this)

使用这种方法可以完成对节点的操作

第三种

传递字符串文本给$()方法,jQuery将会根据传入的文本创建好HTML元素,然后将其封装为jQuery对象返回。

ps 在这种情况下,不能使用纯文本,因为jQuery会将纯文本当成选择器解析。必须为html标签,还需有一个尖角括号

通过这种方式调用,将会接受第二可选参数,传递Document对象指定与所创建元素相关联的文档。

var img = $('<img/>', 
		{
			src:url,	// 创建一个属性,该属性为src
			css: { borderWidth:5 },	// 创建css样式
			click: handleClick	// 创建事件处理程序
		}
	);

将会返回一个jquery对象

第四种

传入一个函数给$()方法。此时当文档加载完毕并且DOM可操作时,传入的函数将会被调用。

jQuery(
    () => {}
)

上方当文档加载完毕的时候将会执行一个匿名函数

一些术语

函数

jQuery函数可以创建jQuery对象,用来注册DOM就绪时需要调用的处理程序。即全局jQuery对象

对象

jQuery对象有jQuery函数返回的对象,一个jQuery对象表示一组文档元素,即jQuery集,包装集,jQuery结果

选中元素

传递css选择器给jQuery函数时,将会返回jQuery对象表示匹配该选择器的文档元素集。

jQuery函数

hQuery函数为定义在jQuery命名空间中的函数,或者静态方法

jQuery方法

jQuery方法是由jQuery函数返回的jQuery对象的方法。

查询与查询结果

$()返回值为一个jQuery对象,jQuery对象为类数组。

$('body').length;   // 将会返回文档中该元素的数量,从1开始
$('body')[0];   // 等同于 document.body

同样的,size替代length属性,get()替代方括号索引,用toArray方法将jQuery对象转为真实数组

var bodyscript = $('script', document.body);
bodyscript.selector;	// 创建对象时的选择器字符串,即script
bodyscript.context;	// 上下文对象 即body、
bodyscript.jquery; // 版本号

each()

each()类似于原生的for循环

// 下方将会获取所有的dvi元素,并将其打印出来
$('div').each(
		(idx) => {
			console.log(this);
		}
	);

类似于原生的forEach()方法,直接使用this关键字指代其遍历到的对象。

ps map()方法和原生的map一致。(由于时间问题,规定吸取了jquery的一部分),都为将对象的属性每次传入回调函数

一个栗子

$('div').each(() => {	// 选择div元素
	if ($(this).is(':hidden')) return;	// 如果是隐藏元素,直接跳过
})

getter 和 setter

jQuery上最简单,最常见的操作为获取(get),或者设置(set)的HTML属性。

jQuery将会使用同一个方法既当getter又做setter,而不是定义一对方法,如果传入一个新值给方法,则它将设置此值。

用做setter时,这些方法会给jquery对象中的每个元素设置值。然后返回对象,使用链式调用

获取和设置HTML属性

attr()方法为jQuery中用于HTML属性的getter/setter

一个栗子

$('form').attr('action');	// 将会获取到form元素的action属性
$('#icon').attr('src', 'icon.gif');	// 设置src属性
$('#banner').attr({src:"bannner.gif", alt:'Advertisement', width:720, height:64});	// 设置属性
$('a').attr('target', '_blank');	// 将所有的链接在新窗口打开
$('a').attr('target', () => { // 进行选择,使得站内链接在本窗口打开,让站外的链接在新窗口打开
	if (this.host = location.host) return '_self';
	else return "_blank"; 
});

获取和设置css属性

使用的是css()方法。设置样式的时候,css是直接添加到style属性中

$('h1').css('font-weight');	// 获取第一个h1的字体宽度
$('h1').css('fontWeight');	// 同理
$('h1').css('font');	// 这个错误,不能使用混合样式
$('h1').css('font-variant', 'smallcaps');	// 设置css
$('div.note').css('border', 'solid black 2px');	//选择clas为note的元素,然后设置css
$('h1').css({
	background:"white",	// 一次性的设置多个属性,由于是对象,所以这里使用逗号
	textColor:"white",	
	fontVariant:"small-caps"
});
// 使用函数
$('h1').css('fongt-size', (i, curval) => { return Math.round(1.25*parseInt(curval)); });	// 第一个参数为计数,第二个参数为其属性值,parseInt 的作用为获取其数字,其中jquery会自动加上单位

获取和设置css类

// 添加css类
$('h1').addClass('hilite');	// 给所有的h1元素添加一个类
$('h1+p').addClass('hilite first');	//给p的父元素为h1的元素添加两个类
$('h1').addClass((n) => { return "section" + n; });	// 其中n表示当前遍历到的索引值
// 删除css类
$('p').removeClass("hilite");	// 删除一个类
$('p').removeClass('hilite first');	// 删除多个类
$('p').removeClass((n) => { return "section" + n });	// 通过函数删除
$('p').removeClass();	//删除所有的自定义类
// 切换css类,即第一次执行显示,第二次执行消失
$('tr:odd').toggleClass('oddrow');	// 匹配列表中的奇数序列的元素,然后进行添加
$('h1').toggleClass('big bold');	//切换为这个类
$('h1').toggleClass((n) => { return "big bold h1-" + n });	//使用函数
$('h1').toggleClass("hilite", true);	// 添加
$('h1').toggleClass('hilite', false);	// 移出
// 检测css类
$('p').hasClass('first');	// 确定是否有该类
$('#lead').is('.first');	// 同理
$('#lead').is('.first.hilite');	// 是否有两个类

is为判断,当是的时候选择true,否的时候选择false

获取设置表单值

$('#surname').val();	// 获取surname的文本域的值
$('#usstate').val();	// 获取值
$('select#extras').val();	// 选择select 并且id为extras的元素
$('input:radio[name=ship]:checked').val();	// 获取选中的单选按钮的值
$('#email').val('设置域');	// 给文本域进行设置
$('input:checkbox').val(['opt1', 'opt2']);	// 选中带有这些值的框
$('input:text').val(() => { return this.defaultValue; });	// 将其设置为默认值

设置和获取元素内容

var title = $('head title').text();	// 获取类为head title的元素内容,类似于原生的textContent
var headline = $('h1').html();	// 获取第一个h1元素的html 类似于原生的innerHTML
$('h1').text((n, current) => { return "&" + (n+1) + ":" + current });	// 添加章节,使用函数

获取和设置元素的位置的高和宽

var elt = $('#sprite');	// 选择元素
var position = elt.offset();	// 获取当前位置,相对于文档,不是相对于视窗
position.top += 100;	// 改变y的值
elt.offset(position);	// 设置新位置
// 将所有的<h1>元素向右移动,移动的距离取决于它们在文档中的位置
$('h1').offset((index, curpos) => { return { left: curpos.left + 25*index, top:curpos.top }; });	// 进行偏移
// 获取高度
var body = $('body');	
var contentWidth = body.width();	// 获取w3c盒子的高度
var paddingWidth = body.outerWidth();	// 获取ie盒子的高度
var borderWidth = body.outerWidth(true);	// 加上margin的宽度
var padding = paddingWidth - contentWidth;	// 左padding和右padding的值
var borders = borderWidth - paddingWidth;	// 左border和右border的和
var margins = marginWidth - borderWidth;	// 左margin和右margin的和
// 根据页面数 n 来滚动窗口。n 可以为分数 或 负数
function page(n) {
	var w = $(window);	// 将window封装为jquery对象
	var pagesize = w.height();	// 得到页面的大小(文档的大小)
	var current = w.scrollTop();	// 得到当前滚动条的位置
	w.scrollTop(current + n*pagesize);	// 设置新的滚动条的位置
}

获取和设置元素的位置高宽

$('div').data('x', 1);	// 此不在DOM上显示,会直接作为属性附上
$('div').removeData('x');	// 移出数据
var x = $('div').data('x');	// 获取一些数据

修改文档结构

插入和替换元素

下面是正着

$('h1').append('<br/>');	// 将br作为h1的子节点,在尾部
$('h1').prepend('<a>');	// 在起始位置添加标签 ,依旧为子节点
$('h1').before('<hr/>');	// 在每个h1的前面添加水平线
$('h1').after('<hr/>');	// 在每个h1的后面添加标签
$('h1').replaceWith('<br/>');	// 替换h1元素为br元素
$('h2').each( () => {	// 进行遍历
		var h2 = $(this);	// 获取当前遍历到的元素
		h2.replaceWidth('<h1>' + h2.html() + '</h1>');	// 将目标元素的内容进行替换
	});

下面是倒着

$('<br>').appendTo('#log');	// 将br添加到#log中,到末尾
$(document.createTextNode("&")).prependTo('h1');	// 给所有的h1添加到起始处
$('<hr/>').insertAfter('h1');	// 在所有的h1后面插入水平线
$('<br>').replaceAll('hr');	// 将hr替换为br

复制元素

// 给文档结尾添加一个带有linklist id 的新div
$(document.body).append('<div id="linklist"><h1>List of Links</h1></div>');
// 将文档中的所有链接复制并插入该新div中
$('a').clone().appendTo('#linklist');	// clone不会复制事件处理程序
// 在每一个链接后插入<br>元素,使其能独立显示
$("#linklist > a").after('<br/>');

包装元素

// 用<i>元素包装所有的<h1>元素
$('h1').wrap(document.createElement('i'));	// 产生<i><h1></h1></i>
// 包装所有<h1>元素的内容,使用字符串参数更简单
$('h1').wrapInner('<i/>');	// 产生 <h1><i></i></h1>
// 将第一个段落包装在一个锚点和div里
$('body > p:first').wrap('<a name="lead"><div class="first"></div></a>');
// 将所有的其他段落包装在另一个div里
$('body > p:not(:first)').warpAll('<div class="rest"></div>')

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏影子

jQuery中的常用内容总结(一)

34790
来自专栏偏前端工程师的驿站

WebComponent魔法堂:深究Custom Element 之 标准构建

前言  通过《WebComponent魔法堂:深究Custom Element 之 面向痛点编程》,我们明白到其实Custom Element并不是什么新东西,...

213100
来自专栏keyWords

4、React组件之性能优化

优化并不嫌早。因为,对性能影响最关键的部分,往往涉及解决方案核心,决定整体的架构, 将来要改变的时候牵扯更大。

13710
来自专栏腾讯社交用户体验设计

面向未来的 CSS Variable

9520
来自专栏JadePeng的技术博客

Angular快速学习笔记(3) -- 组件与模板

20330
来自专栏雪地二货笔记库

vue学习笔记10-组件

之后就可以在html中<tagName></tagName>来使用它。 自定义组件也分为全局和局部两种,全局可以在任何实例中使用,而局部只有注册后才能使用。 全...

14210
来自专栏别先生

Javascript函数的简单学习

第九课 函数的定义与调用 1:函数的定义     语法格式     function 函数名(数据类型 参数1){//function是定义函数的关键字    ...

19680
来自专栏HTML5学堂

2016.05 第四周 群问题分享

HTML+CSS 如何让正在运行的动画暂停 2016.05.23~2016.05.27 核心内容 animation-play-state属性 参考答案 ani...

36990
来自专栏葡萄城控件技术团队

Mobile First! Wijmo 5 之 架构

本文就开发者关心的话题之一架构,展开叙述。 ? Wijmo 5是一组JavaScript控件,但是不要与Widgets混淆。在此前开发Wijmo的时候,我们能够...

252100
来自专栏达摩兵的技术空间

oo-css面对对象的编程样式

很多开发者觉得css很简单,如果有时间更愿意用在学习和研究js上,随着css3推出以及一些css的预处理语言和面对对象的编程css的方式的出现,css已经出现了...

9920

扫码关注云+社区

领取腾讯云代金券