11、JQuery知识点总结
2016-03-22 17:12
609 查看
1、JQuery简介
JQuery 是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作
jQuery有下列特色:
跨浏览器的DOM元素选择
DOM巡访与更改:支持CSS 1-3
事件(Events)
CSS操纵
特效和动画(移动显示位置、淡入、淡出)
Ajax
延伸性(Extensibility)
工具:例如浏览器版本(已取消内置,改由jQuery Migrate plugin外挂提供)和
JavaScript插件
轻量级
DHTML DOM选择器与链式语法
经由jQuery的DHTML DOM选择器,可以更容易的操作在复杂的树状HTML中的任何DHTML DOM对象,并可用链式语法对同一对象的不同属性进行操作。例如:
相当于
查找HTML的<p>标签,且其class为"surprise"的DHTML DOM对象
将其Class属性多加上一个"ohmy"(通常是配CSS的定义做显示时的配色修改)
打开显示
CSS 1-3选择器:支持CSS选择器选定DOM对象。
跨浏览器:跨浏览器的AJAX解决方式,支持Internet Explorer 6.0+、Opera 9.0+、Firefox 2+、Safari 2.0+、Google Chrome 1.0+
简单:较其它JavaScript库更易于入门。
2、JQuery语法和运行在哪
JQuery的语法是为HTML的元素编制的,可以对元素进行操作的;基础语法是:$(selector).action() 美元符号定义jQuery,selector(选择符)查询和查找HTML元素,action执行对HTML元素的操作
所有jQuery操作都在document ready之后,这是为了防止在文档没有全部加载之前运行jQuery代码
如果文档没有全部加载,操作有可能失败,比如:
试图隐藏一个不存在的元素
获得未完全加载的图像的大小
3、jQuery选择器
在HTML DOM术语中,选择器允许对DOM元素组和单个DOM元素进行操作。
分为元素选择器、属性选择器、CSS 选择器
①元素选择器:
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
②属性选择器:
jQuery 使用 XPath 表达式(XPath 是一门在 XML 文档中查找信息的语言。XPath 可用来在 XML 文档中对元素和属性进行遍历)来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素
JQuery 是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作
jQuery有下列特色:
跨浏览器的DOM元素选择
DOM巡访与更改:支持CSS 1-3
事件(Events)
CSS操纵
特效和动画(移动显示位置、淡入、淡出)
Ajax
延伸性(Extensibility)
工具:例如浏览器版本(已取消内置,改由jQuery Migrate plugin外挂提供)和
each函数。
JavaScript插件
轻量级
DHTML DOM选择器与链式语法
经由jQuery的DHTML DOM选择器,可以更容易的操作在复杂的树状HTML中的任何DHTML DOM对象,并可用链式语法对同一对象的不同属性进行操作。例如:
$("p.surprise").addClass("ohmy").show("slow");
相当于
查找HTML的<p>标签,且其class为"surprise"的DHTML DOM对象
将其Class属性多加上一个"ohmy"(通常是配CSS的定义做显示时的配色修改)
打开显示
CSS 1-3选择器:支持CSS选择器选定DOM对象。
跨浏览器:跨浏览器的AJAX解决方式,支持Internet Explorer 6.0+、Opera 9.0+、Firefox 2+、Safari 2.0+、Google Chrome 1.0+
简单:较其它JavaScript库更易于入门。
2、JQuery语法和运行在哪
JQuery的语法是为HTML的元素编制的,可以对元素进行操作的;基础语法是:$(selector).action() 美元符号定义jQuery,selector(选择符)查询和查找HTML元素,action执行对HTML元素的操作
$(document).ready(function(){ --- jQuery functions go here ---- });
所有jQuery操作都在document ready之后,这是为了防止在文档没有全部加载之前运行jQuery代码
如果文档没有全部加载,操作有可能失败,比如:
试图隐藏一个不存在的元素
获得未完全加载的图像的大小
3、jQuery选择器
在HTML DOM术语中,选择器允许对DOM元素组和单个DOM元素进行操作。
分为元素选择器、属性选择器、CSS 选择器
①元素选择器:
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
②属性选择器:
jQuery 使用 XPath 表达式(XPath 是一门在 XML 文档中查找信息的语言。XPath 可用来在 XML 文档中对元素和属性进行遍历)来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素
相关文章推荐
- jquery导航二级栏目下拉
- jQuery事件
- jquery easyui 的datagrid,页面获取不显示在页面的参数字段
- JQuery监听组合按键
- jquery easyuid的subgrid子表点击一行的某个字段,不能首次获取到值(解决办法)
- jquery 获取url参数插件实例代码
- jquery的ajax()函数传值中文乱码解决方法介绍
- jquery.validata1.11怎么支持metadata
- 图片按钮来代替文件上传控件(Freemaker,JQuery,HTML,CSS,JavaScript)
- 基于jquery实现无限级树形菜单
- jQuery 验证实例(shopnc二次开发)
- jQuery插件开发
- jQuery中Ajax事件beforesend及各参数含义1
- jQuery中Ajax事件beforesend及各参数含义
- jQuery之bind()、live()和delegate()的小结
- jQuery中$(document).ready(function(){})函数的作用
- jquery触摸转盘插件 Sky jQuery Touch Carousel
- jQuery插件---Validator Plugin
- jquery仿QQ登录账号选择下拉框效果
- jquery实现鼠标悬浮停止轮播特效