一、配置
（一）将jquery-3.1.1.min.js导入
（二）配置.jsp文件
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>//配置jquery的路径 <script type="text/javascript"> $(document).ready(function(){ }); </script>
二、应用
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div[title]").css("background-color","green");//含有title元素的div背景色变绿色 }); </script> <style type="text/css"> div{ 100px; height:100px; border:5px solid red; background-color: yellow; float:left; margin:10px; } p{ height: 50px; 50px; border: 1px solid blue; float:left; } span{ height:80px; 80px; border: 5px dotted orange; float: left; background-color: pink; } </style> </head> <body> <div title="love" id="d1"> title=love </div> <div class="tt"> <p title="love"></p> </div> <div class="tt" id="d3"></div> <div title="love"> title=love <span> <p></p> </span> </div> <div title="very" class="tt"> title=very <div></div> </div> <div title="aaa"></div> <p></p> </body> </html>
运行结果：
常用过滤代码：
//**********内容过滤************* $("div:has(p)").css("background-color","green");找出带有某种选择器的p元素的外部元素（div） $("div:contains(y)").css("background-color","green");//找出含有“y”的div背景变绿色 //**********属性过滤************** $("div[title]").css("background-color","green");找出带有title属性的div $("div[title=love]").css("background-color","green");//找出title属性等于love的div $("div[title!=love]").css("background-color","green");//找出title属性不等于love的div $("div[title*=ve]").css("background-color","green");//找出title属性带有“ve”的div $("div[title^=ve]").css("background-color","green");//找出title属性开头是“ve”的div $("div[title$=ve]").css("background-color","green");//找出title属性结尾是“ve”的div $("div:not(div[title$=ve])").css("background-color","green");//找出不是 title属性结尾是“ve”的div //*********基本过滤选择器*********** $("div:first").css("background-color","green");//找出带有某种选择器的第一个div $("div:last").css("background-color","green");//找出带有某种选择器的最后一个div $("div:eq(2)").css("background-color","green");//找出带有某种选择器的第3个div。注：从0开始算第1个 $("div:lt(2)").css("background-color","green");//找出带有某种选择器的前2个div。 $("div:gt(2)").css("background-color","green");找出带有某种选择器的第4个以后的div。 $("div:not(div:eq(1))").css("background-color","green");//找出带有某种选择器的除 第2个div 的所有div。注：从0开始算第1个 $("div:odd").css("background-color","green");//找出偶数位置的div。注：odd是基数，但是其位置在偶数，因为从0开始算第1个 $("div:even").css("background-color","green");//找出奇数位置的div //*********基本选择器************** $("div").css("background-color","green");//找出所有div背景色变绿色 $(".tt").css("background-color","green").css("border-color","blue");//找出class属性是tt的 $("#d3").css("background-color","green");//找出id属性是d3的 $("div,p").css("background-color","green");//找出div和p属性的背景变绿色 $("div p").css("background-color","green");//找出后代是p元素的div中的p元素 $("div>p").css("background-color","green"); //找出子代是p元素的div中的p元素