jquery简单过滤选择器
1、给第一个元素添加背景颜色：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><% pageContext.setAttribute("APP_PATH",request.getContextPath());%><!-- 此时表示根据设备的大小调整页面的显示宽度 --><meta name="viewport" content="width=device-width,initial-scale=1"><script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script><link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" /><script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><script type="text/javascript"> $(function() { $("li:first").css("background","red"); })</script><html> <body> <div> <h1>基本过滤选择器</h1> <ul> <li>item 0</li> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> <span>百度威猛</span> </div> </body></html>
3、给最后一个元素加上样式<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><% pageContext.setAttribute("APP_PATH",request.getContextPath());%><!-- 此时表示根据设备的大小调整页面的显示宽度 --><meta name="viewport" content="width=device-width,initial-scale=1"><script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script><link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" /><script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><script type="text/javascript"> $(function() { $("li:last").css("background","green"); })</script><html> <body> <div> <h1>基本过滤选择器</h1> <ul> <li>item 0</li> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> <span>百度威猛</span> </div> </body></html>
4、给指定样式不匹配的元素加上样式。<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><% pageContext.setAttribute("APP_PATH",request.getContextPath());%><!-- 此时表示根据设备的大小调整页面的显示宽度 --><meta name="viewport" content="width=device-width,initial-scale=1"><script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script><link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" /><script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><script type="text/javascript"> $(function() { $("li:not(.notClass)").css("background","green"); })</script><html> <body> <div> <h1>基本过滤选择器</h1> <ul> <li class="notClass">item 0</li> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> <span>百度威猛</span> </div> </body></html>
6、给大于索引值的元素添加样式；<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><% pageContext.setAttribute("APP_PATH",request.getContextPath());%><!-- 此时表示根据设备的大小调整页面的显示宽度 --><meta name="viewport" content="width=device-width,initial-scale=1"><script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script><link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" /><script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><script type="text/javascript"> $(function() { $("li:gt(1)").css("background","green"); })</script><html> <body> <div> <h1>基本过滤选择器</h1> <ul> <li class="notClass">item 0</li> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> <span>百度威猛</span> </div> </body></html>
