js专题

zoukankan html css js c++ java

js专题
Javascript学习专题
第一天
Js的语法模式：

<html>
<body>
<scripttype="text/javascript">

</script>
<script type=“text/javascript“ src=“a.js”>
</script>
</body>
相关解释：
引入方式：第一种是嵌套引入；<script type="text/javascript">。。。。。</script>
                   第二种是文件引入：<script type=“text/javascript“ src=“a.js”>
写法特点：
每句语法结束使用分号；类似PHP
黄色部分语法说明档浏览器不支持JS时将
不被执行、其他时候不受影响

语法特点：
定义变量的格式:var 变量[=值]
         例证： var a;
var b , c ;
var d = 3;
var e = d;
备注：连接符使用+ 例如 var a=”2”+”3”那么a的值是23

常用的提示框：
alert( n);警告框无返回值
confirm(n);确认框（选择）返回布尔值
prompt(n,v);会话框（需要输入字符）返回字符串

第二天

Html与js的交互事件

<input type=“text” size=“30” id=“php100”onclick=“alert(‘php100’)">

常用事件：
onClick              点击事件
onChange        改变内容事件
onBlur               失去焦点
onFocus 获得焦点
onSubmit         点击submit按钮
onMouseOver         获得鼠标
onMouseOut 离开鼠标
Onload             自动载入

第三天

获得表单里面的各类属性
格式：document.表单名.框体名.框体属性.属性类型
例证：
<form action=“” name=“fm” />
<input type=“text” name=“u” />
<input type=“checkbox” name=“s” />
</form>
document.fm.u.value 获得值
document.fm.u.value.length 获得值的长度
document.fm.s.checked 获得

div的标签获得
document.getelementById(id名称).属性.属性类型

例证；
Htm文本
<divid=“uu”>1111111<b>222</b></div>
document.getelementById(“uu”).innerHTML
图片类文件;
<img src=“1.gif” id=“uu”>
document.getelementById(“uu”).src
标签属性值
<div id=“uu”style="bground:red">
document.getelementById(“uu”). Style.bground

js输出的几种例子：
```
form表单的输出:
js部分
<script type="text/javascript">
//把值赋值到di=inners的节点里面：
document.getElementById("inners").innerHTML = "<input type='text' name='ip' value='"+ip+"'  />";
</script>
输出部分：
<div id="inners" class="inners"></div>

/********-****/
<script type="text/javascript">
//把值赋值到id=inners的input里面：
document.getElementById("src").setAttribute('value', ip);

</script>
输出部分：value=ip
<input type="hidden" name='src'  value="" id="src" class="srcs"  />

div节点的输出

js部分
<script type="text/javascript">
//把值赋值到di=inners的节点里面：
document.getElementById("inners").innerHTML = '"+ip+"';
</script>
输出部分：ip的在div里面显示出来
<div id="inners" class="inners"></div>
```
第四天
Jquery的学习 js类库

引入方法：第一种方式文件引入；<script type="text/javascript"src="jquery-1.5.1.js"></script>
第二种嵌入式引入：
<scripttype="text/javascript">
$(document).ready(function(){
        $("button").click(function(){
                 $("p").hide();
                   });
         });
</script>

Jq的基本语法：
基础语法是：$(selector).action()
$符号定义 jQuery
选择符（selector）HTML 元素
jQuery 的 action() 执行对元素的操作

例证：$(this).hide() - 隐藏当前元素，this指当前元素
$("p").hide()- 隐藏所有<P>
$(".test").hide()- 隐藏所有 class="test"的段落
$("#test").hide()- 隐藏所有 id="test"的元素

基本语法;加载jq方法
$(document).ready(function(){
--- 相关代码----
});
//函数的相关载入类似window.onload但又有区别

1、Jquery选择器的各种用法
$(this) 当前元素
$("p") 所有<p>元素
$("input") 所有input元素
$(".intro") 所有class=“intro” 的元素
$("p.intro") 所有class="intro" 的<p>元素
$("#intro") id="intro" 的第一个元素
$("ul > li") ul下的所有li节点
$("ul li:first") 每个<ul> 的第一个<li> 元素
$("[href$='.jpg']") 所有带有以".jpg" 结尾的href 属性的属性
$("div#intro .head") id="intro" 的<div> 元素中的所有class="head" 的元素
$(li[a:contains('Register')]") 内容包含Register的<a>元素
$("input[@name=bar]") name是bar的<input>元素
$("input[@type=radio][@checked]") type是radio的<input>元素
$(“li”).not(“ul”) li下没有包含ul节点的节点元素
$("span[@id]") 包含id属性的<span>元素
$("[@id=span1]") id为span1的节点元素
2、Jquery事件器的介绍
$(selector).click() 被选元素的点击事件
$(selector).dblclick() 被选元素的双击事件
$(selector).focus() 被选元素的获得焦点事件
$(selector).mouseover() 被选元素的鼠标悬停事件
$(selector).css(); 被选元素的CSS事件
$(selector). hide(); 被选元素的隐藏事件
$(selector). show('slow'); 被选元素的显示事件

Jquery实现隐藏显示的功能：

$(selector).hide(speed,callback) //隐藏
$(selector).show(speed,callback) //显示
Speed是速度 slow fast具体时间微秒

$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000,function(){
$("p").show(1000);
});
});
});

