jq第一讲
一、js和jquery的关系
js是javascript的简称，他是原始命令集，使用起来比较繁琐。
jquery是用js命令开发出必要的功能，并封装好的命令集，他使用起来比较方便，但他并不包含js的所有命令。
** jquery的一般书写模式
1、确定页面对象：$(function(){});。
2、页面对象中找到你要操作的具体对象：$("btn") ---btn是一个元素的ID
在js中确定具体DOM对象的方法： document.getElementById("btn")
3、确定你要执行的事件类型：$("btn").click();
在js中指定事件的方法： document.getElementById("btn").onclick
4、声明事件执行的函数(function)：$("btn").click(function(){});
在js中声明事件函数的方法： document.getElementById("btn").onclic = function(){};
5、完成事件中要具体执行的内容：function(){alert("hello world");}
如：$(function () {
$("#btn").click(function () {
alert("hello world");
})
});
//js的写法
$(function () {
document.getElementById("btn").onclic = function(){
alert("hello world");
}
});
//jq对象转换为dom对象的方法：在jq对象后面加上:[0],表示jq对象转换为dom对象。
$(function () {
$("#btn")[].onclic = function(){
alert("hello world");
}
});
//dom对象转换为jq对象的方法：$("#btn")把在jq对象中$("#btn")括号里的内容换成dom对象就可以。
$(function () {
$(document.getElementById("btn")).click(function () {
alert("hello world");
})
});
** jq对象只能调用jq方法，dom对象只能调用js方法。
二、js选择器
1、id选择器
$("#showDiv") 相当于document.getElementById(“ssshowDiv”)
2、类选择器
$(".someclass") css的写法一样class的前缀是【.】号，id的前缀是【#】号。
3、符合选择器
$("li>a") 返回<li>标记的所有子元素<a>,不包括孙元素。
** js选择器的格式与css是一样的，只是js选择器包括一些方法或属性的选择。使用方法时在css的选择器格式上加【:】号后继续写方法，使用属性时在【[]】里书写属性。
4、方法选择器
$("p:odd") 选择所有位于偶数行的<p>标记，
$("p:even") 选择所有位于奇数行的<p>标记。
$("td:nth-child(1)") 所有表格行的第一个单元格，就是第一列。
5、属性选择器
$("a[titel]") 选择所有超链接，并且这些超链接中设置了“title”的a标签。
$("a[href^=http]") 选择所有超链接，并且这些超链接的href属性是以“http”开头的a标签。
$("a[href$=pdf]") 选择所有超链接，并且这些超链接的href属性是以“pdf”结尾a标签。
$("a[href='www.baidu.com']") 选择所有超链接，并且这些超链接的href属性等于“www.baidu.com”的a标签。
$("a[href*=bai]") 选择所有超链接，并且这些超链接的href属性中含有“bai”的a标签。
5、包含选择器
$("li:has(a)") 包含超链接的所有li标签
6、位置选择器
$("p:first") 整个页面里面的第一个p标签
$("p:last") 整个页面里面的最后一个p标签
$("p:first-child") 选择所有的p标记，且这些p标记是其父标记的第一个标签。
$("p:last-child") 择所有的p标记，且这些p标记是其父标记的最后一个标签。
$("p:nth-child(odd)") 选择所有的p标记，且这些p标记是其父标记的奇数行标签。
$("p:nth-child(even)") 选择所有的p标记，且这些p标记是其父标记的偶数行标签。
$("#d1 p:odd") 指定id的标签下面所有p标签中偶数行标签，与child(odd)的写法刚好意思相反。
$("#d1 p:even") 指定id的标签下面所有p标签中奇数行标签，与child(odd)的写法刚好意思相反。
$("p:eq(4)") 第五个5标签
$("p:gt(n)") 第n个（从0开始，不包括n本身）p标记之后的所有p标记。
$("#d1 p").eq(2).siblings() id为d1的标签下面所有p标签中第3个标签的兄弟标签，不包括自己。
$("#d1 p").eq(2).prev() id为d1的标签下面所有p标签中第3个标签的前一个标签。
$("#d1 p").eq(2).next() id为d1的标签下面所有p标签中第3个标签的后一个标签。
** eq可以写在js对象的里面或外面，但gt必须写在js对象的里面。
** $("#d1 p").eq(2).parent().attr("id") ---返回id为d1的标签下面第3个p标签的父标签中id的实行值：就是d1。
parent 指定元素的父标签
attr 标签中的属性
7、过滤选择器
$("input[type='button']") 选择所有button类型的表单元素
$(":button") 上面书写方式的缩写方式，直接在【:】后面直接写类型关键字。
$("input[type='text']") 选择所有text类型的表单元素
$(":text") 上面书写方式的缩写方式
$("div:contains(abc)") 选择div的文本内容中有包含abc的所有div
$(":checkbox") 选择所有复选框
$(":disabled") 选择所有被禁用的元素
$(":enabled") 选择所有可用的元素
$(":file") 所有上传文件
$(":input") 所有表单元素
$(":selected") 所有下拉菜单中被选中的项
$(":visible") 所有可见的元素
$(":submit") 所有提交按钮
8、反选方法
$("input:not(:text)") 表单元素中不是text的所有表单元素
$("input").not(":text") not可以写在js对象里面(用【:】分割)或外面(用【.】分割)。
$("li[title]").not("[title*=abc]") 所有设置了title属性的li标记，但不包括title值中包含字符串abc的那些li标记。
** not()的括号里面只能是元素的属性，不能含有元素本身。
如：$("div p:not(p:hidden)") 错误
$("div p:not(:hidden)") 正确
三、功能函数及方法
1、去掉前后空格的方法
$.trim() 如：$.trim($("#txt").val());
2、获取元素的文本内容 ---获取id为txt的元素value属性值，并去前后空格
.val() 如：$.trim($("#txt").val());
3、字符串中替换指定字符的方法
.replace("a","b") 如：$("#txt").val().replace("a","b");
