04.jQuery++1201
window.onloaded = function(){}用于整个网页(包括图片等)加载完毕后执行方法内代码块
$(document).ready(function(){}) 用于DOM结构加载完毕后就可以执行方法内代码块
由此得出 onload是在ready后执行
DOMContentLoaded 当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded
事件被触发,而无需等待样式表、图像和子框架的完全加载。
网页 = DOM + 静态资源
静态资源:不单单是图片,加载一个js文件都是静态资源
$(selector).fadeln(speed,callback); //改变透明度
$(selector).toggle(speed,callback); //改变高度
为什么AJAX是异步请求有时候还需要同步
AJAX同步的特殊情况
写代码的时候调用了一次AJAX,目的是想从后台获取一个data=100;(--这部分是异步)
用data做其他的使用 (--这部分是同步执行)
以上就会导致,同步执行的过快,以至于data还没获取到
所以此时会让AJAX变成同步(false)
所以先将异步代码锁死,先获取再调用
remove和empty的区别
empty清空某元素内部
remove移出整个元素
jQuery事件委托
DOM在为页面中的每个元素分派事件时,相应的元素一般都在事件冒泡阶段处理事件。
在类似 body > div > a 这样的结构中,如果单击a元素,click事件会从a一直冒泡到div和body(即document对象)
在IE8和之前的版本中,少数事件如change、submit不支持原生的事件冒泡,但是jQuery为它们模拟了事件冒泡以此创建了一致的、跨浏览器的行为。
换句话说:jQuery模拟了所有的事件冒泡,使所有事件到支持事件冒泡并兼容所有浏览器。
- live():jQuery1.7之后弃用 (故本文不再讲解这个方法)
- bind(): 动态添加的元素无法使用该方法绑定事件
- delegate():jQuery1.7之后被on()取代
- on(): jQuery1.7之后引入,支持事件绑定的全部功能。
bind()
$("p").bind("click",function() {
})
- 这里用到了隐式迭代,如果匹配到的元素特别多的时候,比如页面中有100个div元素,就得执行绑定100次。对于大量元素来说,影响到了性能。但是如果是id选择器,因为id唯一,用bind()方法就很快捷了。
- bind()只能给调用它的时候已经存在的元素绑定事件,对于动态添加的元素无法使用该方法绑定事件。
delegate()
$('#container').delegate('a', 'click', function() { alert("That tickles!") });
这段代码的作用是:扫描文档查找$(‘#container’),并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CCS选择器(即’a’元素)相匹配。如果两种检查的结果都为真的话,它就执行函数。
delegate()特点
- 直接将目标元素选择符("a")、事件("click")及处理程序与“委托方”$("#container")绑定,不额外收集元素、事件传播路径缩短、语义明确;
- 支持链式调用,即支持如$("table").find("#info").delegate(...)的代码来精确控制;
- 使用事件委托时,如果注册到目标元素上的其他事件处理程序使用.stopPropagation()阻止了事件传播,那么事件委托就会失效。
————————————————
版权声明:本文为CSDN博主「aiolos1111」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/aiolos1111/article/details/52047380
除了用delegate,还可用什么方法代替delegate
$(document).on("click",function(e){console.log(e.target.tagName + " is clicked")})
跨域请求
跨域的安全限制都是对浏览器来说的,服务器端是不存在跨域安全限制的。
浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。
如果协议、端口和主机对于两个页面是相同的,则页面具有相同的源,否则就是不同源的
如果要在js里发起跨域请求,则要进行一些特殊处理了。或者,你可以把请求发到自己的服务端,再通过后台代码发起请求,再将数据返回前端。
(在页面上直接发起一个跨域的ajax请求是不可以的,但是在页面上引入不同域上的js脚本是可以的)
jquery的jsonp方式跨域请求:
服务端代码不变,js代码如下:最简单的方式,只需配置一个dataType:'jsonp',就可以发起一个跨域请求
解决跨域的三种方案
1.使用ajax的jsonp
2.使用jqeury的jsonp插件
3.使用cors(?)
对于jq的一点小理解
$("td")相当于JS声明元素,代表一个标签,一个对象
$("<td></td>")创建标签,生成td元素
04.jQuery++1201相关推荐
- JavaWEB开发04——JQuery
今日任务 使用JQuery完成页面定时弹出广告 定时器: setInterval clearInterval setTimeout clearTimeout 显示: img.style.dis ...
- 04.jQuery 基本语法笔记
jQuery是什么 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互 ...
- 前端基础04 Jquery 总结
一.jquery 1.简介 A.就是对js的一个简单的封装 优化Html文档操作 事件处理 动画设计 ajax交互 B.适配了各种主流的浏览器 C.轻量级的前端框架 2.下载 官网下载地址:https ...
- 20+个可重复使用的jQuery代码片段
jQuery已经成为任何web项目的重要组成部分.它为网站提供了交互性的通过移动HTML元素,创建自定义动画,处理事件,选择DOM元素,检索整个document ,让最终用户有一个更好的体验. 在这篇 ...
- jquery选择器和基本操作
定义:jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: ...
- easyui java1234_李炎恢jQuery EasyUI视频教程 下载
李炎恢jQuery EasyUI视频教程 下载 01.[jQuery EasyUI]第1章 jQuery EasyUI入门 02.[jQuery EasyUI]第2章 使用EasyUI 03.[jQ ...
- jQuery笔记 - 基础
jQuery学习笔记-基础知识 01 初识jQuery 02 jQuery和JavaScript的固定写法 03 jQuery和JavaScript加载模式 04 jQuery 入口函数其它写法 05 ...
- 李兴华html css,2014MLDN(李兴华老师视频教程)
资源内容: 2014MLDN(李兴华老师视频教程)|____开发工具 |____ideaIU-15.0.3.exe |____ideaIU-15.0.2.exe ...
- 翻译翻译什么叫HTML5(六)“开门,js来查水表啦”
嘿,宝儿萌,这里是阿木木,这是一篇究极精炼的blog,全是干货莫得感情,主要是木木这周要连发两篇,所以只能稍微敷衍一下啦~(翻译翻译什么叫HTML5(五)被我吃了(×)别催了,过两天就更(√)) 1. ...
最新文章
- C#中File类的常用读取与写入文件方法的使用
- 绘制商务感十足的折线图和面积图
- xhtmlrenderer + iText-HTML转PDF
- (Docker实战) 第六篇:建立持续集成环境03
- 如何用FineReport制作一张报表(一)
- DynamicFusion: Reconstruction and Tracking of Non-rigid scenes in real-time
- 关于使用stanfordcorenlp一直运行不报错的解决方法
- Tomcat部署记事
- wubi for ubuntu 9.04 无法运行
- Jquery-无法有效获取当前窗口高度
- jpress连接不上mysql_win10+jdk+mysql+tomcat+jpress环境搭建与部署
- python 西门子触摸屏通讯_PLC通过以太网与触摸屏通讯
- 哈啰出行高质量故障复盘法:“3+5+3”(附模板)
- JDBC--藤原豆腐店自用
- selenium八大元素定位方法
- 邮件合并批量制作邀请函
- Pytorch深度学习实战教程:UNet语义分割网络
- android项目迁移到androidX:类映射(android.support.v4*)
- 矮人dos工具箱 5.3 build 6.713 下载
- MHN蜜罐实践(一)--安装部署
热门文章
- 我校全力开展抗洪救灾工作
- 网易有道精品课好在哪里?有知道的大家说一说
- 植物图像识别python_python实现图像识别功能
- 【叶片识别】基于matlab LBP植物叶片识别【含Matlab源码 1702期】
- 【漏洞通告】CVE-2022-36803 Atlassian Jira Align权限提升漏洞
- 有关程序员的几则冷笑话
- 微信设置“种草昵称”,个性有意思,来看看!
- 影响我此生的几首歌(转载)
- 剑指offer T51数组中的逆序对
- macOS Xcode8安装RVM,安装Ruby,安装/卸载Cococapods全程详解