zoukankan      html  css  js  c++  java
  • jQuery基础操作

    1.jQuery的介绍

    jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
    jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,
    能够极大地简化JavaScript编程。
    jQuery对象:
    jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象
    $("#i1").html()的意思是:获取id值为i1的元素的html代码。其中html()是jQuery里的方法。
    相当于:document.getElementById("i1").innerHTML;
    虽然 jQuery对象是包装 DOM对象后产生的,但是 jQuery对象无法使用 DOM对象的任何方法,同理 DOM对象也不能使用 jQuery里的方法。
    一个约定,我们在声明一个jQuery对象变量的时候在变量名前面加上$:
    var $variable = jQuery对像
    var variable = DOM对象
    $variable[0]//jQuery对象转成DOM对象

    jQuery的使用:

    1.首先要下载jQuery,放到html文件下
    2.在html中boby中引入jQuery <script src="jquery-3.3.1.js" ></script>
    3.如果进行jQuery的操作,在script标签中执行

                    查找标签             

                 选择器          

    1.基本选择器

    1.所有元素选择器:$("*")
    2.id选择器:$("#id")
    3.标签选择器:$("tagName")
    4.class选择器:$(".className")
    配合使用:$("div.c1") // 找到有c1 class类的div标签。and的关系
    5.组合选择器:$("#id, .className, tagName") 把符合条件的都能找到,or的关系,逗号分开

    2.层级选择器

    找到的都是y标签
    1.$("x y");// x的所有后代y(子子孙孙)
    2.$("x > y");// x的所有儿子y(儿子)
    3.$("x + y")// 找到所有紧挨在x后面的y
    4.$("x ~ y")// x之后所有的兄弟y
    复制代码
    <ul class="dropdown-menu">
        <li><a href="#">Rain</a></li>
        <li><a href="#">Egon</a></li>
        <li><a href="#">Yuan</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Q1mi</a></li>
    </ul>
    <div>你好吗</div>
    <span>我很好</span>
    <div>你怎么样</div>
    复制代码
    
    
    1.$(".dropdown-menu  a") #r.fn.init(4) [a, a, a, a, 4个符合条件的,找到的都是a标签
    2.$(".dropdown-menu>a")  #fn.init 无结果
    3.$(".dropdown-menu>li") #r.fn.init(5) [li, li, li, li.divider, li
    4.$(".dropdown-menu+div")  #r.fn.init [div,
    5.$(".dropdown-menu~div")  #r.fn.init(2) [div, div,

    3.属性选择器

    <input type="text" name="username">
    <input type="checkbox" name="gender" value="basketball">篮球
    1.[attribute]
    2.[attribute=value]// 属性等于
    <input type="checkbox">
    $("input[type='checkbox']");// 取到checkbox类型的input标签
    $("input[name='username']") // 取到name属性为username类型的input标签
    $("input[type!='text']");// 取到类型不是text的input标签

    4.基本筛选器

    :first // 第一个  $("div:first");
    :last // 最后一个 $("#1 >div:last");
    :eq(index)// 索引等于index的那个元素 $("#1 > div:eq(1)");
    :even // 匹配所有索引值为偶数的元素,从 0 开始计数
    :odd // 匹配所有索引值为奇数的元素,从 0 开始计数
    :gt(index)// 匹配所有大于给定索引值的元素
    :lt(index)// 匹配所有小于给定索引值的元素
    not和has
    :not(元素选择器)// 找到所有满足not条件的标签,即在这个标签内没有noy中的条件
    :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)111111111144       
    $("#1:has(div)");将后代中有div标签的id=1的标签找出来。找到的时id=1这个大标签
    $("div:has(h1)")// 找到所有后代中有h1标签的div标签
    $("li:not(“a")// 找到所有本身不含a标签的li标签
    $("span:not("icon-bar")找到所有本身不含icon-bar类的span标签

    5.表单常用筛选

    :text
    :password
    :file
    :radio
    :checkbox
    $("input[type='checkbox']");可以直接写成$(":checkbox")
    表单对象属性:
    :enabled  #可用的
    :disabled
    :checked #单选和复选框
    :selected #下拉框
    $(":selected") // 找到所有被选中的option
    
    
    复制代码
    <select id="s1">
      <option value="beijing">北京市</option>
      <option value="shanghai">上海市</option>
      <option selected value="guangzhou">广州市</option>
      <option value="shenzhen">深圳市</option>
    </select>
    $(":selected")  // 找到所有被选中的option
    复制代码
    对符合条件的标签做css样式:$("div").css("color", "red")

             筛选器方法      

    1.下一个元素:指同一级的元素
    $("#id").next()
    $("#id").nextAll()
    $("#id").nextUntil("#i2")
    复制代码
    <div id="1">
        <div>天青色等烟雨
            <div class="sub">江南</div>
            <div>而我在等你</div>
         </div>
    </div>
    <div id="2">只要你敢不懦弱</div>
    <div id="3">凭什么我们要错过</div>
    $("#1").next();显示的是<div id="2">只要你敢不懦弱</div>这个标签
    $("#1").nextAll() 显示所有和它同级的元素<div id="2">只要你敢不懦弱</div> <div id="3">凭什么我们要错过</div>
    复制代码
    
    
    2.上一个元素:
    $("#id").prev()
    $("#id").prevAll()
    $("#id").prevUntil("#i2")
    3.父亲元素:
    $("#id").parent() $("#2").parent();父元素是body
    $("#id").parents() // 查找当前元素的所有的父辈元素 找祖先,一直找到html
    $("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。
    $(".jk").parentsUntil("#1");
    4.儿子和兄弟元素:
    $("#id").children();// 儿子们
    $("#id").siblings();// 兄弟们 #上下都找
    find和filter
    find查找元素:
    $("#id").find()// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
    $("div").find("p") 等价于$("div p") 找到div标签中的所有p标签
    $("div").find("span") #r.fn.init(8) [span.sr-only, span.icon-bar,
    filter筛选:用于缩小匹配的范围
    $("div").filter(".c1") // 等价于 $("div.c1") 从结果集中过滤出有c1样式类的div标签。找到的时div标签
    $("div").filter(".navbar-header") #r.fn.init [div.navbar-header
    
    

                 操作标签         

    
    

       样式类操作   

    addClass();// 添加指定的CSS类名。
    removeClass();// 移除指定的CSS类名。
    hasClass();// 判断样式存不存在
    toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加。
    <div class="container">
    1.$(".container").addClass("item")  <div class="container item ">
    2.$(".container").hasClass("item")   #true
    将所有p标签的字体设置为红色:
    $("p").css("color", "red"); 
    菜单操作
    <div class="menu">
        <div class="title">菜单一</div>
        <div class="item-list hide">
            <div>内容一</div>
            <div>内容二</div>
            <div>内容三</div>
        </div>
        <div class="title">菜单二</div>
        <div class="item-list hide">
            <div>内容一</div>
            <div>内容二</div>
            <div>内容三</div>
        </div>
        <div class="title">菜单三</div>
        <div class="item-list hide">
            <div>内容一</div>
            <div>内容二</div>
            <div>内容三</div>
        </div>
    </div>
    <script>
        // 找到所有 class 中有title的div标签
        $(".title").on("click", function () {
            // 把其它的选项隐藏掉
            // $(this)
            // 找到当前点击标签的兄弟标签  --> 含有title class的兄弟标签
            $(this).siblings(".title").next().addClass("hide");
            $(this).next().removeClass("hide");
            // 方法二:
             $(".items").addClass("hide");  //批量操作
             $(this).next().removeClass("hide");
            // 当前点击的标签 下一个标签 显示出来--> 从class移除hide
            // this  --> 当前操作的标签  --> DOM对象 --> 不能调用jQuery对象
            // $(this)    --> DOM对象用$()包起来就能转换成jQuery对象,就能调用jQuery的方法
            // $(this).next()  --> 找到了当前点击标签的下一个标签
        })
    </script>

          位置    

    offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
    position()// 获取匹配元素相对父元素的偏移
    scrollTop()// 获取匹配元素相对滚动条顶部的偏移
    scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
    $(".c1").offset(); #{left: 200, top:200}
    可以自定义:$(".c1").offset({left: 400, top:100});

        文本操作     

    <div class="jer">你好吗</div>
    <span class="jer">我很好</span>
    <div class="jer">你怎么样</div>
    1.HTML代码:
    html()// 取得第一个匹配元素的html内容
    $(".jer").html() "你好吗"
    html(val)// 设置所有匹配元素的html内容
    $(".jer").html("zhaoguangfei")
    <div class="jer">zhaoguangfei</div>
    <span class="jer">zhaoguangfei</span>
    <div class="jer">zhaoguangfei</div>
    2.文本值
    text()// 取得所有匹配元素的内容
    $(".jer").text() 你好吗我很好你怎么样"
    text(val)// 设置所有匹配元素的内容
    3.val值:用于获取form表单的值
    val()// 取得第一个匹配元素的当前值
    val(val)// 设置所有匹配元素的值
    val([val1, val2])// 设置checkbox、select的值

    <p> #单选框 checked=""默认被选中
    <label >性别:
        <input type="radio" name="gender" value="1" checked="">男 #默认被选中
        <input type="radio" name="gender" value="2">女
         <input type="radio" name="gender" value="3">不详
    </label>
    </p>
    <p>  #多选框 checked=""默认被选中
    <label >爱好:
        <input type="checkbox" name="gender" value="basketball">篮球
        <input type="checkbox" name="gender" value="football">足球
        <input type="checkbox" name="gender" value="voallbe">网球
    </label>
    </p>
    <p> #单选下拉框 selected="" 默认被选中
    <label >喜欢看的书籍:
        <select name="book" >
            <option value="book1" selected="" >围城</option>
            <option value="book2">活着</option>
            <option value="book3">大秦帝国</option>
            <option value="book4">平凡的世界</option>
            <option value="book5">穆斯林的葬礼</option>
        </select>
    
    </label>
    </p>
    <p>  #多选下拉框 selected="" 默认被选中
    <label >喜欢看的影视:
        <select name="tv" multiple>
            <option value="1" >唐人街探案</option>
            <option value="2" selected=""  >泰囧</option>
            <option value="3">极限挑战</option>
            <option value="4">伪装者</option>
            <option value="5">琅琊榜</option>
        </select>
    </label>
    </p>
    1.获取值:
    1.获取单选框被选中的value值
    console.log($('input[type=radio]:checked').val())
    2.复选框被选中的value,获取的是第一个被选中的值
    console.log($('input[type=checkbox]:checked').val())
    获取所有选中的值:
    var content=$("input[type='checkbox']:checked")
    $.each(content,function(){
        console.log($(this).val());
    })
    basketball
    football
    获取所有的值存到列表中:
    var value=new Array();
    $.each(content,function(){
        value.push(($(this).val()));
    })
    #["basketball", "football"]
    
    
    3.下拉列表被选中的值
    $("select[name='book'] option:selected").val()
    4.下拉列表被选中的值,获取的是第一个被选中的值
    $("select[name='tv] option:selected").val()
    2.设置值:
    1.设置单选按钮和多选按钮被选中项
    $('input[type=radio]').val(['112']);
    $('input[type=checkbox]').val(['a','b']);
    2.设置下拉列表框的选中值,必须使用select
    因为option只能设置单个值,当给select标签设置multiple。
    那么我们设置多个值,就没有办法了,但是使用select设置单个值和多个值都可以
    $('select').val(['3','2'])

           属性操作     

    attr(attrName)// 返回第一个匹配元素的属性值
    attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
    attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
    removeAttr()// 从每一个匹配的元素中删除一个属性
    attr():
    1.获取值:attr()设置一个属性值的时候 只是获取值
    <div class="jer" name="zhao"></div>
    $("select").attr('name'); #"zhao"
    $("div").attr('class') #"jer"
    2.设置值
    1.设置一个值 设置div的class为box
    $('div').attr('class','box')
    //2.设置多个值,参数为对象,键值对存储
    $('div').attr({name:'hahaha',class:'happy'})
    $("div").attr({name:'haahha',class:['box','zhao']})
    #<div class="box,zhao" name="haahha"></div>
    removeAttr():
    1.删除单个属性
    $('div').removeAttr('class')
    2.删除多个属性
    $('div').removeAttr('name class');

       jquery中attr和prop的区别   

    对于HTML元素本身就带有的固有属性(本身就带有的属性),在处理时,使用prop方法。
    对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
    <a href="#" id="link1"  class="btn" action="delete">删除</a>
    这个例子里<a>元素的DOM属性有“href、id,class和action”,很明显,前三个是固有属性,而后面一个“action”属性是我们自己自定义上去的
    <a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时,建议使用attr方法
    使用prop方法对自定义属性取值和设置属性值时,都会返回undefined值。
    像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此需要使用prop方法去操作才能获得正确的结果。
    $("#chk1").prop("checked") == false  
    $("#chk2").prop("checked") == true  
    如果上面使用attr方法,则会出现:
    $("#chk1").attr("checked") == undefined  
    $("#chk2").attr("checked") == "checked" 
    为了兼容性,我们在处理checkbox和radio的时候尽量使用特定的prop(),不要使用attr("checked", "checked")。
    <input type="checkbox" value="1">
    <input type="radio" value="2">
    <script>
      $(":checkbox[value='1']").prop("checked", true);
      $(":radio[value='2']").prop("checked", true);
    </script>

      文档处理    

    1.添加

    1.添加到指定元素内部的后面 父元素.append(子元素)

    $(A).append(B)// 把B追加到A
    $(A).appendTo(B)// 把A追加到B
    追加某元素,在父元素中添加新的子元素。子元素可以为:stirng | element(js对象) | jquery元素
    var newtag=document.createElement("span")
    newtag.innerText="天青烟雨";
    $("[name=jerd]").append(newtag);  #js对象
    $('[name=jerd]').append('<li>1233</li>'); #stirng
    $('[name=jerd]l').append($('#app')); #jquery元素
    如果追加的是jquery对象那么这些元素将从原位置上消失。简言之,就是一个移动操作。

    2.添加到指定元素内部的前面父元素.prepend(子元素)

    $(A).prepend(B)// 把B前置到A 前置添加, 添加到父元素的第一个位置

    $(A).prependTo(B)// 把A前置到B 

    3.添加到指定元素外部的后面

    $(A).after(B)// 把B放到A的后面
    $(A).insertAfter(B)// 把A放到B的后面

    4.添加到指定元素外部的前面

    $(A).before(B)// 把B放到A的前面
    $(A).insertBefore(B)// 把A放到B的前面
    增加.删除操作
    <table border="1">
        <thead>
        <tr>
            <th>#</th>
            <th>姓名</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>金老板</td>
            <td><input type="button" value="删除" class="delete"></td>
        </tr>
        <tr>
            <td>2</td>
            <td>景女神</td>
            <td><input type="button" value="删除" class="delete"></td>
        </tr>
        <tr>
            <td>3</td>
            <td>隔壁老王</td>
            <td><input type="button" value="删除" class="delete"></td>
        </tr>
        </tbody>
    </table>
    <script src="jquery-3.3.1.js"></script>
    <script>
        // 点击添加按钮添加一条新数据
        // 1. 找到按钮绑定点击事件
        $("#add").on("click", function () {
            // 当添加按钮被点击之后要做的事儿
            // 1. 创建一个新的tr
            var trEle = document.createElement("tr");
            trEle.innerHTML = "<td>4</td> <td>哪吒</td>";
            // 2. 把创建好的tr追加到tbody里面
            $("tbody").append(trEle);
        });
    
        // 点击每一行的删除按钮,把当前行删除掉
        // 1. 找到每一行的删除按钮,绑定点击事件
        $(".delete").on("click", function () {
            // 当每一行的删除按钮被点击后要做的事儿
            // 1. 删除当前被点击的按钮的这一行
            console.log(this);
            $(this).parent().parent().remove();
    
        })
    </script>
    
    

    2.修改

    replaceWith()和replaceAll() 替换
    remove()// 从DOM中删除所有匹配的元素。
    empty()// 删除匹配的元素集合中所有的子节点。

    1.replaceWith()和replaceAll()

    $(selector).replaceWith(content);
    将所有匹配的元素替换成指定的string、js对象、jquery对象。
    //将所有的h5标题替换为a标签
    $('h5').replaceWith('<a href="#">hello world</a>')
    //将所有h5标题标签替换成id为app的dom元素
    $('h5').replaceWith($('#app'));
    替换所有。将所有的h2标签替换成p标签。
    $('<p>哈哈哈</p>')replaceAll('h2');

    2.remove()

    $(selector).remove(); 
    删除节点后,事件也会删除(简言之,删除了整个标签)
    $(selector).detach();:删除节点后,事件会保留
    var $btn = $('button').detach()
    //此时按钮能追加到ul中,
    $('ul').append($btn)
    <input type="button" value="点我就点我">在原来位置消失,但在ul标签内会出现

    3.empty()

    清空选中元素中的所有后代节点
    //清空掉ul中的子元素,保留ul
    $('ul').empty()

       克隆操作    

    $(选择器).clone();
    1.clone():克隆匹配的DOM元素
    2.clone(true):元素以及其所有的事件处理并且选中这些克隆的副本(简言之,副本具有与真身一样的事件处理能力)
    复制代码
    <button id="b1">屠龙宝刀,点击就送</button>
    <hr>
    <button id="b2">屠龙宝刀,点击就送</button>
    
    <script src="jquery-3.2.1.min.js"></script>
    <script>
      // clone方法不加参数true,克隆标签但不克隆标签带的事件
      $("#b1").on("click", function () {
        $(this).clone().insertAfter(this);
      });
      // clone方法加参数true,克隆标签并且克隆标签带的事件
      $("#b2").on("click", function () {
        $(this).clone(true).insertAfter(this);
      });
    </script>
    努力到无能为力,拼搏到感动自己。 欢迎大家在下方多多评论。
  • 相关阅读:
    WCF Server Console
    Restart IIS With Powershell
    RestartService (recursively)
    Copy Files
    Stopping and Starting Dependent Services
    多线程同步控制 ManualResetEvent AutoResetEvent MSDN
    DTD 简介
    Using Powershell to Copy Files to Remote Computers
    Starting and Stopping Services (IIS 6.0)
    java中的NAN和INFINITY
  • 原文地址:https://www.cnblogs.com/wasbg/p/10766738.html
Copyright © 2011-2022 走看看