发表于： 2017-01-09 21:03:10
1 1200
今天完成的事情：学习了 jq js的复习
明天计划的事情：任务4 然后看懂并熟练运用把
遇到的问题：基础看完了=。= 流水账翻了遍
收获：
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);//删除p1要先获取div1 然后获取p1 然后删除
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
document.getElementById("myBtn").onclick=function(){sss()};
function sss()
{
document.getElementById("demo").innerHTML=Date();
}这种用法
document.write(Date());//显示当前的时间（标准的中国时间）
cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;//还有这样的用法
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}
</script>
function myFunction()
{
var x="",i=0;
for (i=0;i<10;i++)
{
if (i==3)
{
continue;//跳过break 直接到这暂停
}
x=x + "The number is " + i + "<br>";
}
function myFunction()
{
var x="",i=0;
do
{
x=x + "The number is " + i + "<br>"; do/while 循环。该循环至少会执行一次，即使条件是 false，隐藏代码块会在条件被测试前执行
i++;
}
while (i<5)
document.getElementById("demo").innerHTML=x;
}
function myFunction()
{
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person)//循环遍所有的
{
txt=txt + person[x];
}
document.getElementById("demo").innerHTML=txt;
}
for - 循环代码块一定的次数
- for/in - 循环遍历对象的属性
- while - 当指定的条件为 true 时循环指定的代码块
- do/while - 同样当指定的条件为 true 时循环指定的代码块
default 关键词
请使用 default 关键词来规定匹配不存在时做的事情：
实例
如果今天不是周六或周日，则会输出默认的消息：
var day=new Date().getDay();
switch (day)
{
case 6:
x="Today it's Saturday";
break;
case 0:
x="Today it's Sunday";
break;
default:
x="Looking forward to the Weekend";
}
function myFunction()
{
var x="";
var time=new Date().getHours();
if (time<20)
{
x="Good day";//时间小于20时的时候跳出goodday
}
var x="";
var time=new Date().getHours();//设定时间参数？
if (time<20)
{
x="Good day";
}
document.getElementById("demo").innerHTML=x;
x=5+5;
document.write(x);
x="5"+"5";
document.write(x);
x=5+"5";
document.write(x);
x="5"+5;
document.write(x);
规则是：
如果把数字与字符串相加，结果将成为字符串
var message="Hello world!";
var x=message.toUpperCase();
在以上代码执行后，x 的值是：
HELLO WORLD!
var carname=new String;
var x= new Number;
var y= new Boolean; //新变量可以用newvar cars= new Array;
var person= new Object;
document.write(person.lastname + "<br />");
document.write(person["lastname"] + "<br />");//获取值的2种方式
当您向变量分配文本值时，应该用双引号或单引号包围这个值。
当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理
<h1>My First Web Page</h1>
<p>My First Paragraph.</p>
<button onclick="myFunction()">点击这里</button>
<script>
function myFunction()
{
document.write("糟糕！文档消失了。");//当上面都没有选择的时候会被覆盖
}
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))//当 值=空 或者不是数字的时候执行if
{
alert("Not Numeric");
}
}
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))//match检测索取buibon 当点击是值是buibon的时候执行if否则执行else
{
element.src="/i/eg_bulboff.gif";
}
else
{
element.src="/i/eg_bulbon.gif";
}
}
not() 方法返回不匹配标准的所有元素。
提示：not() 方法与 filter() 相反。
下面的例子返回不带有类名 "intro" 的所有 <p> 元素：
$(document).ready(function(){
$("p").not(".intro");
});
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
下面的例子返回带有类名 "intro" 的所有 <p> 元素：
$(document).ready(function(){
$("p").filter(".intro");
});
eq() 方法返回被选元素中带有指定索引号的元素。
索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：
$(document).ready(function(){
$("p").eq(1);
});
last() 方法返回被选元素的最后一个元素。
下面的例子选择最后一个 <div> 元素中的最后一个 <p> 元素：
$(document).ready(function(){
$("div p").last();
});
first() 方法返回被选元素的首个元素。
下面的例子选取首个 <div> 元素内部的第一个 <p> 元素：
$(document).ready(function(){
$("div p").first();
});
$(document).ready(function(){
$("div").find("span");
$("div").find("*");//作用于所有的元素find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
下面的例子返回属于 <div> 后代的所有 <span> 元素：
$(document).ready(function(){
$("div").children()css({"color":"red","border":"2px solid red"});
children() 方法返回被选元素的所有直接子元素。
该方法只会向下一级对 DOM 树进行遍历。 可选择参数作用于一个
$(document).ready(function(){
$("span").parent();
});
parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历
$(document).ready(function(){
$("span").parents().css({"color":"red","border":"2px solid red"});//蓝色方法});
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
$(document).ready(function(){
$("span").parentsUntil("div");
});
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：
txt+="Width of div: " + $("#div1").width() + "</br>";
txt+="Height of div: " + $("#div1").height() + "</br>";
txt+="Inner width of div: " + $("#div1").innerWidth() + "</br>";
txt+="Inner height of div: " + $("#div1").innerHeight();
$("#div1").html(txt);
$("#div1").width(320).height(320);//使这个长宽变大
- width() 宽度
- height() 高度
- innerWidth() 加padding内边框
- innerHeight() 加padding内边框
- outerWidth() 加padding和线框一共的边距
- outerHeight() 加padding和线框一共的边距
- var txt=""; 查看的时候要加这个 查看的方法看上面
alert("Background color = " + $("p").css("background-color"));
$("p").css({"background-color":"yellow","font-size":"200%"});
css添加的方法
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
下面的例子演示如何不同的元素中删除指定的 class 属性：
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：
$("p").remove(".italic");//可以指定某个删除
jQuery remove() 方法删除被选元素及其子元素。
jQuery empty() 方法删除被选元素的子元素。
删除的方法
.html()用为读取和修改元素的HTML标签 对应js中的innerHTML
.html()是用来读取元素的HTML内容（包括其Html标签）,.html()方法使用在多个元素上时，只读取第一个元素
.text()用来读取或修改元素的纯文本内容 对应js中的innerText
text()用来读取元素的纯文本内容，包括其后代元素;.text()方法不能使用在表单元素上
.val()用来读取或修改表单元素的value值
.val()是用来读取表单元素的"value"值,.val()只能使用在表单元素上
jQuery prepend() 方法在被选元素的开头插入内容。
实例
$("p").prepend("Some prepended text.");
jQuery append() 方法在被选元素的结尾插入内容。
实例
$("p").append("Some appended text.");
var txt1="<p>Text.</p>"; // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素
var txt3=document.createElement("p"); // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); // 追加新元素
$("img").before(txt1,txt2,txt3); // 在 img 之后插入新元素
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Appended text</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>Appended item</li>");
li里面要用ol才可以在后面添加一行 不然用li的话一般有几个li就多出几行
返回列表
评论