1.什么是jquery
［1］ jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
［2］ jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
［3］ 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
［5］ jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
2.什么是juery对象
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
$("#test").html() ????????????意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 ?????????这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; ?????????虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错 ????????约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. var $variable = jQuery 对象var variable = DOM 对象$variable[0]：jquery对象转为dom对象 ?????$("#msg").html(); $("#msg")[0].innerHTMLjquery的基础语法：$(selector).action()
3.寻找元素
3.1选择器
3.1.1 基本选择器
$("*") ?$("#id") ??$(".class") ?$("element") ?$(".class,p,div")3.1.2 层级选择器
$(".outer div") ?$(".outer>div") ??$(".outer+div") ?$(".outer~div")3.1.3 基本筛选器
$("li:first") ?$("li:eq(2)") ?$("li:even") $("li:gt(1)")3.1.4 属性选择器
$(‘[id="div1"]‘) ??$(‘["alex="sb"][id]‘)
3.1.5 表单选择器
$("[type=‘text‘]")----->$(":text") ????????注意只适用于input标签 ?: $("input:checked")例子：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<script src="jquery-3.1.1.js"></script></head><body><div egon="dog" alex="dog2">egon</div><div egon="dog">egon</div><div class="outer"> ???<div class="c2"> ???????<div class="c3" id="d3">DIV</div> ???</div> ???<p id="d2" class="c3">PPPPPPP</p></div><input type="text"><div> ???<p class="c1">p1</p> ???<p class="c1" ?id="d1">p2</p> ???<p class="c1">p3</p> ???<p class="c1">p4</p> ???<p class="c1">p5</p> ???<p class="c1" id="p6">p6</p></div><div> ???<p>12321</p></div><p class="c1"> p7</p><script> ???// 基本选择器 ???//$("#d1").css("color",‘red‘) ???//$(".c1").css("color",‘red‘) ???//$("p").css("color",‘green‘) ???// ???$("#d1,div").css("color",‘green‘) ???// 组合选择器 ???// $(".outer .c3").css("color",‘red‘) ???// 筛选器 ???// $(".c1:first").css("color",‘red‘) ???// $(".c1:last").css("color",‘red‘) ????// $(".c1:eq(i)").css("color",‘red‘); ???// $(".c1:gt(1)").css("color",‘red‘) ???// 属性选择器 ???// $("[egon=‘dog‘][alex]").css("color",‘red‘) ???// 表单选择器 ?:只适用于表单标签 ???// $("[type=‘text‘]").val("hello") ???// $(":text").val("hello") ???// 筛选器 ???// ???var i=3; ???// ???$(".c1").eq(i).css("color",‘red‘) ???// ???console.log($("#d1").hasClass("c1")) ?// true ???// 查找筛选器 ???// 向下查找 ???//$("#d1").nextAll().css("color",‘red‘) ???//$("#d1").next().css("color",‘red‘) ???//$("#d1").nextUntil("#p6").css("color",‘red‘) ???// 向上查找 ???// ???$("#p5").prev(); ???// ???$("div").prevAll(); ???// ???$("div").prevUntil() ???// 查找所有的兄弟标签 ???// $("#d1").siblings().css("color",‘red‘) ???// find ：找后代 ?????children:找儿子 ???// ???console.log($(".outer").children().length) ;// 2 ???// ???$(".outer").children(".c3").css("color","red") ???// ???console.log($(".outer").find()); ???// ???// ???$(".outer").find(".c3").css("color","red") ???// 找父标签// ???$("#d3").parent().parent();// ???$("#d3").parents();// ???$("#d3").parentsUntil(".outer")</script></body></html>3.1.6.表单属性选择器
???:enabled ???:disabled ???:checked ???:selected
<body><form> ???<input type="checkbox" value="123" checked> ???<input type="checkbox" value="456" checked> ?<select> ?????<option value="1">Flowers</option> ?????<option value="2" selected="selected">Gardens</option> ?????<option value="3" selected="selected">Trees</option> ?????<option value="3" selected="selected">Trees</option> ?</select></form><script src="jquery.min.js"></script><script> ???// console.log($("input:checked").length); ????// 2 ???// console.log($("option:selected").length); ??// 只能默认选中一个,所以只能lenth:1 ???$("input:checked").each(function(){ ???????console.log($(this).val()) ???})</script></body>3.2筛选器
3.2.1 过滤筛选器
$("li").eq(2) ?$("li").first() ?$("ul li").hasclass("test")3.2.2 查找筛选器
查找子标签： ????????$("div").children(".test") ?????$("div").find(".test") ?????????????????????????????????向下查找兄弟标签： ???$(".test").next() ??????????????$(".test").nextAll() ????????????????????????$(".test").nextUntil() ????????????????????????????向上查找兄弟标签： ???$("div").prev() ?????????????????$("div").prevAll() ??????????????????????????$("div").prevUntil() ???查找所有兄弟标签： ???$("div").siblings() ????????????????查找父标签： ????????$(".test").parent() ?????????????$(".test").parents() ????????????????????????$(".test").parentUntil()前端基础--jquery
原文地址：http://www.cnblogs.com/yxwang/p/7712363.html