jquery开发,jquery开发培训教程
jquery怎么使用
jQuery是一款前端开发框架,jQuery使用的方法如下:
创新互联是一家专注于成都网站设计、网站制作与策划设计,浦东网站建设哪家好?创新互联做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:浦东等地区。浦东做网站价格咨询:18980820575
工具/原料:联想威6、win10 20H2、jQuery 3.5.1。
1、jQuery给放到一个文件夹里面,方便我们待会引用这个jQuery,这里我就放到我项目的js文件夹里面。
2、然后我们来开始编辑HTML界面代码。
3、如图,使用script标签把jQuery引入到我们的HTML界面。src引号里面的就是我们的jQuery路径名称。
4、接着再书写一个script标签对,里面写上jQuery入口函数,这样,当我们的HTML加载完成之后就会执行我们的jQuery代码,入口函数写法有两种,function里面就是用来书写执行代码的。
5、如图,我就使用alert来在网页中弹出一个警告框。
6、这样,当我们运行我们的网页的时候,就会弹出一个窗口,里面有我们的警告内容。至此,jQuery也算简单的入门了解了。
前端开发JS框架之jQuery的基础知识分享
jQuery对象是通过jQuery包装DOM对象后产生的对象
注意:jQuery对象只能使用jQuery里的方法,DOM对象只能使用DOM对象的方法
基本选择器
层级选择器:
基本筛选器:
属性选择器:
表单筛选器:
筛选器方法:
jQuery的一些方法:
注意:对于标签上有的能够看到的属性和自定义属性用attr()方法
对于返回布尔值比如checkbox,radion,option这三个标签是否被选中,用prop方法
事件绑定方式:
注意:DOM定义的事件可以用 .on()方法来绑定事件,但是jQuery定义的事件就不可以
常用事件有:
移除事件:把on改成off,就是移除 .on()绑定的事件
阻止后续事件执行:事件函数中添加 return false; (常用于阻止表单提交等)或者e.preventDefault()
阻止事件冒泡:添加e.stopPropagation()
利用父标签去捕获子标签的事件
推荐阅读:
前端开发框架之jQuery 和 Vue 的选择
前端开发之15个jQuery小技巧分享
前端开发之JQuery入门基础操作
前端开发框架jQuery的优势与基础知识分享
如何自己开发一个简单的jquery 插件
现在网上关于js和jquery封装的插件很多,我刚刚接触前端的时候,就很敬佩那些自己写插件的大牛们!因为是他们给网站开发更多的便利,很多网页效果,网上很多现成的插件!那么这些插件是如何写的呢看首先是有扎实的js和jquery技术基础,其次还有一些写插件的方法和技巧。关于js和jquery的技术基础,那是一个慢慢积累的过程。但是关于写插件的一些注意和技巧,本文可以略微介绍一下,方便以后写插件的时候用得到。
jquery插件开发模式
jquery插件一般有三种开发方式:
通过$.extend()来扩展jQuery
通过$.fn 向jQuery添加新的方法
通过$.widget()应用jQuery UI的部件工厂方式创建
第一种$.extend()相对简单,一般很少能够独立开发复杂插件,第三种是一种高级的开发模式,本文也不做介绍。第二种则是一般插件开发用到的方式,本文着重讲讲第二种。
jquery插件开发有几种
//类级别插件开发,主要是在jQuery中定义全局方法:
//第一种写法
jQuery.myFunc = function(str){
alert("直接在jquery中定义方法",str)
}
//调用方式 $.myFunc("hello!");
//第二种写法
jQuery.extend({
myFunc:function(str){
alert("extend扩展$的方法",str)
}
})
//调用方式 $.myFunc("hello!");
//第三种写法: 为了不污染全局,挂载一个对象作为命名空间,自定义的所有方法放在这里,保证jQuery全局安全。
jQuery.define={
myFunc:function(str){
alert("命名空间的写法",str)
}
}
//调用方式:$.define.myFunc("hello");
//以上三种是级别插件开发方式,不常用,从调用方式看出,他们是全局执行的,不需要绑定节点对象。
//对象级别插件开发:有规范模板
;(function($){
$.fn.plugin = function(options){
var defaults = {
//各种默认参数
}
var options = $.extend(defaults,options); //传入的参数覆盖默认参数
this.each(function(){
var _this = $(this); //缓存一下插件传进来的节点对象。
//执行内容
})
return $(this); //把节点对象返回去,为了支持链式调用。
}
})(jQuery);
//调用方式
$("selector").plugin({
//自定义参数,json格式
})
网站标题:jquery开发,jquery开发培训教程
文章网址:http://ybzwz.com/article/dsgeego.html