常用 jquery 代码片段 和 javascript 代码片段

1 .jquery篇

1.       Jquery获取#first下 input名字叫price的元素的值

function getit(){
name = $("#first input[name='price']").val();
alert(name);
}
alert($("#first input[name='price']").attr("value")); //获取某个属性的值

//$("ul li:last").html("22");  $("ul li:first").html("22");

2.       Val()可以赋值也可以获取值

alert($("#first input[name='price']").val());
$("#first input[name='price']").val(123123123)

3.      each()遍历select里的option项

$("#sele option").each(function(){
if($(this).text()=="text"){
$(this).attr("selected","true");
}
});

 

4.      javascript的加法

parseInt(name)+parseInt(name2)

5.      页面加载时运行

$(document).ready(function(){
$('ul').css('color','red');
});

6. Jquery获取元素的值的方法

$("#orderedlist").find("li") 等价于  $("#orderedlist li")

Var  nname=$(this).parents('.list-comt').find('#nnuser').html();   //寻找某元素父元素 里的 子元素的值

7.  在元素后追加

$("ul li").each(function(){
$(this).append("<font style='font-weight:bold;'>fireworf</font>");
});

//$(this).find("em").remove(); 删除元素
//$("a[href='/fyou']").html(); 获取指定链接的超链接
//$("a[href]")//有href属性的超链接

8.  改变对象的CSS

$("#61dh a").css('color','#123456');

$('#sp').parent().css('background','#000');  //#sp的父原素的背景变黑

9.清除表单  表单复位

$("#reset").click(function()
{
$("#form")[0].reset()
} )

10.绑定事件

functionsecondClick() {
$("#dv1").unbind(); //解除对象事件
alert("second click!");
}
$("#dv1").bind("mouseover",secondClick);

//$("#dv1").trigger("click");  //自动触发事件
//为所有的段落添加一个click事件,包括后来加上的元素
$("p").live("click",function () {
alert($(this).html());
});

11.动画效果 自定义animate

$("#go").click(function(){

$("#block").animate({height:300,width:'+800',marginLeft:'+=300'},"slow");
});

//+800表示增加到800      +=800表示在原来基础上加800
// $(".panel").slideToggle("slow");  //上和下综合 

12 .javascript原生绑定事件

var dg = document.getElementById("dg");
dg.onmouseover =function(){

alert("good");

}

13.return false 在javascript中是跳出这个方法！ 

14. jquery 增加删除class

$(thisObj).addClass("selected");
$(thisObj).parents("ul").find("li").removeClass("selected");

15. 取select值

var pp = $("#provide option:selected").val();
或
var area0 = $("select[name='prov']").val();

16.在某元素中插入内容（可以是html，可以是字符串）

在每个 p 元素结尾插入内容：

$("button").click(function(){
$("p").append(" <b>Helloworld!</b>");
});

17. slideToggle 和 slideDown , slideUp

$(".clickdiv").click(function(){
$(this).slideToggle(500);  //通过使用滑动效果，在显示和隐藏状态之间切换 <p> 元素 slidedown 和slideup的结合
$(this).slideDown();  //显示块状元素

});

2 javascript 篇

1.查找html元素  通过id查找

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

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

var x=document.getElementById("main");
var y= x.getElementsByTagName("p");

var  xx = document.getElementsByName('name');

 

2. 本例改变了 某 元素的  属性

<img id="image" src="smiley.gif">

document.getElementById("image").src="landscape.jpg";

3.javascript事件 向 button 元素分配 onclick 事件：

<button id=” myBtn”>按我</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

 

4 .改变css

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

5 .改变里面的内容

<p id="p2">Hello World!</p>

<script> document.getElementById("p2").innerHTML =”12333333333333";
</script>

6 .连接字符串

function ff(){
alert("abc"+"dfe");
}