JQ基本
jQuery的入口函数:
特点:1. 等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完毕,jQuery帮我们完成了封装。
2. 相当于原生js中的DOMContentLoaded。
3. 不同于原生js中的load事件是等页面文档、外部的js文件,css文件,图片加载完毕才执行内部代码。
方式一:
$(document).ready(function(){
. . . //此处是页面DOM加载完成的入口
});
方式二:
$(function(){
. . . //此处是页面DOM加载完成的入口
});
版本:1x:兼容 IE 6 7 8 等低版本浏览器
2x:不兼容 IE 6 7 8 等低版本浏览器
3x: 不兼容 IE 6 7 8 等低版本浏览器 ,官网主要更新维护的版本
文档下载官方地址:https://jquery.com
其他版本下载地址:htts://code.jquery.com
jQuery插件常用的网站:
1.jQuery插件库:http://www.jq22.com
2.jQuery之家:http://www.htmleaf.com
$ 是 jQuery的顶级对象,相当于原生JavaScript中的window,把元素利用 $ 包装成jQuery对象,就可以调用jQuery的方法。
$( 'div' ). hide( ); // 把元素div,使用 $ 符号包装成jQuery对象,调用 hide 方法
JQuery对象和DOM对象的区别:
1. jQuery 对象:
jQuery方法获取的元素就是jQuery对象,本质是:利用 $ 对DOM 对象包装后产生的对象(伪数组形式存储)
$(' div ');
2. DOM对象:
用原生 JS 获取来的对象就是DOM对象
var myDiv = document.querySelector( 'div' );
3. 两个对象并不一样,jQuery 对象只能使用jQuery的方法,DOM对象只能使用原生的JavaScript属性和方法。
1.jQuery多库共存:
问题概述:jQuery使用$作为标示符,随着jQuery的流行,其他js库也会用这$符号作为标识符,这样一起使用会引起冲突
$(function(){
function $(ele){
return document . querySelector(ele);
}
console . log($("div"));
})
1.如果 $ 符号冲突,我们就是用 jQuery
jQuery . each( ) ;
2.让 JQuery 释放对 $ 控制权 让用什么自己决定
var zidingyi = jQuery.noConflict( );
console . log( zidingyi ("span"));
zidingyi.each();
2.图片懒加载插件:(图片使用延迟加载,可提高网页下载速度,他也能帮助减轻服务器负载)
当我们页面滑动到可视区域,再显示图片
我们使用jquery插件库 EasyLazyload。注意,此时的 js 引入文件和 js 调用必须写到DOM元素(图片)的最后面
3.全屏滚动插件(fullpage.js)
gitHub : https//github.com/alvarotrigo/fullPage.js
中文翻译网站: http://www.dowebok.com/demo/2014/77/
JQ基本的更多相关文章
- jq选择器基础
Jquery $代表选择器 使用jq必须要导入jq文件 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&qu ...
- JQ实现判断iPhone、Android设备
最近做了一版微信宣传页,通过JQ来判断设备,并进行下载 微信内置浏览器对下载链接进行了屏蔽,所以先进行判断,如果是微信内置浏览器,则跳转应用宝链接,如果不是,则判断是iPhone/Adroid/PC ...
- jq.validate隐藏元素忽略验证
jq.validate隐藏元素忽略验证 现在有这样一个需求,当触发某类事件时候,需要在页面中显示input框,但是当不需要加载页面中的元素时候,进行隐藏.在这个需求的前提下,程序中对于input中的输 ...
- jq.validate 自定义验证两个日期
jq.validate 自定义验证两个日期 首先定义有一个表单,date1和date2是属于表单的元素,若date1大于date2,返回false:若date1<date2,返回true.使用j ...
- jq方法中 $(window).load() 与 $(document).ready() 的区别
通过自学进入了前端的行列,只知道在js中,一开头就写一个: window.onload = function(){ //doing sth} 然后所有的乱七八糟的代码全塞里面,大概知道window.o ...
- jq 根据值的正负变色
效果图这样: 意思就是根据最后的百分值变色,值为负变绿色,值为正变红色. 所以只要取到那个标签里的值了,就能根据正负的判断决定颜色. 我的html部分这样: /*不过他们都说我的dom结构不太合理,同 ...
- jq 个性的隔行变色
效果图大致这样: 我的html格式部分这样:/*不过他们都说我的dom结构不太合理,同意.BUT,我就是不想写表格而写成的这样的,所以后面jq部分也要迁就了*/ <div class=&qu ...
- 关于JQ toggle 的注意事项
1.9.1以后的版本,好像不支持 jq 的 toggle function的用法啦.
- js与jq对数组的操作
一.数组处理 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长 ...
- js,jq,css选择器
js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; / ...
随机推荐
- CF1173X
CF1173C 由于牌堆只能从最后插牌,所以插牌方法非常显然 首先特判一下牌堆有没有一个合法的后缀,如果有的话再判断一下手中的牌和合法后缀之前的牌的排列顺序能不能有效的继续续下去 然后排除了以上情况就 ...
- Maven的pom.xml文件结构之基本配置parent和继承结构
1.Maven项目的继承 Maven项目之间不仅存在多模块的聚合关系,而且Maven项目之间还可以存在相互继承的关系. Maven项目之间的继承关系通过<parent>表示,在子Maven ...
- 2、eureka注册中心集群
1. Eureka作为spring cloud的服务发现与注册中心,在整个的微服务体系中,处于核心位置.单机模式下的eureka服务,显然不能满足高可用的实际生产环境,这就要求配置一个能够应对各种突发 ...
- gradle笔记
gradle笔记 一.基础知识 1.1.groovy语言 Groovy适用于Java虚拟机的一种敏捷的动态语言,他是一种成熟的面向对象编程语言,既可以用于面向对象编程,又可以用作纯粹的脚本语言,使用该 ...
- 循环神经网络(Recurrent Neural Network)
传统的神经网络模型,隐藏层的节点之间是无连接的,如下图所示. 而循环神经网络隐藏层的节点之间有连接,主要用于对序列数据进行分类.预测等处理.有连接意味着需要接受信息,这种网络通常用来对序列数据进行处理 ...
- k8s集群的搭建之三:flannel
一介绍 flannel是CoreOS提供用于解决Dokcer集群跨主机通讯的覆盖网络工具.它的主要思路是:预先留出一个网段,每个主机使用其中一部分,然后每个容器被分配不同的ip:让所有的容器认为大家在 ...
- SQL优化(三)—— 索引、explain分析
SQL优化(三)—— 索引.explain分析 一.什么是索引 索引是一种排好序的快速查找的数据结构,它帮助数据库高效的查询数据 在数据之外,数据库系统还维护着满足特定查找算法的数据结构,这些数据 ...
- linux环境安装opencv导入依赖报错问题
linux环境通过pip安装opencv后,导入cv2时报错: 在centos和ubuntu环境下都遇到相同的问题.报错原因: 缺少共享库 有两种解决办法: 一.使用如下命令查看缺少得共享库 yum ...
- 重视项目排期,对dateline 有所敬畏
项目排期 = 个人任务完成 + 风险预估 + 意外情况 + 项目上下游依赖 个人任务完成 个人任务具体话 不要考虑私人情感,专注工作 风险预估 对可能出现的情况进行考虑 意外情况 对出现的意外情况提前 ...
- Magento开启模板路径提示
Magento的模板就好像搭积木一样,一个一个区块累加为一层,一层一层嵌套为一个整体,看起来结构相当复杂.虽然大部分模板文件路径在page.xml等文件中能找到,但是还是有部分是系统自带的.在上面并没 ...