JQuery_基础案例_hehe.employment.over.20.3

文章目录

  • 20.7 JQuery_案例_隔行换色
  • 20.8 JQuery_案例_全选与全不选
  • 20.9 JQuery_案例_QQ表情选择
  • 20.10 JQuery_案例_多选下拉列表左右移动

20.7 JQuery_案例_隔行换色


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<script  src="../../js/jquery-3.3.1.min.js">script>
		
		<script>
			//需求:将数据行的奇数行背景色设置为 pink,偶数行背景色设置为 yellow
			$(function () {
      
				//1. 获取数据行的奇数行的tr,设置背景色为pink
				$("tr:gt(1):odd").css("backgroundColor","pink");
				//2. 获取数据行的偶数行的tr,设置背景色为yellow
                $("tr:gt(1):even").css("backgroundColor","yellow");
            });
		script>
	head>
	<body>
		<table id="tab1" border="1" width="800" align="center" >
			<tr>
				<td colspan="5"><input type="button" value="删除">td>
			tr>
			<tr style="background-color: #999999;">
				<th><input type="checkbox">th>
				<th>分类IDth>
				<th>分类名称th>
				<th>分类描述th>
				<th>操作th>
			tr>
			<tr>
				<td><input type="checkbox">td>
				<td>0td>
				<td>手机数码td>
				<td>手机数码类商品td>
				<td><a href="">修改a>|<a href="">删除a>td>
			tr>
			<tr>
				<td><input type="checkbox">td>
				<td>1td>
				<td>电脑办公td>
				<td>电脑办公类商品td>
				<td><a href="">修改a>|<a href="">删除a>td>
			tr>
			<tr>
				<td><input type="checkbox">td>
				<td>2td>
				<td>鞋靴箱包td>
				<td>鞋靴箱包类商品td>
				<td><a href="">修改a>|<a href="">删除a>td>
			tr>
			<tr>
				<td><input type="checkbox">td>
				<td>3td>
				<td>家居饰品td>
				<td>家居饰品类商品td>
				<td><a href="">修改a>|<a href="">删除a>td>
			tr>
		table>
	body>
html>

20.8 JQuery_案例_全选与全不选


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<script  src="../../js/jquery-3.3.1.min.js">script>
		<script>
			//分析:需要保证下边的选中状态和第一个复选框的选中状态一致即可

            function selectAll(obj){
      
                //获取下边的复选框
				$(".itemSelect").prop("checked",obj.checked);
            }

		script>
	head>
	<body>
		<table id="tab1" border="1" width="800" align="center" >
			<tr>
				<td colspan="5"><input type="button" value="删除">td>
			tr>
			<tr>
				<th><input type="checkbox" onclick="selectAll(this)" >th>
				<th>分类IDth>
				<th>分类名称th>
				<th>分类描述th>
				<th>操作th>
			tr>
			<tr>
				<td><input type="checkbox" class="itemSelect">td>
				<td>1td>
				<td>手机数码td>
				<td>手机数码类商品td>
				<td><a href="">修改a>|<a href="">删除a>td>
			tr>
			<tr>
				<td><input type="checkbox" class="itemSelect">td>
				<td>2td>
				<td>电脑办公td>
				<td>电脑办公类商品td>
				<td><a href="">修改a>|<a href="">删除a>td>
			tr>
			<tr>
				<td><input type="checkbox" class="itemSelect">td>
				<td>3td>
				<td>鞋靴箱包td>
				<td>鞋靴箱包类商品td>
				<td><a href="">修改a>|<a href="">删除a>td>
			tr>
			<tr>
				<td><input type="checkbox" class="itemSelect">td>
				<td>4td>
				<td>家居饰品td>
				<td>家居饰品类商品td>
				<td><a href="">修改a>|<a href="">删除a>td>
			tr>
		table>
	body>
html>

20.9 JQuery_案例_QQ表情选择


<html>
<head>
    <meta charset="UTF-8" />
    <title>QQ表情选择title>
	 <script  src="../../js/jquery-3.3.1.min.js">script>
    <style type="text/css">
    *{
      margin: 0;padding: 0;list-style: none;}

    .emoji{
      margin:50px;}
    ul{
      overflow: hidden;}
    li{
      float: left;width: 48px;height: 48px;cursor: pointer;}
    .emoji img{
       cursor: pointer; }
    style>
	<script>
        //需求:点击qq表情,将其追加到发言框中
        $(function () {
      
            //1.给img图片添加onclick事件
            $("ul img").click(function(){
      
                //2.追加到p标签中即可。
                $(".word").append($(this).clone());//$(this)是因为this为js对象,需要转为jquery对象,才能调用clone()方法
            });

        });

		
    script>
	
head>
<body>
    <div class="emoji">
        <ul>
            <li><img src="img/01.gif" height="22" width="22" alt="" />li>
            <li><img src="img/02.gif" height="22" width="22" alt="" />li>
            <li><img src="img/03.gif" height="22" width="22" alt="" />li>
            <li><img src="img/04.gif" height="22" width="22" alt="" />li>
            <li><img src="img/05.gif" height="22" width="22" alt="" />li>
            <li><img src="img/06.gif" height="22" width="22" alt="" />li>
            <li><img src="img/07.gif" height="22" width="22" alt="" />li>
            <li><img src="img/08.gif" height="22" width="22" alt="" />li>
            <li><img src="img/09.gif" height="22" width="22" alt="" />li>
            <li><img src="img/10.gif" height="22" width="22" alt="" />li>
            <li><img src="img/11.gif" height="22" width="22" alt="" />li>
            <li><img src="img/12.gif" height="22" width="22" alt="" />li>
        ul>
        <p class="word">
            <strong>请发言:strong>
            <img src="img/12.gif" height="22" width="22" alt="" />
        p>
    div>
body>
html>

20.10 JQuery_案例_多选下拉列表左右移动


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<script  src="../../js/jquery-3.3.1.min.js">script>


		<style>
			#leftName , #btn,#rightName{
      
				float: left;
				width: 100px;
				height: 300px;
			}
			#toRight,#toLeft{
      
				margin-top:100px ;
				margin-left:30px;
				width: 50px;
			}

			.border{
      
				height: 500px;
				padding: 100px;
			}
		style>

		<script>

			//需求:实现下拉列表选中条目左右选择功能
			
			$(function () {
      
				//toRight
				$("#toRight").click(function () {
      
					//获取右边的下拉列表对象,append(左边下拉列表选中的option)
					$("#rightName").append($("#leftName > option:selected"));
                });

                //toLeft
                $("#toLeft").click(function () {
      
                    //appendTo   获取右边选中的option,将其移动到左边下拉列表中
					$("#rightName > option:selected").appendTo($("#leftName"));

                });
            });
			

		script>



	head>
	<body>
		<div class="border">
			<select id="leftName" multiple="multiple">
				<option>张三option>
				<option>李四option>
				<option>王五option>
				<option>赵六option>
			select>
			<div id="btn">
				<input type="button" id="toRight" value="-->"><br>
				<input type="button" id="toLeft" value="<--">

			div>

			<select id="rightName" multiple="multiple">
				<option>钱七option>
			select>

		div>


	body>
html>

你可能感兴趣的:(#,间接,over,jquery,java)