css+js 学习记录

最新推荐文章于 2024-09-09 00:56:59 发布

gz2008gz

最新推荐文章于 2024-09-09 00:56:59 发布

阅读量533

点赞数

分类专栏：技术开发文章标签： css function exception input button div

本文链接：https://blog.csdn.net/gz2008gz/article/details/4045110

版权

技术开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

==================
div+css排版观念：
<div id="container">
<div id="banner"></div>
<div id="content"></div>
<div id="links"></div>
<div id="footer"></div>
</div>

==========================================
使用 DOM (通过一个节点可以访问整个节点)
访问节点 1. getElementsByTagName("li");
    2. getElementById("id");
父子节点
节点属性
创建节点 1.
<script language="javascript">
function createp(){
  var op=document.createElement("p");
  var otext=document.createTextNode(" i love you!");
  op.appendChild(oText);
  document.body.appendChild(op);
}
</script>
=================================================================
innerHTML 该属性可以得到某个标记之间的所有内容，包括代码本身；
    o.innerHTML += text;
====================

表格的动态添加、删除
var otr = document.getElementById("tableId").insertRow(2);
var atext = new Array();
atext[0] = document.createTextNode("fresh");
atext[1] = document.createTextNode("fresh");
atext[2] = document.createTextNode("fresh");
atext[3] = document.createTextNode("fresh");
atext[4] = document.createTextNode("fresh");
for(var i=0;i<atext.length;i++)
{
var otd = otr.insertCell(i);
otd.appendChild(atext[i]);
}

var oTable = document.getElementById("tableId");
oTable.deleteRow(2); //删除一行，单元格自动补齐
oTable.rows[2].deleteCell(1);

==============
出错框：
window.onerror = function()
{ alert("出错啦！"); }

<body οnlοad="nonExistent()"> //加载一个不存在的 function();
=================
try catch

try{
alert("this is an example");
alert(fresheggs);
}
catch(exception){
var sError = "";
for(var i in exception)
sError += i+ ":" +exception[i]+"/n";
alert(sError);
}

================
焦点聚焦

onmouseover = " this.focus() " οnfοcus= " this.select()"

================

textarea 的 length (达到 length 后就不能再输入了)

function lessthan(otext){
retrun otext.value.lenth<otext.getAttribute("maxlength");
}
注：<textarea maxlength = "50" onkeypress = "return lessthan(this);" >

========================

jquery 使用

=================
attr(name); //方法可以获取标记的属性

var stitle = $("em:eq(1)").attr("title"); //所有em中的第二个em标记的属性值获取
attr("name",value); //设置标记的属性

$("button:gt(0)").attr("disabled","disabled"); //第0个按钮之后的属性值的改变

=====================

addClass()方法添加样式

$("div").addClass("myclass");
============================
动态切换 css 样式

$("p").click(function(){
$(this).toggleClass("highlight");

}
)

==============
text() 与 html()

var sString = $("p:first").text(); //获取纯文本
$("p:last").html(sString); //获取含有标签的文本

==============
克隆函数 clone()

$("img:eq(0)").clone().appendTo($("p")); //将第一个图片克隆到底下所有的 p 标签后
$("img:eq(1)").clone().appendTo($("p:eq(0)")); //将第二个图片克隆到底下第一个 p 标签的后面

===============
事件绑定 bind()

$("img")
    .bind("click",function(){      //绑定click事件，实现给 show 标签添加点击事件1 2 3
$("#show").append("<div>点击事件1</div>")；
    .bind("click",function(){
$("#show").append("<div>点击事件2</div>")；
    .bind("click",function(){
$("#show").append("<div>点击事件3</div>")；
})

============
    var function1;
$("img")
    .bind("click",function1 = function(){      //赋给函数变量绑定click事件
$("#show").append("<div>点击事件1</div>")；
    .bind("click",function(){
$("#show").append("<div>点击事件2</div>")；
    .bind("click",function(){
$("#show").append("<div>点击事件3</div>")；
})
移除事件 unbind("click",function1())   //可以移除点击事件1
===========================
元素的显示和影藏

show() 和 hide()
$(function(){
    $("input:first").click(function(){
$("p").hide(); //影藏
})
$(function(){
    $("input:last").click(function(){
$("p").show(); //显示
})
})

   <input type="button" value="hide">
   <input type="button" value="show">
===========================
渐变动画

$(function(){
    $("input:first").click(function(){
$("img").hide(3000); //影藏
})
$(function(){
    $("input:last").click(function(){
$("img").show(2000); //显示
})
})

   <input type="button" value="hide">
   <input type="button" value="show">
<p><img src="01.gif"></p>