jQuery学习心得总结(必看篇)
jQuery 对象
•jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。
•jQuery 对象是 jQuery 独有的。
•只有 jQuery 对象才能使用 jQuery 的方法，在 jQuery 对象中无法使用 DOM 对象的任何方法，反之 DOM 对象也无法使用任何 jQuery 的方法。
•约定：如果获取的是 jQuery 对象，那么要在变量前面加上 $
•jQuery 对象中封装了多个 DOM 对象，同时 jQuery 对象是类数组对象
•数组与类数组对象的区别
1.数组的类型是Array
2.类数组对象的类型是 Object
DOM 对象转 jQuery 对象
•使用 $（）将 DOM 对象包装起来，就可以转换成 jQuery 对象
var item = document.getElementsByTagName('ul')[0], // DOM对象
$item = $(item); // jQuery对象
jQuery 对象转换为 DOM 对象
jQuery 对象通过 jQuery 提供的 get（index）方法，得到对应的 DOM 对象
var $ul = $('ul'),
ul = $ul.get(0);
jQuery 对象是一个类数组对象，可以通过 [] 方式，得到对应的 DOM 对象。
类数组对象
类数组对象本质就是一个对象，只不过存储方式类似于数组的结构
•arguments 对象 ---- 接受函数实参的个数
•jQuery 对象 ---- 底层就是 dom 对象
属性
•length 属性（数组的长度 | 元素的个数）
方法
•get（index）：根据 index 放回对应的 dom 对象
•eq（index）：根据 index 返回对应的 jQuery 对象
•index（）：查找元素的索引值
ready 和 onlaod 的区别
ready
1.具有简写方式
2.在一个 HTML 页面中允许出现多个
3.加载完 DOM 结构就执行
4.执行速度快
onload
1.没有简写方式
2.在一个 HTML 页面中只能使用一个
3.需要等页面所有资源加载完才执行
4.执行速度比 ready 慢
jQuery 动画
基本隐藏、显示效果
•show（）/ hide（）
$('div').show(1000).hide(1000);
若是对同一个 jQuery 对象使用，可以采用链式操作。
滑动式动画效果
•slideDown（）/ slideUp（）
$('div').slideUp(1000).slideDown(1000);
淡入淡出
•fadeIn（）淡入
•fadeOut（）淡出
$('div').fadeIn(1000).fadeOut(1000);
并发和排队效果
•并发效果：设置多个动画同时执行
•排队效果：设置多个动画，按照先后顺序依次执行
jQuery 插件
jQuery 插件的作用
•扩展 jQuery 的功能
•呈现组件化特点
日期插件 - layDate插件
•layDate初步使用
1.引入 laydate.js
2.laydate（options）
开发插件
全局函数
全局函数，实际上就是 jQuery 本身的方法。
jQuery 内置的一些功能是通过全局函数实现的。
•比如$.ajax（）就是典型的全局函数
向 jQuery 命名空间添加一个函数，只需要将这个新函数指定为 jQuery 本身的一个属性
$.globalFunction = function(){
// todo...
};
可以通过 jQuery.globalFunction（）或者 $.globalFunction（）来调用
当需要添加多个函数可以使用$.extend（）函数
$.extend({
functionOne: function(){
// todo...
},
functionTwo: function(){
// todo...
}
});
通过上述代码可以添加全局函数，但是代码存在有关命名空间的风险
我们可以把属于一个插件的所有全局函数封装到一个对象
$.plugins = function(){
functionOne: function(){
// todo...
},
functionTwo: function(){
// todo...
}
};
通过上述代码，其实是为全局函数创建了另一个方法 --- plugins
functionOne 和 functionTwo 已经成为 plugins 对象的属性。
$.plugins.functionOne(); $.plugins.functionTwo();
添加 jQuery 实例对象的方法
$.fn.method = function(){};对象方法的环境
在任何插件方法内部，关键字 this 引用的都是当前调用方法的 jQuery对象，因此可以在 this 上面调用任何内置的 jQuery 方法。
方法连缀
通过 return this 来实现链式操作
以上这篇jQuery学习心得总结(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
使用jQuery处理AJAX请求的基础学习教程
$.ajax快捷方法 $.get(url,[data],[callback],[type]) $.post(url,[data],[callback],[type]) 两种方法请求方式不同,其他方式相同. 参数:url[请求地址],data[请求的数据内容(obj对象)],callback[回调函数(只能处理请求成功事件)], type[请求返回数据的编码格式(默认ContentType指定格式)] $.get('/test?x=1'); $.get('/test',{z:2}); $.post
-
JQuery中attr属性和jQuery.data()学习笔记【必看】
用html直接data-key来存放,key必须全部小写. <div data-mydata="123"></div> consoloe.log($("div").data("mydata")); //output 123 二避免在key中使用短横线 <a id="bar" data-foo-bar-baz="fizz-buzz" href="#">f
-
分享jQuery插件的学习笔记
插件(Plugin)也成为 jQuery 扩展(Extension),是一种遵循一定规范的应用程序接口编写出来的程序.目前 jQuery 插件已超过几千种,由来自世界各地的开发者共同编写.验证和完善.而对于jQuery开发者而言,直接使用这些插件将快速稳定架构系统,节约项目成本. 一． 插件概述 插件是以 jQuery 的核心代码为基础,编写出复合一定规范的应用程序.也就是说,插件也是 jQuery 代码,通过 js 文件引入的方式植入即可. 插件的种类很多,主要大致可以分为:UI 类.表单及验
-
jQuery中的基本选择器用法学习教程
一．简单选择器 在使用jQuery 选择器时,必须使用"$()"函数来包装CSS 规则.而CSS 规则作为参数传递到jQuery 对象内部后,再返回包含页面中对应元素的jQuery 对象.随后,就可以对这个获取到的DOM 节点进行行为操作了. #box {//使用ID 选择器的CSS 规则 color:red;//将ID 为box 的元素字体颜色变红 } 在jQuery 选择器里,我们使用如下的方式获取同样的结果: $('#box').css('color', 'red');//获取D
-
jQuery的内容过滤选择器学习教程
内容过滤器的过滤规则主要是包含的子元素或文本内容上. $('div:contains("xxx")').css('background', '#ccc'); //选择元素文本节点含有xxx 文本的元素 $('div:empty').css('background', '#ccc'); //选择空元素 $('ul:has(.red)').css('background', '#ccc'); //选择子元素含有class 是red 的元素 $(':parent').css('backgro
-
深入学习jQuery Validate表单验证
本文实例介绍了jQuery Validate表单验证,主要是利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示,分享给大家供大家参考,具体内容如下 1.添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面. 2.需要改写触发校验的方式. $("#commentForm").validate({meta: "validate"}); 3.详细代码如下: <html> <hea
-
jQuery学习心得总结(必看篇)
jQuery 对象 •jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象. •jQuery 对象是 jQuery 独有的. •只有 jQuery 对象才能使用 jQuery 的方法,在 jQuery 对象中无法使用 DOM 对象的任何方法,反之 DOM 对象也无法使用任何 jQuery 的方法. •约定:如果获取的是 jQuery 对象,那么要在变量前面加上 $ •jQuery 对象中封装了多个 DOM 对象,同时 jQuery 对象是类数组对象 •数组与类数组对象的区别
-
vue2.X组件学习心得(新手必看篇)
VUEJS学习网址:https://cn.vuejs.org/ 此文章是用来记录自己的学习和实践心得. 关注点:父子组件之间的通信 看图说话: Pass Props 子组件本身与父组件是孤立的,通过子组件中显示声明的props属性,接收父组件数据; 父组件的数据更新时,子组件的prop会跟着更新: 此数据流动是单向的(看着); Emit Events 子组件使用$.emit(fn)向外抛出自己的内部触发的事件; 父组件是否监听?如果父组件需要监听,使用v-on绑定监听,触发对应事件; 以上为通用
-
Web前端新人笔记之jquery入门心得(新手必看)
本章将为大家介绍以下几点内容: 1.jquery的主要特点: 2.建立jquery的编码环境: 3.简单jquery脚本示例: 4.选择jquery而不是纯javaScript的理由: 5.常用的jquery开发工具:jquery能做什么? ① 取得文档中的元素 $('div.content').find('p'); ② 修改页面的外观 $('ul > li:first').addClass('active'); ③ 改变文档内容 $('#container').append('<a href
-
JavaWeb学习笔记分享(必看篇)
自定义列表 <dl></dl>:表示列表的范围 **在里面 <dt></dt>:上层内容 **在里面 <dd></dd>:下层内容 有序列表 <ol></ol>:有序列表的范围 --属性 type:设置排序方式,1(默认),a,i.. **在ol标签里面 <li>具体内容</li> 无序列表 <ul></ul>:无序列表的范围 --属性 type:circle(空
-
js正则表达式学习和总结(必看篇)
最近在做一个小项目时用到了正则匹配,感觉正则挺好用的,所以打算抽时间来小小总结一下. 正则表达式是一种文本模式,包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为"元字符").模式描述在搜索文本时要匹配的一个或多个字符串.RegExp 对象表示正则表达式,它是对字符串执行模式匹配的强大工具.正则表达式是一种查找以及字符串替换操作. 新建正则表达式 方式一:直接量语法 var reg = /pattern/attributes 方式二:创建 RegExp 对象的语法 var r
-
Javascript基础学习笔记(菜鸟必看篇)
什么是变量? 变量是用于存储信息的容器 变量的声明 语法: var 变量名 变量名 = 值; 变量要先声明再赋值 变量可以重复赋值 变量的命名规则 变量必须以字母开头: 变量也能以$和_符号开头(不过我们不推荐这么做): 变量名称对大小写敏感(a和A是不同的变量). 语句 语句以一个分号结尾:如果省略分号,则由解析器确定语句的结尾. 有个好的编码习惯,都要以 ; 结尾 数据类型 在JavaScript中,一段信息就是一个值(value).值有不同的类型,大家最熟悉的类型是数字.字符串(strin
-
js学习阶段总结(必看篇)
typeof操作符:返回字符串,可能是"undefined","boolean"," string","number","object","function"中的一种,所以不能判断数组. NaN(Not a Number):用法NaN(val)如果val能被转化成一个数就返回false,否则返回true. parseInt(val,way)其中way可以是2,4...就是要按照这个进制来
-
jQuery 常用代码集锦(必看篇)
1. 选择或者不选页面上全部复选框 var tog = false; // or true if they are checked on load $('a').click(function() { $("input[type=checkbox]").attr("checked",!tog); tog = !tog; }); 2. 取得鼠标的X和Y坐标 $(document).mousemove(function(e){ $(document).ready(func
-
js断点调试心得分享(必看篇)
1.断点调试是啥?难不难? 断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了.操作起来似乎很简单,其实很多人纠结的是,是在哪里打断点?(我们先看一个断点截图,以chrome浏览器的断点为例) 步骤记住没? 用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources → 打开你要调试的js代码文件 → 在行号上单击一下,OK!恭喜你的处女断点打上了,哈哈~~ 2.断点怎么打才合适? 打断点操作很简单,核心的