概述
读后感
- js、jq初始化页面
- js
- jq初始化页面
- 以下部分为锋利的jQuery读后总结
- 第一章: 认识jQuery
- 第二章:jQuery选择器
- 第三章: jQuery中DOM操作
- 第四章 jQuery中事件和动画
- 第五章 jQuery对表单、表格的操作以及更多应用
- 第六章 jQuery与Ajax的应用
js、jq初始化页面
js
- body元素上 onload js初始化的方法
- 在脚本里使用window.οnlοad=function(){}
- 脚本写初始化方法,页面顺序执行到初始化方法时开始初始化页面
jq初始化页面
- $(document).ready(function(){}) === $(function(){}} 注意与window.onload的区别(前者可多个,后者仅一个)
- jQuery(function($)){}
总结:js页面全部加载完(包括图片以及外部资源)加载完才可以执行初始化加载
jq等页面的DOM结构加载完就初始化数据
以下部分为锋利的jQuery读后总结
第一章: 认识jQuery
1.jQuery轻量级js库,强大的选择器、出色的DOM操作、可靠的事件处理、完善的兼容性、链式操作。
2.DOM对象:文档对象模型。 JQuery对象:通过jQuery包装后Dom对象产生的对象。
jq对象转为DOM对象 [index]/get(index)
DOM对象转为jq对象 包装下(即用jQuery包装下)
3.解决jQuery和其他库的冲突
jq库在其他库之后引入: A: jQuery.noConflict()交出控制权,在用jQuery B: 交出控制权后,jQuery(function($){})
jq库在其他库之前引入:不交出控制权,直接用jQuey
第二章:jQuery选择器
- css选择器: 标签、ID、类、群组、后代、通配符(兼容可以) 、伪类、子选择、临近、 属性(兼容性不太好)
- jq选择器好处: 写法简洁,支持css1-css3,完善时间处理机制(获取网页不存在元素不会报错,判断元素存在,需要用长度去判断)
- jq选择器: 基本类(#id .class ele * selector)、层次选择器( ( " p a r e n t > c h i l d " ) 、 ("parent > child")、 ("parent>child")、(“pre + next”))、过滤选择器(:first :not(selector) :even :eq(0) :gt(10) :lt(10) :focus)、内容选择器(:contains(xx) :empty() :has(xx) :parent())、可见性选择器(:hidden :visible)、属性选择器([xx])、子元素过滤选择器(:first-child :ntn-child)、表单对象属性过滤(:enabled :disabled :checked :selected)、表单选择器(:input :text :radio :checkbox …)
- parent() parents() closet()区别 parent()获取集合中每个匹配元素的父级元素 parents()获取集合中每个匹配元素的祖先元素 closet()从元素自身逐渐向上匹配最先匹配上的元素
第三章: jQuery中DOM操作
- 分为DOM Core(document.getElementById())、 HTML-DOM(document.form)、CSS-DOM(element.style.xx = xx)三方面
2.jq的DOM操作 查找节点(元素、属性)、创建节点(元素、属性、文本)、插入节点(append()/appendTo()、prepend()/prependTo()、 after()/insertAfter()、before()/insertBefore())、删除节点(remove() detach() empty() detach会将所绑定的事件和附加数据保留下来)、复制节点(clone())、替换节点(replaceWith()/relaceAll())、包裹节点(wrap() wrapAll())、属性操作(attr() removeAttr())、样式操作(addClass() removeClass() toggleClass() hasClass() is())、设置/获取html 文本 值(html() text() val())、遍历节点(children() next() prev() siblings() closet())
第四章 jQuery中事件和动画
- 加载DOM (见第一章)
- 事件绑定 bind(type, [,data], fn) type的类型有: blur、focus、load、resize、scroll、unload、click、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup。
- click、mouseover、mouseout常用事件有简写形式,去掉bind
- 合成事件: hover(enter, leave) toggle(fn1,fn2,…)
- 事件冒泡:事件按照DOM层次结构像水泡一样不断向上直至顶端。 事件对象:IE-DOM和标准DOM实现事件对象方法各不相同,导致不同浏览器获取事件对象比较困难。因此,jQuery在事件函数的参数中添加一个event,事件处理完后,event就被销毁。 停止事件冒泡: event.stopPropagation()。 阻止默认行为:event.preventDefault() / return false。事件捕获:jQuery不支持事件捕获。 事件对象的属性: event.type event.stopPropagation() event.preventDefault() event.target(获取触发事件的元素) event.pageX/Y(光标相对页面的X/Y坐标) event.which(鼠标单击事件中的左,中,右键)
- 移除事件: unbind()
- 模拟操作: trigger() 可以是常用事件类型,也可以是自定义事件,同时可以传递数据
- 其他方法: bind同时绑定多个事件、添加事件命名空间
- jq动画: show()/hide() fadeIn()/fadeOut() 透明度 slideUp()/slideDown() 改变元素高度进行隐藏显示 3种速度 slow normal fast为0.6s、0.4s、0.2s
- 自定义动画:animate(params,speed,callback) 多层动画按顺序执行(多个animate) callback适用于jq所有的动画效果方法。
- 停止动画 stop() 是否处于动画状态 is(":animated") 延迟动画delay()
- 其他四个交互动画 toggle(speed, callback) slideToggle(speed,[easing],[callback]) fadeTo(speed,opacity,[callback]) fadeToggle(speed,[easing],[callback])
第五章 jQuery对表单、表格的操作以及更多应用
表单标签 处理表单数据所存服务器url和提交方法 action ,method
表单域
表单按钮
表单验证
第六章 jQuery与Ajax的应用
- ajax优势:不需要插件、优秀的用户体验(几部刷新)、提高web程序性能(按需发送)、减轻服务器带宽负担。 不足:浏览器对XHR睡醒支持不够、破坏浏览器前进后退的正常功能、seo支持不足、开发调试工具不足
- XMLHttpRequest对象 发送异步请求、接收响应、执行回调
if(window.ActiveXObject) { //IE5 IE6
xmlHttpReq = new ActiveXObject('Microsoft.XMLHTTP');
}else if(window.XMLHttpRequest) {
xmlHttpReq = new XMLHttpRequest()
}
- 步骤 open() send() onreadystatechange readyState status responseText
- jQuery中的ajax $.ajax()最顶层 第二层是load() $.get() $.post()
最后
以上就是威武爆米花为你收集整理的js jq基础知识js、jq初始化页面以下部分为锋利的jQuery读后总结的全部内容,希望文章能够帮你解决js jq基础知识js、jq初始化页面以下部分为锋利的jQuery读后总结所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复