jQuery

1.jQuery选择器

    <!DOCTYPE html>
    <html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			li{
				list-style: none;
				height: 50px;
				width: 80px;
				border: 1px solid darkgreen;
				text-align: center;
			}
			span{
				border:1px solid darkred;
				cursor: pointer;
			}
			.cssClass{
				background: blueviolet;
			}
		</style>
		
	</head>
	<body>
		<ul>
			<li id="li1">id选择器 #id</li>
			<li class="li2">类选择器 .class</li>
		</ul>
		<input type="text" name="ipt1" id="" value="" />
		<input type="date" name="" id="" value="" />
		<input type="text" name="ipt2" id="" value="" />
		<br />
		<span id="id">id选择器</span>
		<span class="class">class选择器</span>
		<span id="btn1">标签选择器</span>
		<span id="btn2">通配选择器</span>
		<span id="btn3">组选择器</span>
		<span id="btn4">后代选择器</span>
		<span id="btn5">过滤选择器</span>
		<span id="btn6">属性选择器</span>
		<script src="lib/jquery-3.1.1.min.js" ></script>
		<script type="text/javascript">
			$(document).ready(function(){
				//id 
				$("#id").click(function(){
					$("#li1").toggleClass("cssClass");
				})
				//class
				$(".class").click(function(){
					$(".li2").toggleClass("cssClass");
				})
				//tag
				$("#btn1").click(function(){
					$("li:first-child").toggleClass("cssClass");
				})
				//*
				$("#btn2").click(function(){
					$("*").toggleClass("cssClass");
				})
				//组
				$("#btn3").click(function(){
					$("ul,span").toggleClass("cssClass");
				})
				//后代
				$("#btn4").click(function(){
					$("ul li").toggleClass("cssClass");
				})
				//过滤
				$("#btn5").click(function(){
					$("ul li:first").toggleClass("cssClass");
				})
				//属性
				$("#btn6").click(function(){
					$("input[name = ipt1]").toggleClass("cssClass");
				})
			})
		</script>
	</body>
    </html>

效果展示

2.jQuery事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery 事件</title>
    <script src="../lib/jquery-3.1.0.min.js"></script>
    <style>
        body{
            height:3000px;
        }
        #click1{
            border:1px solid chartreuse;
        }
        span{
            cursor: pointer;
        }
        .class1{
            background-color: blue;
        }
    </style>
</head>
<body>
<span>浏览器窗口的大小改变了：</span><span id="span">0</span>

<br>

<span id="click1">快点点我</span>

<br>

<input type="text" id="inpt" value="我是值">


<br>
<br>

<input type="text" id="inpt1" placeholder="输入一">
<input type="text" id="inpt2" placeholder="输入二keydown">
<input type="text" id="inpt3" placeholder="输入三keyup">
<input type="text" id="inpt4" placeholder="输入四keypress">


<br>
<br>

<span id="sp1">on方法</span>

<br>
<br>
<span id="sp2">bind方法</span>
<br>
<br>
<span id="sp3">trigger方法</span>
<br>
<br>
<span id="sp4">live方法</span>
<br>
<br>
<div id="ds">
    <span>live替代方法演示</span>
</div>
<script>

    $(window).resize(function () {
        $("#span").text(parseInt($("#span").text()) + 1);
    });


    $(window).scroll(function () {
        $("#span").text(parseInt($("#span").text()) + 1);
    });


    $(function () {
        $("#click1").click(function () {
            $("#click1").toggleClass("class1");
        });

        $("#click1").hover(function () {
            $("#click1").toggleClass("class1",true);
        },function () {
            $("#click1").toggleClass("class1",false);
        });

        $("#inpt").focus(function () {
            $("#inpt").toggleClass("class1",true);
        });
        $("#inpt").blur(function () {
            $("#inpt").toggleClass("class1",false);
        });

        $("#inpt2").keydown(function () {
            $("#inpt2").toggleClass("class1");
        });
        $("#inpt3").keyup(function () {
            $("#inpt3").toggleClass("class1");
        });
        $("#inpt4").keypress(function () {
            $("#inpt4").toggleClass("class1");
        });



        $("#sp1").on("click",function () {
            $("#sp1").toggleClass("class1");
        });
        $("#sp2").bind("click",function () {
            $("#sp2").toggleClass("class1");
        });
        $("#sp3").click(function () {
            alert("我要触发trigger事件了");
            $("#sp1").trigger("click");
        });
        $("#sp4").click(function () {
            $("#ds").append('<span onclick="alert(123)";>我是来代替live的</span>');
        });
    });
</script>
</body>
</html>