jq中常见的用法，及选择器常用共8种、过滤方法、attr和prop属性使用参考图。
<script type="text/javascript">
一、jq中写法
//方法一：
$(document).ready(function(){
// 执行代码
});
//方法二：
$(function () {
$("#test")
})
$(function () {
二、jq选择器常用共8种，可根据css选择器，对比记忆呀。另外，选择器中可使用css中的伪类选择器
//1.id选择器
$("#box").html() // 用 #号
//2.类选择器
$(".box").html //用 . 号
//3.标签选择器
$("div").html //直接给标签名
//4.多元素选择器
$("#box,.box,div").html(); // 几种选择器组合
//5.后代选择器
$("#box p").html() // 用空格隔开
//6.子元素选择器
$("#box > p").html() ; // 用> 隔开
//7.伪类选择器
$("p:nth-child(2)").css("background-color");
//8.属性选择器
$("input[value=men]") ; //找 value=men的input元素
$("input[value*=men]") ; //找 value里面包含men的input元素
$("input[value^=men]") ; //找 value里面以men开头的input元素
$("input[value$=men]") ; //找 value里面以men结尾的input元素
三、jq的过滤方法
:first//用法:
$(”tr:first”) ;// 匹配找到tr的第一个元素
:last //匹配找到的最后一个元素
:not(selector) //去除所有与给定选择器匹配的元素
:even//匹配所有索引值为偶数的元素，从 0 开始计数
:odd//匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index) //匹配一个给定索引值的元素，从 0 开始计数
:gt(index) //匹配所有大于给定索引值的元素，从 0 开始计数
:lt(index) //匹配所有小于给定索引值的元素，从 0 开始计数
$("p").filter(".url")//返回带有类名 "url" 的所有 <p> 元素
四.jq中部分常用方法：
//
（1）addClass() //为每个匹配的元素添加指定的样式名
$('div').addClass('box'); //为页面中所有的div添加一个box样式
（2）removeClass()// 移除集合中每个匹配元素上一个、多个或全部样式
$('p,.box').removeClass('classname')//classname只需类名即可，不需要加"."
（3）toggleClass() //样式切换，如果有就删除，如果没有就添加
$("p").click(function () {
$(this).toggleClass("highlight");
});
（4）$('p').html() //获取p标签里面的内容
$('p').html('床前明月光')；//设置html里面的内容
（5）$('p').text();
$('p').text('床前明月光')；
//html方法功能和原生方法innerHTML一样 ，text方法功能和原生方法innerText一样。val() 获取或者设置表单元素的值，这里要注意的是 获取的是表单元素的值 不要和html 以及 text方法搞混
（6）$("input").val(text);
//获取属性值 attr()和prop() 方法用于获取属性值。
（7）$("#aa").attr("href")
（8）$("#aa").prop("href")
//相同点：两者获取的属性有值，返回指定属性值
//不同点：没有相应的属性，prop()返回值是空字符串,attr()返回值是 undefined
//HTML元素本身就带有的固有属性用------>prop(),自定义的DOM属性则用---->attr()
//具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，使用attr的话属性效果无法实现。
attr和prop属性使用参考图
用attr（）设置属性值
//1.$("#aa").attr( "href","http://www.baidu.com");
//2.同时设置多个属性,例如href 和 title 属性
$("#aa").attr({
"href" : "http://www.baidu.com",
"title" : "jQuery"
});
//2.回调函数,两参数：第一个为被选元素列表中当前元素的下标，以及原始（旧的）值
$("#aa").attr("href", function(i,origValue){
return origValue + "/jquery";
}）
（9）//removeAttr() 删除属性
$("input").removeAttr("data");
（10）//removeProp()同上
$("input").removeProp("checked");
（11）//设置样式的css()方法
$('div').css('color','red'); //设置所有div字体颜色为红色
$('div').css('color') //获取颜色
$('div').css({"propertyname":"value","propertyname":"value",...}); //获取颜色
//批量设置法一：
//index参数：选中的div的遍历集合，从0开始；item参数：
$('div').css('color',function(index,item){
//console.log(index)打印查看
//console.log(item)
//奇数设置处理if(index%2==0){
if(index<=4){
return 'blue';
}
}) //下标小于4的都设置成蓝色
//批量设置法二：
$('div').css({"color":"yellow","font-size":"25px"})//对象传入设置
（12）//each()方法 后台传来的数据，数组对象。可遍历
$("li").each(function(index, item){
//index 为li的下标 item表示每个li（元素或对象）
console.log(index, item)
]})
//五、添加元素：
var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本
var txt2=$("<p>"+"拼接加入"+"</p>"); //拼接动态文本数据进入
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
append/prepend和after/before的区别。两组的意思都为---->从后面插入/从前面插入。两者的区别：
(1).append/prepend 是在选择元素内部嵌入。
(2).after/before 是在元素外面追加。
(3).当选中最小一层的元素或者无嵌套的元素，两者效果一样
//例如，选中ul下的第二个li,前两个和后两个效果一致
$("ul li").get(1).prepend("<li>追加列表项</li>");
$("ul li").get(1).append(" <li>追加列表项</li>");
$("ul li").get(1).before("<li>追加列表项</li>");
$("ul li").get(1).after("<li>追加列表项</li>");
(4).appendTo/prependTo ,insertAfter/insertBefore方法与append/prepend，after/before方法就是小学所学“把”和“被”的关系
$(li).appendTo($("#ul")); //把li元素添加到ul中 ，这个元素被添加到ul中原有元素的后面
$(li).appendTo($("#ul")); //把li添加到ul中 ，这个元素被添加到ul中原有元素的前面
$("#li2").insertAfter($("#li1")); // 把li2 添加到li1 后面
$("#li2").insertBefore($("#li1")); // 把li2 添加到li1 前面
//六、删除元素：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
$("#div1").empty();
$("#div1").remove();
//可接受一个参数，允许对被删元素进行过滤
$("p").remove(".italic");//对类名为.italic的p元素删除
// 七、遍历方法（关系查找方法）,包括兄弟关系（同级同代）、祖先后代关系（隔代）--------应用中最重要的就是可以传入过滤条件进行筛选！！！。
兄弟关系（同级同代）：
（1）prev()和prevAll(),next()和nextAll()，prevtUntil()和nexttUntil()，siblings()方法五个返回的都是jq对象！！
$(".box").prev() //获取前面一个兄弟节点
$(".box").prevAll() //获取前面所有的兄弟节点
$(".box").prevAll("p")//可传入过滤条件，获取上面所有元素的p元素
$(".box2").prevtUntil(".box1");//返回.box1和.box2之间的所有元素,向上找
$(".box").prev() //获取前面所有的兄弟节点
$(".box").next() //获取后面一个兄弟节点
$(".box").nextAll() //获取后面所有的兄弟节点
$(".box1").nextUntil(".box2");//返回.box1和.box2之间的所有元素，向下找
$(".box").siblings() //获取所有的兄弟节点
祖先后代关系（隔代）：
（1）长辈：parent()，parents()，parentsUntil()及closest()方法
$("span").parent()//返回每个 <span> 元素的的直接父元素,它爸爸
$("span").parents();//返回所有 <span> 元素的所有祖先,它一路向上直到文档的根元素 "<html>"
$("span").parentsUntil("div");//返回介于 <span> 与 <div> 元素之间的所有祖先元素,位置不可换，辈分‘小’---->‘大’
$("input").closest('li');//找到input上面最近的li父级
（2）后辈：find()，children()方法；index(),get()，eq()方法（顺便补充）
$(function () {
$("li").click(function () {
// alert($(this).html())
alert($(this).index()) //快熟获取的当前元素的下标
})
//获取集合中的某个元素,2为获取元素的下标，返回原生的元素，不可用jq方法，需转换
console.log($("li").get(2))
//eq()同上get（）方法一样效果,但返回的是jq对象！
console.log($("li").get(2))
//find()方法返回的是一个jq对象！！！！！
$(".box").find("p"); //找到box类下面所有的p标签
$(".box").find(".aa");//找到box类下面所有的含类名为aa的标签
console.log(111,$(".box").find($(".innerBox")))//找到对象
$("div").children();//返回被选元素的所有直接子元素 $("div").children("p.aa");//返回类名为 "aa" 的所有 <p> 元素
})
//八、jq中的事件
（1）元素效果事件常用有：
①click() 方法是当按钮点击事件被触发
②dblclick ()方法双击元素时，会发生 dblclick 事件
③mouseenter()方法当鼠标指针穿过元素时，会发生 mouseenter 事件
④mouseleave()当鼠标指针离开元素时，会发生 mouseleave 事件
⑤mousedown()当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
⑥mouseup()当在元素上松开鼠标按钮时，会发生 mouseup 事件
⑦hover()方法当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)
⑧focus()当元素获得焦点时，发生 focus 事件
⑨blur()当元素失去焦点时，发生 blur 事件
键盘事件常用有：
①.keydown：在键盘上按下某键时发生,一直按着则会不断触发（opera浏览器除外）, 它返回的是键盘代码;
②keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符（返回的是空白字符）
③keyup：用户松开某一个按键时触发, 与keydown相对, 返回键盘代码.
$(window).keydown( function(event){
// 通过event.which可以拿到按键代码. 如果是keypress事件中,则拿到ASCII码.
} );
上面的所有事件一般传入函数，实现效果！
（2）事件的绑定方法：
①on方法绑定
$('#box').on('click',function(){//上面的方法都可使用on方法，替换"click"即可
alert("on监听事件");
})
$('#box').on('click mouseleave',function(){//用空格隔开可监听多个事件
alert("on监听多个事件");
}
②直接绑定
$("#box").click(function(){
alert("直接使用"）
})
③删除事件：
$("#box").off("blur"); //删除事件
④事件冒泡：
事件冒泡就是事件会从元素内部往外传播的一种现象，事件冒泡的好处就是可以节约代码，比如说，有个需求是，点击某个按钮btn1 的时候显示一个div，点击其他元素的时候隐藏div，这个时候，如果没有冒泡机制，要实现这个需求就要给除了btn1 以外的所有元素都绑定上点击事件，如果当前页面有成千上万个元素，那么事件就会被重复绑定成千上万次，如果有了事件冒泡机制就可以把事件绑定给document，通过冒泡机制，点击其他的元素都会触发document身上的点击事件，从而节约代码，此时，只需要把btn1身上的点击事件阻止冒泡就行了
$("#btn1").on("click",function(ev){
ev.stopPropagation();
})
⑤阻止默认行为：
浏览器会自带一些默认行为，比如说右键菜单，表单提交等，如果要实现自定义右键菜单或者表单验证这些功能的时候就需要把这些默认行为阻止掉
$("#btn1").on("click",function(ev){
ev.preventDefault();
})
$(function () {
$(document).contextmenu(function (ev) {
// ev.preventDefault()
return false;//既可以阻止默认行为，也可以阻止冒泡
})
slideDown();//当点击“皮肤” 时 弹出谈一个被隐藏的#pfbox层
slideUp();//当点击“收起” 时 隐藏一个显示的#pfbox层
function ShowImgBox(){
$("#pfbox").slideDown();//当点击“皮肤” 时 弹出谈一个被隐藏的#pfbox层
}
function HideImgBox(){
$("#pfbox").slideUp();//当点击“收起” 时 隐藏一个显示的#pfbox层
}
//九、AJAX相关方法
1.$.ajax() 执行一个异步的ajax请求
$.ajax({
url:'http://www.wp.com/getData.php', //跨域到http://www.wp.com，另，http://test.com也算跨域
type:'GET', //jsonp 类型下只能使用GET,不能用POST,这里不写默认为GET
dataType:'jsonp', //指定为jsonp类型
data:{"name":"Zjmainstay"}, //数据参数
jsonp:'callback', //服务器端获取回调函数名的key，对应后台有$_GET['callback']='getName';callback是默认值
jsonpCallback:'getName', //回调函数名
success:function(result){ //成功执行处理，对应后台返回的getName(data)方法。
$("#myData").html('1、My name is '+result.name+'.I\'m '+result.age+' years old.<br />');
},
error:function(msg){
alert(msg.toSource()); //执行错误
}
});
2.get()和post()方法
//get()语法：$.get(URL,data,function(data,status,xhr),dataType);
$.get("test.php", function(data){
alert("Data: " + data);
});
//post()语法$(selector).post(URL,data,function(data,status,xhr),dataType)
$("input").keyup(function(){
txt=$("input").val();
$.post("demo_ajax_gethint.html",{suggest:txt},function(result){
$("span").html(result);
});
});
}
