zoukankan      html  css  js  c++  java
  • Jquery

    ---恢复内容开始---

    ID选择器

    <div id="test">xx</div>

    $("#test")   -------->$("#test")[0]            //转换为DOM对象

    var c=document.getElementById('test')     ---> $(c)    //转换为jquery

    标签选择器:

    $('div')

    类class选择器:

    $('.test')

    组合选择器

    $("div,input")

    层级

    $('form input')  form下面所有的input

    $('form > input') from最近的input

    筛选器

    $("ul:first")  第一个ul

    $("ul:eq(n)") 第n个ul

    $("ul:last")  最后一个ul

    ....

    属性选择器:
    $("input[type='text']") 获取input下type=text的标签

    全选、取消、反选案例

    <input type="button" value="全选" onclick="SelectAll(this)" />
    <input type="button" value="反选" onclick="Unselect(this)" />
    <input type="button" value="取消" onclick="Cancel(this)" />
    
    
    
    //table>tr*3>td{$}*3  之后按TAB自动生成表格
    <table border="1" width="200px">
        <tr>
            <td><input type="checkbox"/></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
    
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
    
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
    
    <script src="jquery.js"></script>
    <script>
    
        function SelectAll() {
            $('input[type="checkbox"]').prop("checked",true);
        }
        function Cancel() {
            $('input[type="checkbox"]').prop("checked",false);
        }
        function Unselect() {
            $('input[type="checkbox"]').each(function () {
    
                $(this).prop("checked") ? $(this).prop("checked",false) : $(this).prop("checked",true);
    
    //            var t=$(this).prop("checked");  //方式二
    //            if(t){$(this).prop("checked",false)}else {$(this).prop("checked",true)}
            });
        }
    </script>
    View Code

    筛选器:

    next   获取下一个元素

    nextAll   nextUtil

    prev  获取上一个元素

    prevAll  prevUtil

    parent()  获取父元素

    children()  获取所有子元素

    siblings()  获取兄弟元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .info{
                width: 400px;
            }
            .header{
                /*height: 34px;*/
                cursor: pointer;
                background-color: aqua;
            }
            .content{
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="info">
            <div class="item">
                <div class="header">菜单一</div>
                <div class="content">内容一</div>
                <div class="content">内容一</div>
                <div class="content">内容一</div>
            </div>
            <div class="item">
                <div class="header">菜单二</div>
                <div class="content">内容二</div>
                <div class="content">内容二</div>
                <div class="content">内容二</div>
            </div>
            <div class="item">
                <div class="header">菜单三</div>
                <div class="content">内容三</div>
                <div class="content">内容三</div>
                <div class="content">内容三</div>
            </div>
        </div>
    </body>
    <script src="jquery.js"></script>
    <script>
        $(".header").click(function(){
            $(this).nextAll().css("display","block");
            $(this).parent('.item').siblings('.item').children('.content').css("display","none");
        });
        </script>
    </body>
    </html>
    菜单

    动画:

    <img  src="x.jpg" style="display:none">xxx</img>

    $("img").show(1000);   //将display显示,后面括号里面时间

    $("img").hide(1000);

    $("img").toggle("slow");

    $("img").fadeIn(1000); 淡入

    $("img").fadeOut(1000);淡出

    $("img").slideToggle(1000); 如果是隐藏的就显示,如果是显示的就隐藏

    样式操作:

    $("#xxx").css("display",none);

    addClass(); 添加样式

    removeClass();删除样式

    hasClass(); 判断是否有样式

    文本操作:

    $("xxx").text() //获取文本信息,或者设置文本信息

    $("xxx").val()   input系列框里面的值

    属性操作:

    $("xxx").attr("","")  //赋值

    $("xxx").attr(""); //取值

    ---恢复内容结束---

  • 相关阅读:
    Oracle SQL语句记录
    Gvim 在进行文件对比时报cannot read or write temp files
    Java Lock
    Java Synchronized
    CLH锁 、MCS锁
    JVM 运行时内存结构
    XSS攻击及防御
    Java IO 技术之基本流类
    Java 对象的串行化(Serialization)
    Java final关键字
  • 原文地址:https://www.cnblogs.com/arthas-zht/p/6778129.html
Copyright © 2011-2022 走看看