jQuery基础

jQuery基础

如何引入jQuery

jQuery本质上就是一段普通的JavaScript代码， 通常使用引入外部JS的方式来使用jQuery

<script type="text/javascript" src="js/jquery.js"></script>

基础语法

基础语法： $(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）“查询"和"查找” HTML 元素
• jQuery 的 action() 执行对元素的操作

实例:

• $(this).hide() - 隐藏当前元素

• $(“p”).hide() - 隐藏所有

  元素

• $(“p.test”).hide() - 隐藏所有 class=“test” 的

  元素

• $("#test").hide() - 隐藏所有 id=“test” 的元素

选择器

$(slector)

selector就是选择器表达式，语法基本和CSS选择器一致

示例：

• $("#container")
• $(".container")
• $(“img”)
• $(“input[type=‘password’]”)
• $("#container image")

HTML操作

DOM操作

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易

属性操作

attr()：用于获取属性值

读取属性

$(selector).attr(attrName);

//示例
var href = $("a").attr("href");
var id = $("div").attr("id");

修改属性

$(selector).attr(attrName, "属性值");

//示例
var href = $("a").attr("href", "http://www.jd.com");

属性名不仅支持标准属性，还支持自定义属性

内容操作

获得内容

• text()：设置或返回所选元素的文本内容
• html()：设置或返回所选元素的内容（包括 HTML 标记
• val()：设置或返回表单字段的值

//通过 jQuery text() 和 html() 方法获得内容:
$("#btn1").click(function(){
	alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
	alert("HTML: " + $("#test").html());
});
//通过 jQuery val() 方法获得输入字段的值：
$("#btn1").click(function(){
	alert("值为: " + $("#test").val());
});

样式操作

通过 jQuery，可以很容易地对 CSS 元素进行操作

• addClass() - 向被选元素添加一个或多个类

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

• removeClass() - 从被选元素删除一个或多个类

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

• toggleClass() - 对被选元素进行添加/删除类的切换操作

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

• css() - 设置或返回样式属性

  • 设置css属性

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

  • 返回css属性

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

事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

效果

显示隐藏

通过 jQuery使用hide()和show() 方法来隐藏和显示 HTML 元素

//例：
<script>
    $(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>

<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>

使用 toggle() 方法来切换 hide() 和 show()方法

$("button").click(function(){
	$("p").toggle();
});

淡入淡出

fadeIn()方法：用于淡入已隐藏的元素

$("button").click(function(){
	$("#div1").fadeIn();
	$("#div2").fadeIn("slow");
	$("#div3").fadeIn(3000);
});

fadeOut()方法：用于淡出可见元素

$("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
});

fadeToogle()方法：可以在 fadeIn() 与 fadeOut() 方法之间进行切换

$("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
});

fadeTo()方法：允许渐变为给定的不透明度（值介于 0 与 1 之间）

$("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
});

滑动

slideDown()方法：用于向下滑动元素

$("#flip").click(function(){
    $("#panel").slideDown();
});

slideUp()方法：用于向上滑动元素

$("#flip").click(function(){
    $("#panel").slideUp();
});

slideToggle()方法：可以在 slideDown() 与 slideUp() 方法之间进行切换

$("#flip").click(function(){
    $("#panel").slideToggle();
});

动画

使用jQuery animate() 方法可以创建自定义的动画

遍历

遍历jQuery对象

遍历数组

for...in循环语句用于遍历数组或者对象的属性进行循环操作

循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作

//语法
for (变量 in 对象){
    在此执行代码
}

//例
<script type="text/javascript">
	var x
	var mycars = new Array()
	mycars[0] = "Saab"
	mycars[1] = "Volvo"
	mycars[2] = "BMW"

	for (x in mycars){
		document.write(mycars[x] + "<br />")
	}
</script>

Ajax

jQuery也可以实现异步加载