jquery disabled 样式

转载

deanyuancn 2024-09-03 22:49:48

文章标签 jquery disabled 样式 ide html css 文章分类 jQuery 前端开发

1. jQuery操作样式

css操作

功能:设置或者修改样式,操作的是style属性。

操作单个样式

//name:需要设置的祥式名称

//value:对应的样式值

css(name, value);

//使用案例

$("one").css("background", "ray";//将背果色修改为灰色

设置多个样式

//参数是一个对象: 对象中包含了需要设置的样式名和样式值

css(obi);

//使用案例

$("#one").css({

      "background":"gray",

      "width":"408px"，

       "height" :"200px"

});

|获取样式

//name:需要获取的样式名称

css(name);

//案例

$("div").css("background-color");

注意:获取样式操作只会返回第一个元素对应的样式值。

隐式迭代:

1.设置操作的时候,如果是多个元素,那么给所有的元素设置相同的值

2.获取操作的时候,如果是多个元素,那么只会返回第一个元素的值。

class操作

添加样式类

/ /name:需要添加的样式类名，注意参数不要帯点.

addClass(name);

//例子，給所有的dv添加one的佯式。

$("div").addClass（"one");

移除样式类

/ /name :需要移除的样式类名

removeClass("name");

//例子，移除div中one的样式类名

$("div").removeClass("one");

判断是否有某个样式类

//name:用于判断的样式类名，返回値为true false

hasClass(name)

//例子，判断第一↑div是否有one的样式类

$("div").hasClass("one");

切换样式类

//name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。

toggleClass(name);

//例子

$("div").toggleClass("one")

案例：tab栏切换

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    
    ul {
      list-style: none;
    }
    
    .wrapper {
      width: 1000px;
      height: 475px;
      margin: 0 auto;
      margin-top: 100px;
    }
    
    .tab {
      border: 1px solid #ddd;
      border-bottom: 0;
      height: 36px;
      width: 320px;
    }
    
    .tab li {
      position: relative;
      float: left;
      width: 80px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      cursor: pointer;
      border-top: 4px solid #fff;
    }
    
    .tab span {
      position: absolute;
      right: 0;
      top: 10px;
      background: #ddd;
      width: 1px;
      height: 14px;
      overflow: hidden;
    }
    
    .products {
      width: 1002px;
      border: 1px solid #ddd;
      height: 476px;
    }
    
    .products .main {
      float: left;
      display: none;
    }
    
    .products .main.selected {
      display: block;
    }
    
    .tab li.active {
      border-color: red;
      border-bottom: 0;
    }
  
  </style>
  <script src="../jquery-1.12.4.js"></script>
  <script>
    $(function () {
      
      $(".tab-item").mouseenter(function () {
        //两件事件
        $(this).addClass("active").siblings().removeClass("active");
        var idx = $(this).index();
        $(".main").eq(idx).addClass("selected").siblings().removeClass("selected");
      });
      
    });
  </script>

</head>
<body>
<div class="wrapper">
  <ul class="tab">
    <li class="tab-item active">国际大牌<span>◆</span></li>
    <li class="tab-item">国妆名牌<span>◆</span></li>
    <li class="tab-item">清洁用品<span>◆</span></li>
    <li class="tab-item">男士精品</li>
  </ul>
  <div class="products">
    <div class="main selected">
      <a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
    </div>
    <div class="main">
      <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
    </div>
    <div class="main">
      <a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
    </div>
    <div class="main">
      <a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
    </div>
  </div>
</div>

</body>
</html>

2. jQuery操作属性

attr操作

设置单个属性

//第一个参数:需要设置的属性名

//第二个参数:对应的属性值

attr(name, value);

//用法举例

