2015-10-06 认识jQuery1
jQuery
一.认识jQuery
1. 是一个优秀的js框架 -----
Write less,do more
2.页面加载之后-----
$(function(){
});
$(document).ready(function() {});==>等价于 $(function () {});
例：jQuery
$(function(){
$("#btn").click(function(){
alert("hello world");
});
});
注：1.页面加载完之后2.找到对象3.执行你要的事件4.声明一个事件（function）5.完成事件里面的内容。
js写法：document.getElementById("btn").onclick=function(){alert("aaa");}
dom对象--->jQuery对象 $(document.getElementById("btn")).click(function(){
alert("hello world");
});
jQuery对象--->dom对象 $("#btn")[0].onclick=function(){
alert("aaa");
};
二. 选择器
1.id选择器
实例： $("#showDiv") 相当于=>document.getElementById("showDiv");
2.类选择器
$(".showclass");----$("div").css("color","#f00");
特殊：1.$("p:odd") //选择所有在偶数行的<p>标记。
$("p:even") //选择所有在奇数行的<p>标记。
2.$("td:nth-child(1)") //表示所有表格行的第一个单元格，即第一列。
3.$("li>a") //表示<li>标记的所有子元素<a>,不包括孙标记。.
4.$("a[href$=pdf]") //选择所有href属性是以“pdf”结尾的超链接。
3.去掉前后空格
var sInput=$.trim($("#txt").val());
alert(sInput);
去掉中间
var sInput=$("#txt").val();
var aInput=sInput.split(''); //获取为字符数组
for( var i=0;i<aInput.length;i++)
{ if(aInput[i]==" ")
{
sInput=sInput.replace(" ","");
}
}
alert(sInput);
三.使用选择器
1. 属性选择器
1.$(" #d1 a[title]").css("color","#f00") //id=d1标签下设置（title属性）的超链接
2.$("a[href='www']").css("color","#f00") //href=www 的a标签（单引号）
3.$("a[href^=http://]").addClass("myClass") //所有以http://开头的a标签
4.$("a[href$=html]").addClass("myClass") //所有以html结尾的a标签
5.$("a[href*=isaac]").addClass("myClass") // 所有href中含有isaac的a标签。
2.包含选择器
$("li:has(a)") //表示含有超链接<a>的所有li标记
3.位置选择器
1.$("p:first”) //整个页面里面的第一个p标签
2.$("p:last") //整个页面里面的最后一个p标签
3.$("p:first-child") //选择所有的p标记，且这些p标记是其父标记的第一个标记
4.$("p:last-child") //选择所有的p标记，且这些p标记是其父标记的最后一个标记
5.$("p:nth-child(odd)") // 选择所有的p标记，且这些p标记是其父标记的奇数行
6.$("p: odd") //选择整个页面奇数行的p标记
7.$("p:eq(4)") // 选择第五个p标记 ----或 $("p").eq(2).css("color","red")可外可里
8.$("p:gt(n)") // 第n个（从0开始，不包括n本身）p标记之后的所有p标记 ----只能写里边
9.$("#d1 p").eq(2).siblings().css("color","red") //找到其兄弟标签，设置字体红色（除eq(2)之外）
10.$("#d1 p").eq(2).prev() // 找到eq(2)前面一个
11.$("p").eq(2).next() //找到后面一个
12.alert($("#d1 p").eq(2).prent().attr("id")); //获取父亲的id值
