JQuery基本知识汇总;JQuery常用方法;浅入了解JQuery
一、jQuery对象与JavaScript对象
①JavaScript入口函数比jQuery入口函数执行的晚一些;
JQuery的入口函数会等页面加载完成才执行,但是不会等待图片的加载;
JavaScript入口函数需要等待页面加载和图片加载完成才执行;
JavaScript入口函数:window.onload = function(){};
JQuery入口函数:①$(document).ready(function(){});
②$(function(){});
②JQuery对象与Dom(JavaScript对象)对象的区别:
DOM对象:使用JavaScript方式获取到的元素是DOM对象。
JQuery对象:使用JQuery方式获取到的元素是JQuery对象。
③JQuery对象与DOM对象的联系:
1、JQuery对象其实就是JavaScript对象的集合,JQuery对象里面存放了一大堆JavaScript对象。
2、JQuery对象不能与Dom对象相互调用{$("li").setAttribute("name","he"); //代码报错
document.getElementById("section").show();//代码报错
}
3、DOM对象转JQuery对象:
var cloth = document.getElementById("cloth"); //这是DOM对象
$(cloth).innerText("测试");
JQuery对象转DOM对象:
var $li = $("li");
$li[0].style.backgroundColor = "red"; //利用取下标的方式将JQuery对象转换成DOM对象
或者$li.get(0).style.backgroundColor = "red"; //利用get()方法也能达到同样效果
二、JQuery常用方法
①index()方法:返回当前元素在所有兄弟元素当中的索引
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
$(function(){
$("li").click(function(){
console.log($(this).index());
});
});
②CSS操作
隐式迭代:设置操作的时候会给JQuery内部的所有对象都设置上相同的值,获取的时候只返回第一个元素对应的值。
addClass():添加一个类,不影响之前存在的类。
removeClass():移除一个类。
hasClass():判断一个类是否存在。
toggleClass():切换类,如果类存在就移除,没有就添加。
③属性操作
attr(name,value):使用方法$("img").attr("alt","图片不存在");
对于布尔值类型的属性,不使用attr()放法,应该使用prop()放法,用法与attr()一样。
④动画操作
show(): 可以传参数,也可不传参数;不传参数则没有动画效果,参数可以是好毫秒值,也可以是字符串:fast=200ms、normal=40ms、slow=60ms。
hide():隐藏。
slideDown():向上滑入可接收两个参数,slideDown(1000,function(){})。
slideUp():向上滑出。
slideToggle():如果是滑入状态就滑出,反之。
fadeIn():淡入。
fadeOut():淡出。
fadeToggle():切换淡入淡出。
自定义动画animate()
1、第一个参数,必填:是一个对象,需要动画的样式。
2、第二个参数:执行时间。
3、第三个参数:动画执行效果。
4、第四个参数:回调函数。
stop()方法:停止当前执行的动画,一般写在动画前面停止别人的动画立即执行自己的动画。
1、例如:.stop.slideDown(); //立即执行slideDown()
2、第一个参数:是否清除动画队列,ture是;false否。
3、第二个参数:是否跳转到当前动画的最终状态效果:true是,false否。
音乐播放是DOM对象,不能调用eq(),需要使用get()获取。
⑤创建JQuery对象直接将标签写在$()中,JavaScript中使用creatElement创建对象。
append():添加节点到子元素的最后面。
prepend():添加节点到子元素的最前面。
appendTo():把节点添加到父元素中,参数是父元素。
perpendTo():把节点添加到父元素中的最前面,参数是父元素。
after():添加到父元素的后面。
before():添加到父元素的前面。
empty():清空一个元素的内容,并且会把对应的事件也清空。
html(""):把元素内容设置为空,不会清除内容上的事件。
remove():删除节点,与empty()是清除子节点;remove是清除自己和后代节点。
clone(): 参数false不会复制内容绑定事件,true同时复制内容绑定事件。
val():获取标签中的内容。
html(): 可以识别标签,效果与JavaScript中的innerHTML方法相同。
text():不能识别标签,效果与JavaScript中innerText相同。
width():获取盒子的宽度。
height():获取盒子的高度。
innerWidth():获取padding+width的值。
outerWidth():获取padding+width+border的总值。如果这个方法中传入参数true就获取padding+width+border+margin的值。
scrollTop()与scrollLeft()设置或者获取垂直滚动条的位置。
offset():获取元素相对于document的位置。
position():获取元素相对于有定位的父元素的位置。
JQuery基本知识汇总;JQuery常用方法;浅入了解JQuery的更多相关文章
- jquery基础知识汇总
jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...
- 最全的jQuery知识汇总
本帖最后由 断天涯大虾 于 2016-12-26 10:22 编辑<ignore_js_op> jQuery是什么? jQuery是javascript编写一个可重用的JavaScript ...
- 浅入浅出---JQuery究竟是什么?
学习完了JQuery之后.我便感觉云里雾里的,JQuery究竟是什么.朦朦胧胧感觉到JQuery应该是javascript函数的封装.就应该像WinForm窗口应用程序中能够调用的系统函数,据之前所学 ...
- jquery知识汇总
jQuery 选择器 选择器 实例 选取 * $ ...
- jQuery基础知识总结
1. jQuery基本概念介绍 1.1 什么是jQuery 一个javascript库,把常用方法写到一个js文件中,需要的时候直接调用即可 学习jQuery就是学习一些方法 ...
- Jquery:小知识;
Jquery:小知识: jQuery学习笔记(二):this相关问题及选择器 上一节的遗留问题,关于this的相关问题,先来解决一下. this的相关问题 this指代的是什么 这个应该是比较好理 ...
- jQuery自带的一些常用方法总结
jQuery自带的一些常用方法总结 这篇文章主要介绍了jQuery自带的一些常用方法总结,包括$.trim .$.contains.$.each.$.map.$.inArray.$.extend等,需 ...
- JQuery基础知识梳理篇
这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器 介绍 jque ...
- jQuery数组处理汇总
jQuery数组处理汇总 有段时间没写什么了, 打算把jquery中的比较常用的数组处理方法汇总一下 $.each(array, [callback])遍历,很常用 1 2 3 4 5 6 7 8 ...
随机推荐
- Mybatis延迟加载、缓存
一.Mybatis中的延迟加载 1.延迟加载背景:Mybatis中Mapper配置文件中的resultMap可以实现高级映射(使用association.collection实现一对一及一对多(多对多 ...
- 移动端IM开发者必读(一):通俗易懂,理解移动网络的“弱”和“慢”
本系列文章引用了腾讯技术专家樊华恒<海量之道系列文章之弱联网优化>的部分章节,感谢原作者. 1.前言 随着移动互联网的高速发展,移动端IM以移动网络作为物理通信载体早已深入人心,这其中的成 ...
- 【Fiddler学习】Fiddler教程,比较经典全面(转)
简介 Fiddler(中文名称:小提琴)是一个HTTP的调试代理,以代理服务器的方式,监听系统的Http网络数据流动,Fiddler可以也可以让你检查所有的HTTP通讯,设置断点,以及Fiddle所有 ...
- Linux 系统资源管理-top-cpu
- Linux - 常用网络操作
001 - Linux CentOS网络配置 CentOS---网络配置详解 002 - Linux查看端口状态 检测本机8080端口状态:netstat –apn | grep 8080 检测192 ...
- Linux - YUM包管理
简述 rpm是由红帽公司开发的软件包管理方式,使用rpm可以方便的进行软件的安装.查询.卸载.升级等工作. 但是rpm软件包之间的依赖性问题往往会很繁琐,尤其是软件由多个rpm包组成时. Yum(全称 ...
- JavaScript 交换数组元素位置的几种方式
前言 交换数组元素位置是开发项目中经常用到的场景,总结下用过的几种方式. 第三方变量 最基础的方式,创建一个变量作为中转. let temp = array[index1]; array[index1 ...
- spring boot 集成freemarker
- 在Vue中使用CodeMirror 格式显示错误 行数错乱 & 代码隐藏
项目需要在线展示和编辑Json文件,所以需要找一个代码编辑器,因为我们的项目直接使用的 vueAdmin-template 这个模板 json编辑器也是直接从 vue-element-admin 项目 ...
- Asp.Net Core微信服务中间件-.NetCore2.1
又封周末,闲暇无聊,随手写了一个关于微信公众号服务的中间件,基于.NetCore2.1.服务类库采用.Net Standard2.0,兼容.net 4.6.1. 整体思路是,设计一个中间件,提供微信消 ...