JS基础

通过 id 查找 HTML 元素

var x=document.getElementByIdx_x("intro");

查找 id="main" 的元素，然后查找 "main" 中的所有<p>元素：

var x=document.getElementByIdx_x("main");
var y=x.getElementsByTagName_r("p");

写入html

document.write("<p>My First JavaScript</p>");

//绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

改变 HTML 内容

x.innerHTML="Hello JavaScript";  

颜色

x.style.color="#ff0000";

元素的值

x.value

创建数组

var cars=new Array();

键值对形式

var person={
firstname : "Bill",
lastname  : "Gates",
id       :  5566
};

寻址

name=person.lastname;
name=person["lastname"];

带参函数

myFunction(argument1,argument2)

function myFunction(name,job)
{
          ;
}

有返回值函数

function myFunction()
{
var x=5;
return x;
}

换行

</br>

改变 HTML 属性

document.getElementByIdx_x(id).attribute=new value

改变元素样式

document.getElementByIdx_x("p2").style.color

鼠标移动
onmouseover鼠标放上面 和 onmouseout 鼠标离开

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick事件。

创建元素

var para=document.createElement_x("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

删除元素

var parent=document.getElementByIdx_x("div1");
var child=document.getElementByIdx_x("p1");
parent.removeChild(child);

常用方法：

var child=document.getElementByIdx_x("p1");
child.parentNode.removeChild(child);

提示框

var name=prompt("请输入您的名字","Bill Gates")
  if (name!=null && name!="")
    {
   document.write("你好！" + name + " 今天过得怎么样？")
    }
  }

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

确认框

var r=confirm("Press a button!");
if (r==true)
  {
       ;
  }
else
  {
       ;
  }
}

如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。

定时

var t1=setTimeout("document.getElementByIdx_x('txt').value='2秒'",2000)
setTimeout()

      未来的某时执行代码
clearTimeout()
      取消setTimeout()

元素调用方法

$(this).hide()
    //演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
$("#test").hide()
    //演示 jQuery hide() 函数，隐藏 id="test" 的元素。
$("p").hide()
    //演示 jQuery hide() 函数，隐藏所有 <p> 元素。
$(".test").hide()
    //演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。 

jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") //选取 <p> 元素。
$("p.intro")// 选取所有 class="intro" 的 <p> 元素。
$("p#demo")// 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") //选取所有带有 href 属性的元素。
$("[href='#']")// 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") //选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") //选取所有 href 值以 ".jpg" 结尾的元素。

取某个属性的值

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

同时设置多个属性

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
});

在被选元素的结尾插入内容。（还在这个元素内）

$("p").append("Some appended text.");

在被选元素的开头插入内容。（还在这个元素内）

$("p").prepend("Some prepended text.");

在被选元素的前后插入内容（不在这个元素内）

$("img").after("Some text after");
$("img").before("Some text before");

remove() - 删除被选元素（及其子元素）可以接受参数过滤被删的元素
empty() - 从被选元素中删除子元素

向元素添加属性

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

删除指定的 class 属性：

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

返回指定的 CSS 属性的值

$("p").css("background-color");

设置指定的 CSS 属性

$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});

感谢W3C提供教程