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格式

})