$("img").attr("title" ,哎喲，不错哦");

$("img").attr("alt","哎哟，不错哦");

设置多个属性

//参数是个对象，包含了需要设置的属性名和属性值

attr(obj)

//用法举例

$("img").attr({

  title:"哎哟,不错哦"，

  alt:"哎哟,不错哦"，

  style:"opacity;.5" 

});

获取属性
//传需要获取的属性名称，返回对应的属性值

attr(name )
//用法举例

var oTitle = $("img").attr("tit1e");

alert(oTitie);

prop操作
在jQuery1.6之后 ,对于checked、selected、 disabled这类boolean类型的属性来说,不能用attr方法,只能用prop方法。
//设置属性

//设置属性
$(":checked").prop("checked",true);
//获取属性
$(":checked").prop("checked");//返回true或false

案例：表格全选案例

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    
    .wrap {
      width: 300px;
      margin: 100px auto 0;
    }
    
    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 300px;
    }
    
    th,
    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }
    
    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }
    
    td {
      font: 14px "微软雅黑";
    }
    
    tbody tr {
      background-color: #f0f0f0;
      text-align: center;
    }
    
    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
  </style>
</head>
<body>
<div class="wrap">
  <table>
    <thead>
    <tr>
      <th>
        <input type="checkbox" id="j_cbAll"/>
      </th>
      <th>菜名</th>
      <th>饭店</th>
    </tr>
    </thead>
    <tbody id="j_tb">
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>红烧肉</td>
      <td>田老师</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>西红柿鸡蛋</td>
      <td>田老师</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>红烧狮子头</td>
      <td>田老师</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>日式肥牛</td>
      <td>田老师</td>
    </tr>
    
    </tbody>
  </table>
</div>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    
    $("#j_cbAll").click(function () {
      //修改下面的那些checkbox
      $("#j_tb input").prop("checked", $(this).prop("checked"));
    });
  
    $("#j_tb input").click(function () {
  
      if($("#j_tb input:checked").length  ==  $("#j_tb input").length){
        $("#j_cbAll").prop("checked", true)
      }else {
        $("#j_cbAll").prop("checked", false)
      }
  
    });
    
  });
</script>

</body>
</html>

3. jQuery动画

jquery提供了三组基本动画,这些动画都是标准的、有规律的效果, jquery还提供了自定义动画的功能。

三组基本动画
显示(show)与隐藏(hide)是一组动画，

滑入(slideUp)与滑出(slideDown)与切换(slideToggle), 效果与卷帘门类似

淡入(fadeln)与淡出(fadeOut)与切换(fadeToggle)

show([speed],[callback]);

//speed(可选):动画的执行时间
//1.如果不传，就没有动画效果。如果是slide和fade系列，会默认为normal
//2.毫秒值(比如1000) ,动画在1000毫秒执行完成(推荐)
//3.固定字符串，slow(200)、normal(400)、fast(680)如果传其他字符串，默认为normal。
//callback(可选) :执行完动画后执行的回调函数

案例:京东轮播图

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>京东商城</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    .slider {
      height: 340px;
      width: 790px;
      margin: 100px auto;
      position: relative;
    }
    
    .slider li {
      position: absolute;
      display: none;
    }

    .slider li:first-child {
      display: block;
    }
    
    
    .arrow {
      display: none;
    }
    
    .slider:hover .arrow {
      display: block;
    }
    
    .arrow-left,
    .arrow-right {
      font-family: "SimSun", "宋体";
      width: 30px;
      height: 60px;
      background-color: rgba(0, 0, 0, 0.1);
      position: absolute;
      top: 50%;
      margin-top: -30px;
      cursor: pointer;
      text-align: center;
      line-height: 60px;
      color: #fff;
      font-weight: 700;
      font-size: 30px;
    }
    
    .arrow-left:hover,
    .arrow-right:hover {
      background-color: rgba(0, 0, 0, .5);
    }
    
    .arrow-left {
      left: 0;
    }
    
    .arrow-right {
      right: 0;
    }
  
  </style>
</head>
<body>
<div class="slider">
  <ul>
    <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/6.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/7.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/8.jpg" alt=""></a></li>
  </ul>
  <!--箭头-->
  <div class="arrow">
    <span class="arrow-left"><</span>
    <span class="arrow-right">></span>
  </div>
