jQuery的常用用法集合

jQuery找控件时，#代表id，.代表name.

1、赋值样式

$("#giftText").attr("class", "textRight");

$("#txt").attr("readonly",true);

2、赋默认值

$("#startDate").html(data.startDate);

3、给字体颜色赋值

$(".fontcolor").css("color",data.fontColor);

4、给背景图片赋图片路径

var imgUrl="url(\""+newUrl+"\")";

$(".showImg").css("background-image",imgUrl);

5、给下拉控件赋值，<select id="style">

var cb=function(){
<span style="white-space:pre">	</span>var val=data.style-1;
	if($(this).val() == val){
		$(this).attr('selected', 'selected');
		$scope.changeStyle(data.style);
	}
}
if (typeof(cb) == "function") {
	$timeout(function(){
		$("#style option").each(cb);
	});
}

6、显示隐藏层

$("#div").hide();

$("#div").show();

7、给checkbox赋值

$('#checkboxr').attr("disabled",true);

$("[name='checkbox1']").attr("checked",'true');

8、给文本框赋值

$(temp).attr('txt','请选择优惠类型')

9、当鼠标指针离开元素时，移除该元素：

$("#show").mouseleave(function(){
      $(this).remove();
});

10、淡入淡出效果

淡入：

    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);

淡出：

    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);

淡入淡出：

    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);

淡出效果，可以控制淡出程度：

    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);

11、所有的jQuery防止在加载前就运行。所以一般都写在这个方法里面

$(document).ready(function(){

--- jQuery functions go here ----

});

12、jQuery选择器

元素选择器

$("p") 选取 <p> 元素。

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

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

属性选择器

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

CSS选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：

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

13、jQuery 事件处理方法是 jQuery 中的核心函数。

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

$("button").click(function() {..some code... } )

jQuery 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。

某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。

jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：

• 把所有 jQuery 代码置于事件处理函数中
• 把所有事件处理函数置于文档就绪事件处理器中
• 把 jQuery 代码置于单独的 .js 文件中
• 如果存在名称冲突，则重命名 jQuery 库

还有很多内容，如动画特效等等，详情请到这里看，左侧导航栏全是JQuery资料：http://www.w3school.com.cn/jquery/jquery_animate.asp