JQuery基础-4
JQuery动态操作事件
元素对象.bind(“事件名”,fn)—-动态的给指定的元素对象追加指定的事件及其监听的函数。
注意:js中的是一次添加,多次添加时覆盖的效果。jQuery是追加的效果,可以实现给一个事件添加不同的监听函数。
元素对象.unBind(“事件名”)—-移除指定的元素对象的指定事件
注意:js方式添加的事件不能移除。
元素对象.one(“事件名”,fn)—-给指定的元素对象添加一次性事件,事件被触发执行一次即失效。
注意:可以给事件添加多个一次函数,unBind可以用来解绑
页面载入事件
$(document).ready(function(){});
$(function(){});—-常用
window.onload = function () { }
页面载入成功后会调用传入的函数对象
注意:此方式可以给页面载入动态的增加多个函数对象,不会被覆盖。原生js载入事件多个函数对象会被覆盖
1234567891011121314151617181920212223242526272829303132333435363738394041424344454 ...
JQuery基础-3
JQuery操作元素的样式
使用css()
对象名.css(“属性名”)—-返回当前属性的样式值
对象名.css(“属性名”,”属性值”)—-增加、修改元素的样式
对象名.css({“样式名”:”样式值”,”样式名”:”样式值”……})—-使用json传参,提升代码书写效率。
相当于原生js中的对象名.style.属性名
使用addClass()
对象名.addClass(“类选则器名”)—-追加一个类样式
对象名.removeClass(“类选择器 名”)—-删除一个指定的类样式
相当于原生js中的对象名.className
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182<html> <head> <title>操作元素样式</title> <meta chars ...
JQuery基础-2
jQuery操作元素的属性
首先通过选择器获取到元素对象
获取
对象名.attr(“属性名”) —-返回当前属性值
注意此种方式不能获取value属性的实时数据,使用对象名.val()进行获取。
对象名.attr相当于原生的-元素对象名.getAttribute(“属性名”);获取的不是value属性的实时数据
val()方法返回获取匹配的元素集合中第一个元素的当前值。
修改
对象名.attr(“属性名”,”属性值”);
12345678910111213141516171819202122232425262728<html> <head> <title>jQuery操作元素的属性</title> <meta charset="UTF-8"/> <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script> < ...
JQuery基础-1
JQuery的概念
问题:使用js完成对网页的操作,代码的书写量比较大。 js中对网页操作提供的方式过 于简单,造成获取和操作HTML元素对象过于麻烦。
解决: 使用jQuery
结论: 其实jQuery就是讲常用的js操作封装了起来。jQuery是js的一个框架。
内容:jQuery本质上还是js,基本语法和js一致。将js的DOM操作重新封装 整合了。
学习:
1、如何使用JQuery完成网页操作。
2、jquery的特点 jQuery是js的一个框架 jQuery提供了多种多样的选择器 jQuery支持主流的各种版本的浏览器 jQuery使用起来特别简单
3、jQuery的使用 jQuery的选择器 jQuery的DOM操作 jQuery的事件和动画
使用:
使用script标签的外部引用,将JQuery文件引用进来。方可正常使用JQuery
<-script src=”JQuery路径” type=”text/javascript” charset=”utf-8”><-/script>
JQuery选择器
基本选择器
全部选择 ...
JavaScript基础-16
js操作表格学习
删除行:
行对象.rowIndex—-返回行对象的角标
表格对象.deleteRow(要删除的行对象的角标);
修改单元内容
单元格对象.innerHTML=”新的内容”;
行对象.cells—-返回当前行所有的单元格对象的数组
注意:
角标从零开始
具体方法看代码(以上不完全)
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511 ...
JavaScript基础-15
event对象学习
event对象获取鼠标坐标
event对象获取键盘值
详细属性看W3c
1234567891011121314151617181920212223242526272829303132333435363738<html> <head> <title>event对象学习</title> <meta charset="UTF-8"/> <style type="text/css"> #showdiv{ width: 300px; height: 300px; border: solid 1px; } </style> <script type="text/javascript"> function getMouse(event){ //获取event对象 var eve=event || window.event;//因为浏 ...
js表单校验案例
校验思路,通过事件绑定获取校验标签中的属性值,进行判断是否符合我们书写的正则表达式的规则的正确值,校验标签的后面标签则进行对判断结果的表达。
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781 ...
JavaScript基础-14
js操作form表单
获取form表单对象
使用id:var fm=document.getElementById(“fm”);
使用name属性:var frm=document.frm;—-少见
获取form下的所有表单元素对象集合:fm.elements
form表单的常用方法
表单对象.submit();—-提交表单数据。
form的属性操作:
表单对象名.action=”新的值”—-动态的改变数据的提交路径
表单对象名.method=”新的值”—-动态的改变提交方式(get/post)
js表单元素的通用属性
只读模式:
readonly=”readonly”—-不可以更改,但是数据可以提交
关闭模式:
disabled=”disabled”—-不可以进行任何的操作,数据不会提交。
12345678910111213141516171819202122232425262728293031323334<html> <head> <title>js操作form表单</title> <meta charset ...
JavaScript基础-13
操作HTLML的文档结构,就是通过js动态的添加,删除标签,标签属性,标签绑定事件···
js操作HTML文档结构-innerHTML
元素对象.innerHTML=div.innerHTML+”内容”—-增加节点
元素对象.innerHTML=””—-删除所有子节点
父节点.removeChild(子节点对象)—-删除指定的子节点。
123456789101112131415161718192021222324252627282930<html> <head> <title>js操作元素的文档结构</title> <meta charset="UTF-8"/> <!--声明js代码域--> <script type="text/javascript"> function testAdd(){ //获取元素对象 var showdiv=document.getElementById("showdiv"); ...
JavaScript基础-12
js操作HTML元素属性
首先获取元素对象
操作元素属性
获取:
元素对象名.属性名。返回当前属性的属性值。—-固有
元素对象名.getAttribute(“属性名”);返回自定义属性的值—–自定义
修改
元素对象名.属性名=属性值
元素对象名.setAttribute(“属性名”,”属性值”);//修改自定义属性的值—-自定义
注意:
尽量的不要去修改元素的id值和name属性值。
使用自定义方式获取固有属性内容,value的值获取的是默认值,不能够获取到实时的用户数据。
自定义的属性的获取和修改使用的方法和格式同servlet中的相似123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960<html> <head> <title>js操作HTML的元素属性</title> <meta charset="UTF-8"/> ...