jquery简介：它是JavaScript库，是JavaScript的一个框架，封装JavaScript常用的功能代码，

百度百科

选择器

选择器，故名思意就是能对整个界面的东西进行选择。包括一些html，文本，以及值。

分为基本选择器，属性选择器，其他选择器。

它基本的写法就是：$("#id")   $(".类")   $("标签")

下面是demo:

给出下面的html界面：

<p class="c1">Jquery选择器</p> <ul> <li id="i1"> <a id="a1" class="c1" href="http://www.java1234.com" >Java知识分享网</a> </li> <li><a id="a2" class="c1" href="http://www.csdn.net"></a></li> <li><a href="http://www.iteye.com">iteye</a></li> <li><a href="http://www.cnblogs.com">博客园</a></li> <li><a class="c1" href="#">百度</a></li> <li><a href="http://www.google.com">谷歌</a></li> </ul> <script type="text/javascript"> //在文档结束之后执行 $(document).ready(function(){ //基本选择器 //$("#a1").css("background-color","red"); //根据id //$(".c1").css("background-color","red"); //根据class //$("a").css("background-color","red"); //根据标签 //属性选择器 //$("[href]").css("background-color","red"); //有属性href的 //$("[href='#']").css("background-color","red"); //属性href等于"#"的 //$("[href$='com']").css("background-color","red"); //属性值以com结尾的 //其他选择器 //$("p.c1").css("background-color","red"); //p标签下的class为c1的 //$("ul li:first").css("background-color","red"); //找ul 下的li 的第一个 //$("ul li:last").css("background-color","red"); //找ul 下的li 的最后一个 }); </script>

处理DOM节点：

jquery可以操作DOM节点对象：通过.text()可以获取文本内容，.html()可以获取里面的html属性，.val()可以获取值，如果有的话，常见是向输入框索取输入的值，通过.children可以获取其子节点，可以遍历所有的子节点，但这里要注意的是，在遍历时，每一个.[i]的对象，是原生的对象，不经过jquery修饰的，因此不能直接用.html获取其html的值，可以用$()包起来就可以了。不但可以获取子节点，还可以通过.next()获取下一个节点，prev获取上一个节点。jquery还可以获取并设置css样式。

<p>你最喜欢的名人是？</p> <ul> <li title="这是乔布斯"><font color="green">乔布斯</font></li> <li title="这是比尔盖茨" class="lc">比尔盖茨</li> <li title="这是詹姆斯高斯林">詹姆斯高斯林</li> </ul> <input type="text" id="userName"/> <input type="button" value="获取值" onclick="getUserName()"/> <input type="button" value="设置值" onclick="setUserName()"/> <p style="color:red" id="p">操作CSS样式</p>

下面是demo:

$(document).ready(function(){ //操作DOM节点 //1.查找DOM节点 /* var li2 = $("ul li:eq(1)"); //查找ul li是一个数组，取数组里的第二个对象 var li2_txt = li2.text(); //对象的text()方法：取对象里的txt文本 alert(li2_txt); */ //2.创建DOM节点 //var li4 = $("<li title='这是马化腾'>马化腾</li>"); //创建节点 //$("ul").append(li4); //在ul标签后添加节点 //var li2 = $("ul li:eq(1)"); //获取DOM节点对象 //li4.insertAfter(li2); //将li4节点插到li2后面。 //3.删除DOM节点 //$("ul li:eq(1)").remove(); //删除DOM对象 //操作DOM对象属性 //1.获取属性 //var li2 = $("ul li:eq(1)"); //var li2_attr = li2.attr("title"); //alert(li2_attr); //2.设置属性 //var li2 = $("ul li:eq(1)"); //li2.attr("title","这不是马化腾"); //3.删除属性 //var li2 = $("ul li:eq(1)"); //li2.removeAttr("title"); //操作DOM节点样式 //1.获取样式 //var li2 = $("ul li:eq(1)"); //var li2_css = li2.attr("class"); //alert(li2_css); //2.设置样式 //var li2 = $("ul li:eq(1)"); //li2.attr("class","lc2"); //3.追加样式 //var li2 = $("ul li:eq(1)"); //li2.addClass("lc3"); //4.删除样式 //var li2 = $("ul li:eq(1)"); //li2.removeClass("lc"); //操作html，文本 //1.获取html //var li2 = $("ul li:eq(0)"); //var li2_html = li2.html(); //alert(li2_html); //2.设置html //var li2 = $("ul li:eq(0)"); //li2.html("<font color='red'>设置html</font>"); //3.获取text //var li2 = $("ul li:eq(0)"); //var li2_text = li2.text(); //alert(li2_text); //4.设置text //var li2 = $("ul li:eq(0)"); //li2.text("设置text的值"); //遍历节点 //var b = $("body").children(); //alert(b.length); //for(var i=0;i<b.length;i++){ // alert(b[i].innerHTML); //} //var u = $("ul").children(); //for(var i =0;i<u.length;i++){ //alert(u[i].innerHTML);----获取的每一个子节点都是原生的DOM对象，没有经过jquery包装的 // alert($(u[i]).html()); //} /* var nextul = $("ul li:eq(1)").next(); alert(nextul.html()); var prevul = $("ul li:eq(1)").prev(); alert(prevul.html()); */ //操作CSS节点 //1.获取css样式的值 //var p_css = $("#p").css("color"); //alert(p_css); //2.设置css的值 $("#p").css("color","blue"); }); function getUserName(){ var userName = $("#userName").val(); alert(userName); } function setUserName(){ $("#userName").val("你好"); } </script> <style type="text/css"> .lc{ background-color: red; } .lc2{ background-color: blue; } .lc3{ font-weight: bold; } </style>