资讯专栏INFORMATION COLUMN

jQuery(一)

freewolf / 1582人阅读

摘要:又拍云提供同样版本也不同步了七牛云提供同样版本稳定在谷歌因为某些缘故,无法使用总结唯一一个能用的只有了。查询与查询结果返回值为一个对象,对象为类数组。

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?...:jquery-plugin jquery 官方插件 http://plugins.jquery.com/ 不过目前处于不更新的状态,不推荐使用内部的插件,因为很可能没有作者维护了。并且已经处于自读的方式,不推荐使用,推荐使用npm的方式,使用jquery的相关插件
jquery官方推荐图书 https://www.packtpub.com/web-...
https://www.manning.com/books...
https://www.syncfusion.com/eb...
一本都看不懂。。。
js基金会 https://js.foundation/ 是滴,js也拥有基金会了,和linux一样
目前js基金会下属项目 https://js.foundation/communi...
好啦,有点小乱。大概也就这些了。
其中jquery的最出色的地方在于对元素的选择。

jQuery Mobile 介绍

jquery mobile 属于移动端的js库

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

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

ps 该项目博客保留在2017年,提交截止在去年,测试状态不通过 https://travis-ci.org/jquery/...

╮(╯▽╰)╭

下载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.c...

以及chrome官方提供的https://developers.google.com...

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

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

由bootcdn提供的jquery

https://www.bootcdn.cn/jquery/
这个使用比较多

由百度云CDN提供

貌似已经不同步了。

又拍云提供

http://jscdn.upai.com/
同样版本也不同步了

七牛云提供

http://www.staticfile.org/
同样版本稳定在2.0

谷歌

因为某些缘故,无法使用
https://developers.google.com...

总结

唯一一个能用的只有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

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 = $("", 
        {
            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").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作为h1的子节点,在尾部 $("h1").prepend(""); // 在起始位置添加标签 ,依旧为子节点 $("h1").before("
"); // 在每个h1的前面添加水平线 $("h1").after("
"); // 在每个h1的后面添加标签 $("h1").replaceWith("
"); // 替换h1元素为br元素 $("h2").each( () => { // 进行遍历 var h2 = $(this); // 获取当前遍历到的元素 h2.replaceWidth("

" + h2.html() + "

"); // 将目标元素的内容进行替换 });

下面是倒着

$("
").appendTo("#log"); // 将br添加到#log中,到末尾 $(document.createTextNode("&")).prependTo("h1"); // 给所有的h1添加到起始处 $("
").insertAfter("h1"); // 在所有的h1后面插入水平线 $("
").replaceAll("hr"); // 将hr替换为br
复制元素
// 给文档结尾添加一个带有linklist id 的新div
$(document.body).append("");
// 将文档中的所有链接复制并插入该新div中
$("a").clone().appendTo("#linklist");    // clone不会复制事件处理程序
// 在每一个链接后插入
元素,使其能独立显示 $("#linklist > a").after("
");
包装元素
// 用元素包装所有的

元素 $("h1").wrap(document.createElement("i")); // 产生

// 包装所有

元素的内容,使用字符串参数更简单 $("h1").wrapInner(""); // 产生

// 将第一个段落包装在一个锚点和div里 $("body > p:first").wrap("
"); // 将所有的其他段落包装在另一个div里 $("body > p:not(:first)").warpAll("
")

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108348.html

相关文章

  • jQuery)-- 初步了解

    摘要:一初步了解介绍由创建于年一月的开源项目,凭借着跨平台的兼容性,简洁的语法,极大的简化了人员遍历文档,操作,处理事件,执行动画,和开发的操作。只建立一个名为的对象。对发生在同一个对象上的一组动作,可以直接连写无需重复获取对象。 jQuery(一)-- 初步了解 jQuery介绍 由John Resig创建于2006年一月的开源项目,jQuery凭借着跨平台的兼容性,简洁的语法,极大的简...

    quietin 评论0 收藏0
  • jQuery 源码系列()总体架构

    摘要:到目前为止,的贡献者团队共名成员,多条,可想而知,是一个多么庞大的项目。参考源码分析整体架构源码解析读书笔记第二章构造对象函数详解本文在上的源码地址,欢迎来。 欢迎来我的专栏查看系列文章。 决定你走多远的是基础,jQuery 源码分析,向长者膜拜! 我虽然接触 jQuery 很久了,但也只是局限于表面使用的层次,碰到一些问题,找到 jQuery 的解决办法,然后使用。显然,这种做法的...

    svtter 评论0 收藏0
  • 手把手教你JQuery插件的写法和规范

    摘要:示例合并和,修改并返回。例如我们插件里面需要有个方法来检测用户调用插件时传入的参数是否符合规范。私有方法,检测参数是否合法调用调用调用者覆盖插件暴露的共公方法调用自定义高亮插件 本文实例讲述了jQuery插件编写步骤。分享给大家供大家参考,具体如下: 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了。至于使用jq...

    Alex 评论0 收藏0
  • 前端基础进阶(十):详细图解jQuery对象,以及如何扩展jQuery插件

    摘要:而在构造函数中,返回了的实例对象。在中直接返回过的实例,这里的是的真正构造函数最后对外暴露入口时,将字符与对等起来。因此当我们直接使用创建一个对象时,实际上是创建了一个的实例,这里的正真构造函数是原型中的方法。 showImg(https://segmentfault.com/img/remote/1460000008749398); 早几年学习前端,大家都非常热衷于研究jQuery源...

    RebeccaZhong 评论0 收藏0
  • 前端基础入门五(掌握jQuery的常用api,实现动态效果)

    摘要:基本概念学习目标学会如何使用,掌握的常用,能够使用实现常见的效果。想要实现简单的动画效果,也很麻烦代码冗余。实现动画非常简单,而且功能更加的强大。注意选择器返回的是对象。 jQuery基本概念 学习目标:学会如何使用jQuery,掌握jQuery的常用api,能够使用jQuery实现常见的效果。 为什么要学习jQuery? 【01-让div显示与设置内容.html】 使用javasc...

    nevermind 评论0 收藏0
  • 前端基础入门五(掌握jQuery的常用api,实现动态效果)

    摘要:基本概念学习目标学会如何使用,掌握的常用,能够使用实现常见的效果。想要实现简单的动画效果,也很麻烦代码冗余。实现动画非常简单,而且功能更加的强大。注意选择器返回的是对象。 jQuery基本概念 学习目标:学会如何使用jQuery,掌握jQuery的常用api,能够使用jQuery实现常见的效果。 为什么要学习jQuery? 【01-让div显示与设置内容.html】 使用javasc...

    codecook 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<