day14—JQuery编程基础
2016-03-13 17:40
731 查看
JQuery
1、什么是jQuery
jQuery是一个优秀的JavaScript框架,一个轻量级的JavaScript类库。jQuery的核心理念是Write less,Do more。
使用jQuery可以兼容各种浏览器,方便的处理HTML、Events、动画效果等,并且方便的为网站提供AJAX交互。
jQuery发布于2006年,一经提出就吸引很多人参与到丰富这个类库的开发之中。jQuery写法的简单性、易用性大
大提升了人们对它的使用。并且完备的文档说明也是其易用的一个体现。使用jQuery时可以做到HTML页面代码和控
制的分离,彻底的将控制代码放入一个单独的文件。jQuery的版本已经从1.x到了2.x,但是从2.x开始将不再支持IE6,7,8。文件的下载可以去jquery.com下载。
2、JQuery操作:利用选择器定位节点
jQuery操作的第一步一定是要先找到这个对象,也就是定位节点。这要借助于其强大的选择器。
为了定位一个id属性为d1的div节点,使用的选择器写法如$(“div”)或$(“#d1”),这都是定位的一种写法,这个$符号
就是jQuery中最基本的符号,搭配上不同的选择器最后就会成为包装后的jQuery对象。
jQuery解决问题的第二步就是调用类库中提供的方法,比如,为了修改div中文本的字体大小,在成功定位以后
通过css方法就可以实现。
典型的jQuery编程方式就是分这两步,定位后调用。定位可以创建jQuery对象,调用方法会对jQuery对象施加动作。
3、JQuery对象和DOM对象可以互相转化:
DOM对象 -> jQuery对象
DOM对象向jQuery对象的转变很容易,外面追加$和圆括号即可。
jQuery对象 -> DOM对象
jQuery对象向DOM对象转化,通过调用get方法加参数值0即可
4、jQuery选择器
jQuery选择器是一种类似CSS选择器的特殊说明符号,能够帮助jQuery定位到要操作的元素上,使用了选择器可
以帮助HTML实现内容与行为的分离。只需要在元素上加上id属性。
jQuery的选择器提供了很多种形式,按照定位的不同特点,将其分类如下:
1.基本选择器
2.层级选择器
3.过滤选择器
4.表单选择器
基本选择器#id: id选择器
#id
利用id属性的唯一性进行定位,这是最快的定位方式,尽量使用Id选择器。
基本选择器.class:类选择器
.class
根据节点的class属性进行定位。
基本选择器element:元素选择器
依据HTML标记进行区分,满足条件的标记都会被返回。
合成选择器:
合成选择器,即所有选择器的合集作为定位的全部元素。
层次选择器: select1 空格 select2
根据select1找到节点后,再去查找子节点中符合select2选择器的节点,这种写法很重要,很常用。
层次选择器: select1 > select2
只查找直接子节点,不查找间接子节点。
层次选择器: select1 + select2
+号表示下一个兄弟节点
层次选择器: select1 ~ select2
“~”代表下面的所有兄弟节点。
过滤选择器—基本过滤选择器
过滤选择器—内容过滤选择器
可见性过滤选择器:
根据元素在页面中的可见属性进行过滤,主要是对hidden属性和visible属性的判断。
属性过滤选择器:
属性过滤器会对标记的属性进行判断,符合条件的元素会作为返回的对象
子元素过滤选择器:
子元素过滤选择器会根据子元素的位置的数值来进行筛选。格式为 :nth-child(index/even/odd)。
表单选择器:
表单选择器是根据表单元素特有的元素名进行定位的一种方式,所以这些选择器包括
使用的规则和以上各选择器一致。$(“:input”)就会返回所有的input输入框,大多数情况下,表单选择器会和其他选
择器进行配合来定位元素。
5、jQuery操作DOM-查询:
html()
读取或修改节点的HTML内容的操作方式。与DOM对象的innerHTML的作用一致。
text()
读取或修改节点中的文本内容,会过滤掉标记内容,与innerText的作用基本一致,但innerText在不同浏览器中写法不同,在jQuery中则
使用text()方法即可。
val()
读取或修改节点的value属性值,也就是针对表单元素中有value属性的哪些元素的操作。
attr()
读取或设置修改节点的属性。这个方法会更宽泛一些,可以修改元素的任何属性。
6、jQuery操作DOM-创建:
创建DOM节点的语法:
使用$符号将HTML标记的字符串文本括起来,即创建了DOM节点,如$(html)。
大多数时候创建后的节点需要放入文档中,使用到后续的一些方法可以实现节点的插入
简写形式如 $(‘body’).append(‘<div>…</div>”)
7、jQuery操作DOM-插入:
插入DOM节点的方法
append方法会将DOM节点作为最后一个孩子节点添加进来
prepend方法将DOM节点作为第一个孩子节点添加进来
after方法将DOM节点作为下一个兄弟节点添加进来
before方法将DOM节点作为上一个兄弟节点添加进来
8、jQuery操作DOM-删除:
删除DOM节点的方法
remove()可以移除DOM
remove(selector)可以按选择器定位后删除
empty()清空节点
jQuery操作DOM-样式操作:
修改对象样式的方法如下
1、什么是jQuery
jQuery是一个优秀的JavaScript框架,一个轻量级的JavaScript类库。jQuery的核心理念是Write less,Do more。
使用jQuery可以兼容各种浏览器,方便的处理HTML、Events、动画效果等,并且方便的为网站提供AJAX交互。
jQuery发布于2006年,一经提出就吸引很多人参与到丰富这个类库的开发之中。jQuery写法的简单性、易用性大
大提升了人们对它的使用。并且完备的文档说明也是其易用的一个体现。使用jQuery时可以做到HTML页面代码和控
制的分离,彻底的将控制代码放入一个单独的文件。jQuery的版本已经从1.x到了2.x,但是从2.x开始将不再支持IE6,7,8。文件的下载可以去jquery.com下载。
2、JQuery操作:利用选择器定位节点
jQuery操作的第一步一定是要先找到这个对象,也就是定位节点。这要借助于其强大的选择器。
为了定位一个id属性为d1的div节点,使用的选择器写法如$(“div”)或$(“#d1”),这都是定位的一种写法,这个$符号
就是jQuery中最基本的符号,搭配上不同的选择器最后就会成为包装后的jQuery对象。
jQuery解决问题的第二步就是调用类库中提供的方法,比如,为了修改div中文本的字体大小,在成功定位以后
通过css方法就可以实现。
典型的jQuery编程方式就是分这两步,定位后调用。定位可以创建jQuery对象,调用方法会对jQuery对象施加动作。
3、JQuery对象和DOM对象可以互相转化:
DOM对象 -> jQuery对象
DOM对象向jQuery对象的转变很容易,外面追加$和圆括号即可。
function f( ){ var obj = document.getElementById(‘d1’); //DOM -> jQuery对象 var $obj = $(obj); //可以调用JQuery方法了 $obj.html(‘hello jQuery’); }
jQuery对象 -> DOM对象
jQuery对象向DOM对象转化,通过调用get方法加参数值0即可
function f( ){ var $obj = $(‘#d1’); //jQuery对象 -> DOM var obj = $(obj).get (0); //可以调用DOM方法了 obj.innerHTML = ‘hello jQuery’; }
4、jQuery选择器
jQuery选择器是一种类似CSS选择器的特殊说明符号,能够帮助jQuery定位到要操作的元素上,使用了选择器可
以帮助HTML实现内容与行为的分离。只需要在元素上加上id属性。
jQuery的选择器提供了很多种形式,按照定位的不同特点,将其分类如下:
1.基本选择器
2.层级选择器
3.过滤选择器
4.表单选择器
基本选择器#id: id选择器
#id
利用id属性的唯一性进行定位,这是最快的定位方式,尽量使用Id选择器。
function f1(){ $('#d1').css('font-size','60px'); } <div id="d1">hello jQuery</div> <div class="s1">hello prototype</div> <p class="s1">hello dojo</p> <a href="javascript:;" onclick="f1();">ClickMe</a>
基本选择器.class:类选择器
.class
根据节点的class属性进行定位。
function f2(){ $('.s1').css('font-size','60px'); } <div id="d1">hello jQuery</div> <div class="s1">hello prototype</div> <p class="s1">hello dojo</p> <a href="javascript:;" onclick="f2();">ClickMe</a>
基本选择器element:元素选择器
依据HTML标记进行区分,满足条件的标记都会被返回。
function f3(){ $('div').css('font-size','60px'); } <div id="d1">hello jQuery</div> <div class="s1">hello prototype</div> <p class="s1">hello dojo</p> <a href="javascript:;" onclick="f3();">ClickMe</a>
合成选择器:
合成选择器,即所有选择器的合集作为定位的全部元素。
function f4(){ $('#d1,p').css('font-size','60px'); //寻找ID为d1的<div>和他的子节点<p>标签 } <div id="d1">hello jQuery</div> <div class="s1">hello prototype</div> <p class="s1">hello dojo</p> <a href="javascript:;" onclick="f4();">ClickMe</a>
层次选择器: select1 空格 select2
根据select1找到节点后,再去查找子节点中符合select2选择器的节点,这种写法很重要,很常用。
function f1(){ $('#d1 div').css('font-size','80px'); //查找ID为d1的div下的<div> } <div id="d1"> <div id="d2">hello java</div> <div id="d3"> <div id="d4" style="font-size:40px;">hello c</div> </div> <div id="d5">hello red</div> <p>hello perl</p> </div> <a href="javascript:;" onclick="f1();">ClickMe</a>
层次选择器: select1 > select2
只查找直接子节点,不查找间接子节点。
function f2(){ $('#d1>div').css('font-size','80px'); //查找ID为d1的<div>下的子节点<div>,再下一层则不查找 } <div id="d1"> <div id="d2">hello java</div> <div id="d3"> <div id="d4" style="font-size:40px;">hello c</div> </div> <div id="d5">hello red</div> <p>hello perl</p> </div> <a href="javascript:;" onclick="f2();">ClickMe</a>
层次选择器: select1 + select2
+号表示下一个兄弟节点
function f3(){ $('#d3+p').css('font-size','80px'); //查找ID为d3的<div>的下一个兄弟节点<p> } //如果d3的下一个兄弟节点不是<p>则无效 <div id="d1"> <div id="d2">hello java</div> <div id="d3"> <div id="d4" style="font-size:40px;">hello c</div> </div> <div id="d5">hello red</div> <p>hello perl</p> </div> <a href="javascript:;" onclick="f3();">ClickMe</a>
层次选择器: select1 ~ select2
“~”代表下面的所有兄弟节点。
function f4(){ $('#d2~div').css('font-size','80px'); //查找ID为d2的<div>顺序之下的全部兄弟节点(同级别) } <div id="d1"> <div id="d2">hello java</div> <div id="d3"> <div id="d4" style="font-size:40px;">hello c</div> </div> <div id="d5">hello red</div> <p>hello perl</p> </div> <a href="javascript:;" onclick="f4();">ClickMe</a>
过滤选择器—基本过滤选择器
过滤选择器—内容过滤选择器
可见性过滤选择器:
根据元素在页面中的可见属性进行过滤,主要是对hidden属性和visible属性的判断。
function f1(){ //"slow" "normal" "fast" 是固定速度 $('div:hidden').show("slow"); } //也可以用具体数值来控制速度 function f2(){ $('div:visible').hide(800); } <div>hello jQuery</div> <div style="display:none;">hello java</div> <a href="javascript:;" onclick="f1();">ClickMe1</a> <a href="javascript:;" onclick="f2();">ClickMe2</a>
属性过滤选择器:
属性过滤器会对标记的属性进行判断,符合条件的元素会作为返回的对象
function f1(){ $('div[id]').css('font-size','80px'); } function f2(){ $('div[id=d2]').css('font-size','80px'); } function f3(){ $('div[id!=d2]').css('font-size','80px'); }
子元素过滤选择器:
子元素过滤选择器会根据子元素的位置的数值来进行筛选。格式为 :nth-child(index/even/odd)。
function f1(){ $('ul li:eq(1)').css('font-size','60px'); } function f2(){ $('ul li:nth-child(even)').css('font-size','60px'); } //Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词
表单选择器:
表单选择器是根据表单元素特有的元素名进行定位的一种方式,所以这些选择器包括
使用的规则和以上各选择器一致。$(“:input”)就会返回所有的input输入框,大多数情况下,表单选择器会和其他选
择器进行配合来定位元素。
5、jQuery操作DOM-查询:
html()
读取或修改节点的HTML内容的操作方式。与DOM对象的innerHTML的作用一致。
text()
读取或修改节点中的文本内容,会过滤掉标记内容,与innerText的作用基本一致,但innerText在不同浏览器中写法不同,在jQuery中则
使用text()方法即可。
val()
读取或修改节点的value属性值,也就是针对表单元素中有value属性的哪些元素的操作。
attr()
读取或设置修改节点的属性。这个方法会更宽泛一些,可以修改元素的任何属性。
6、jQuery操作DOM-创建:
创建DOM节点的语法:
使用$符号将HTML标记的字符串文本括起来,即创建了DOM节点,如$(html)。
大多数时候创建后的节点需要放入文档中,使用到后续的一些方法可以实现节点的插入
简写形式如 $(‘body’).append(‘<div>…</div>”)
7、jQuery操作DOM-插入:
插入DOM节点的方法
append方法会将DOM节点作为最后一个孩子节点添加进来
prepend方法将DOM节点作为第一个孩子节点添加进来
after方法将DOM节点作为下一个兄弟节点添加进来
before方法将DOM节点作为上一个兄弟节点添加进来
8、jQuery操作DOM-删除:
删除DOM节点的方法
remove()可以移除DOM
remove(selector)可以按选择器定位后删除
empty()清空节点
jQuery操作DOM-样式操作:
修改对象样式的方法如下
相关文章推荐
- 又一个ajax实例,结合jQuery
- 什么是事件起泡?用jQuery阻止事件起泡
- jquery+struts2+json省市县三级联动
- jQuery的$.getJSON方法在IE浏览器下失效的解决方案
- etmvc+jQuery EasyUI Highcharts实现柱状图
- 菜鸟的Jquery validate入门
- jQuery(二)
- jquery插件-表单验证插件-rules
- jquery插件-表单验证插件-validator对象
- 使用jQuery.form插件,实现完美的表单异步提交
- 使用jQuery操作HTML的table表格的实例解析
- jquery点击当前对象,并alert文本内容
- PHP——菜单及内容轮换(Jquery)
- 常用jquery插件资料
- Jquery Ajax 跨域之JSONP方式极简示例,服务端是.net的ashx
- python web框架企业实战详解(第六期)\第三课时-ajax&jquery&webpy
- 使用jQuery操作HTML的table表格的实例解析
- Jquery ajax data 格式问题
- jquery插件-表单验证插件-提示信息中文化与定制提示信息
- jquery购物车插件minicart.js