</div>


<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    
    var count = 0;
    
    $(".arrow-right").click(function () {
      count++;
      
      
      if(count == $(".slider li").length){
        count = 0;
      }
      console.log(count);
      //让count渐渐的显示，其他兄弟渐渐的隐藏
      $(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
    });
    
    $(".arrow-left").click(function () {
      count--;
  
      if(count == -1){
        count = $(".slider li").length - 1;
      }
      console.log(count);
      //让count渐渐的显示，其他兄弟渐渐的隐藏
      $(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
    })
    
  });
</script>

</body>
</html>

自定义动画

animate:自定义动画

$(selector).animate({params,[speed],[easing],[callback]});
//{params}:要执行动画的css属性，带数字（必选）
//speed：执行动画时长（可选）
//easing：执行效果，默认为swing（缓动），可以是linear（匀速）
//callback：动画执行完后立即执行的回调函数（可选）

动画队列与停止动画
在一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成之后才会执行（联想：火车进站）

//stop方法：停止动画效果
stop(clearQueue,jumpToEnd);
第一个参数：是否清除队列
第二个参数：是否跳转到最终效果
stop() 阻止动画事件的排队机制，写在动画事件的前面（最好都要写这个），停别人的动画让自己的执行

案例：手风琴

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    ul {
      list-style: none;
      width: 1300px;
    }
    
    #box {
      width: 1200px;
      height: 400px;
      border: 2px solid red;
      margin: 100px auto;
    }
    
    #box li {
      width: 240px;
      height: 400px;
      /*border: 1px solid #000;*/
      float: left;
    }
  
  </style>
</head>
<body>
<div id="box">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<script src="../jquery-1.12.4.js"></script>
<script>
  $(function () {
    var $li = $("#box li");
    
    for (var i = 0; i < $li.length; i++) {
      $li.eq(i).css("backgroundImage", "url(images/" + (i + 1) + ".jpg)");
    }
  
  
    //给所有的li注册鼠标经过事件
    $li.mouseenter(function () {
      $(this).stop().animate({width:800}).siblings().stop().animate({width:100});
    }).mouseleave(function () {
      $li.stop().animate({width:240});
    });
    
    
  });
</script>
</body>
</html>

4. jQuery节点操作

创建节点
//$(htmlStr)
//htmlStr: html格式的字符串
$("span>这是个span元素</span>");
//在$()中写html代码

添加节点
//append（父元素添加子元素） appendTo（子元素添加到父元素）

//prepend prependTo

//before

//after

案例:城市选择

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    select {
      width: 200px;
      background-color: teal;
      height: 200px;
      font-size: 20px;
    }
    
    .btn-box {
      width: 30px;
      display: inline-block;
      vertical-align: top;
    }
  </style>
</head>

<body>
<h1>城市选择：</h1>
<select id="src-city" name="src-city" multiple>
  <option value="1">北京</option>
  <option value="2">上海</option>
  <option value="3">深圳</option>
  <option value="4">广州</option>
  <option value="5">西红柿</option>
</select>
<div class="btn-box">
  <!--实体字符-->
  <button id="btn1"> >> </button>
  <button id="btn2"> << </button>
  <button id="btn3"> ></button>
  <button id="btn4"> < </button>
</div>
<select id="tar-city" name="tar-city" multiple>
</select>

<script src="jquery-1.12.4.js"></script>
<script>
  
  $(function () {
    $("#btn1").click(function () {
      $("#src-city>option").appendTo("#tar-city");
    });
    
    $("#btn2").click(function () {
      $("#src-city").append($("#tar-city>option"));
    });
    
    $("#btn3").click(function () {
      $("#src-city>option:selected").appendTo("#tar-city");
    });
  
    $("#btn4").click(function () {
      $("#src-city").append($("#tar-city>option:selected"));
    });
  });

</script>

</body>

</html>

