jquery

xiaoxiao2021-03-01  44

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>

 

转载请注明原文地址: https://www.6miu.com/read-3450207.html

最新回复(0)