$(selector).toggle(speed,callback) //切换功能
$(selector).slideDown(speed,callback) //向下滑动，并显示遮挡
$(selector).slideUp(speed,callback) //向上滑动，并隐藏遮挡
$(selector). slideToggle(speed,callback)//上下滑动，实现切换
$(selector). fadeOut(speed,callback) //变淡至空
$(selector). fadeIn(speed,callback) //变亮至全部
$(selector).fadeTo(speed,opacity,callback) //变淡至指定效果
$(selector).animate({params},duration,easing,callback)//动画

几个实例代码：
定时器和清除定时
```
</script>

var iTime

function aa()
{
    aaa.value += "pp";//往input里value写入pp
iTime=setTimeout("aa()",600);//600微妙执行一次

}
function bb()
{
if (iTime !="")
clearTimeout(iTime);//清除定时器
}
aa();

</script>

<input type = "text" id = "aaa" >
<input type = "button" value = "stop" id = "bb" onclick = "bb()">
```
jquery的几个实例代码：
```
<html>
<head>
//引入jq文件 使用的是谷歌连接
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){
	//隐藏p的内容
$("button.but").click(function(){
	$("p").hide("slow");
});
//显示p的内容
$("button#but2").click(function(){
	$("p").show("slow");
	});
	//往#sss的input里面赋值
$("button#but3").click(function(){
	$("#ss").attr("value","bbbbb");
	});
	//指定位置h2添加div信息
$("button#but4").click(function(){
	$("<div style=\"border:solid 2px #FF0000 \">动态创建的div</div>").appendTo("h2");
	});
	
	//自定位置添加div信息
$("button#but5").click(function(){
	 testDiv1.innerHTML += "<div style=\"border:solid 1px #FF0000\">输出到页面上值</div>";
	});
	//alert跳出框
$("button#but6").click(function(){
	 alert("attr(\"width\"):" + $("#testDiv").attr("width")); //undifined
            alert("css(\"width\"):" + $("#testDiv").css("width")); //auto(ie6) 或 1264px(ff)
            alert("width():" + $("#testDiv").width()); //正确的数值1264
            alert("style." +  $("#testDiv")[0].style.width ); //空值
	});
	//bind绑定触发事件
$("h2").bind("click", function(){
  alert( $(this).text() );
});

});
</script>

</head>

<body  >
<h2>This is a heading</h2>
<p >This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is another paragraph.</p>
<h2>This is a heading</h2>
<p >This is another paragraph.</p>
<p>This is another paragraph.</p>
<p>This is another paragraph.</p>
<p>This is another paragraph.</p>

<div class="testDiv1" id="testDiv1"></div>

 <div id="testDiv">
        测试文本</div>
<form>
<input type="text" class="ss" id="ss" value="aaa" width="100px">
</form>
<button type="button" class="but">1</button>
<button type="button" id="but2" >2</button>
<button type="button" id="but3" >3</button>
<button type="button" id="but4" >4</button>
<button type="button" id="but5" >5</button>

<button type="button" id="but6" >6</button>

<button type="button" id="but7"  >7</button>

<input type = "text" id = "aaa" >



</body>
</html>
```
查看全文

相关阅读:
转载（SQL Server 存储过程的分页）
学会了怎么样利用捕获异常提示数据库主键重复错误
 遇到.net加了验证控件的表单无法提交的问题
 过劳死IT界杀手 [注：该文属于转载，非原创],好可怕啊！
很喜欢的一些道理。
学会了在DropDownList的项里加多个空格
 好东东:asp.net利用多线程执行长时间的任务，客户端显示出任务的执行进度的示例
 javascript判断字符长度最好的方法
 layui中使用layverify进行非必填整数校验
 SuppressWarnings抑制警告的关键字

原文地址：https://www.cnblogs.com/y0umer/p/2809556.html

Javascript学习专题

第一天

1、Jquery选择器的各种用法