清空节点与删除节点
empty :清空指定节点的所有元素,自身保留(清理门户)

$("div").empty();//清空div的所有内容(推荐使用。会清除子元素上绑定的内容。源码〉
$("div*).html("");//使用ntm1方法来清空元素，不推荐使用，会造成内存泄露，绑定的事件不会被清除。

remove :相比于empty，自身也删除(自杀)

$("div").remove();

克隆节点
作用 :复制匹配的元素
//复制$(selector)所匹到的元素(深度复制)

//cloneNode(true)
返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会是响到原来的元素。

$(selector).clone();
案例:微博发布

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    ul {
      list-style: none;
    }
    
    .box {
      width: 600px;
      margin: 100px auto;
      border: 1px solid #000;
      padding: 20px;
    }
    
    textarea {
      width: 450px;
      height: 160px;
      outline: none;
      resize: none;
    }
    
    ul {
      width: 450px;
      padding-left: 80px;
    }
    
    ul li {
      line-height: 25px;
      border-bottom: 1px dashed #cccccc;
    }
    
    input {
      float: right;
    }
  
  
  </style>
</head>
<body>
<div class="box" id="weibo">
  <span>微博发布</span>
  <textarea name="" id="txt" cols="30" rows="10"></textarea>
  <button id="btn">发布</button>
  <ul id="ul">
  
  </ul>
</div>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    
    $("#btn").click(function () {
      
      if($("#txt").val().trim().length == 0) {
        return;
      }
      //就是文本框的值
      $("<li></li>").text($("#txt").val()).prependTo("#ul");
  
      $("#txt").val("");
    })
    
  });
</script>
</body>
</html>

案例：弹幕效果

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    html, body {
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
      font-family: "微软雅黑";
      font-size: 62.5%;
    }
    
    .boxDom {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }
    
    .idDom {
      width: 100%;
      height: 100px;
      background: #666;
      position: fixed;
      bottom: 0px;
    }
    
    .content {
      display: inline-block;
      width: 430px;
      height: 40px;
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
      margin: auto;
    }
    
    .title {
      display: inline;
      font-size: 4em;
      vertical-align: bottom;
      color: #fff;
    }
    
    .text {
      border: none;
      width: 300px;
      height: 30px;
      border-radius: 5px;
      font-size: 2.4em;
    }
    
    .btn {
      width: 60px;
      height: 30px;
      background: #f90000;
      border: none;
      color: #fff;
      font-size: 2.4em;
    }
    
    span {
      width: 300px;
      height: 40px;
      position: absolute;
      overflow: hidden;
      color: #000;
      font-size: 4em;
      line-height: 1.5em;
      cursor: pointer;
      white-space: nowrap;
    }
  
  </style>
</head>

<body>

<div class="boxDom" id="boxDom">
  <div class="idDom" id="idDom">
    <div class="content">
      <p class="title">吐槽:</p>
      <input type="text" class="text" id="text"/>
      <button type="button" class="btn" id="btn">发射</button>
    </div>
  </div>
</div>
</body>

<script src="jquery-1.12.4.js"></script>
<script>
  
  $(function () {
    
    //注册事件
    var colors = ["red", "green", "hotpink", "pink", "cyan", "yellowgreen", "purple", "deepskyblue"];
    $("#btn").click(function () {
      var randomColor = parseInt(Math.random() * colors.length);
      var randomY = parseInt(Math.random() * 400);
      
      $("<span></span>")//创建span
        .text($("#text").val())//设置内容
        .css("color", colors[randomColor])//设置字体颜色
        .css("left", "1400px")//设置left值
        .css("top", randomY)//设置top值
        .animate({left: -500}, 10000, "linear", function () {
          //到了终点，需要删除
          $(this).remove();
        })//添加动画
        .appendTo("#boxDom");
      
      
      $("#text").val("");
    });
    
    
    $("#text").keyup(function (e) {
      if (e.keyCode == 13) {
        $("#btn").click();
      }
    });
    
  });

</script>
</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。