jquery方法与属性

最新推荐文章于 2023-03-21 17:02:08 发布

drunk喵咪

最新推荐文章于 2023-03-21 17:02:08 发布

阅读量87

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/jdrunk/article/details/108719556

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、引用

   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

2、dom属性
（1）addClass
为每个匹配的元素添加指定的样式类名,一般与removeClass一起使用，用来切换元素的样式

$('p').removeClass('myClass').addClass('yourClass')

自 jQuery 1.4开始, .addClass() 方法允许我们通过传递一个用来设置样式类名的函数。

$("ul li").addClass(function(index) {    //通过函数设置类名
       return "item-" + index;
 });

示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>jquery</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
</head>
<body>
    <div
    class="table-page-btn-list special-column-edit-container" id="app"
  >
  <p>中国江西九江</p>
  <ul>
      <li>列表一</li>
      <li>列表二</li>
  </ul>
  </div>
	<script>
        $(function(){
            $('p').addClass('myClass')
            $('p').removeClass('myClass').addClass('yourClass')
            $("ul li").addClass(function(index) {    //通过函数设置类名
                 return "item-" + index;
            });
        })
    </script>
    <style>
        ul{
            list-style: none;
        }
        .myClass{
            background: yellow;
            padding: 5px;
        }
        .yourClass{
            background: red;
            padding: 5px;
        }
        .item-0{
            color:blue;
        }
        .item-1{
            color:palevioletred;
        }
    </style>
</body>

在这里插入图片描述
（2）.attr
.attr( attributeName ) 获取匹配的元素集合中的第一个元素的属性的值。

 let title = $('em').attr('title')
 $("p").text(title)

.attr( attributeName, value ) 设置每一个匹配元素的一个或多个属性。

$('#pic').attr('alt','jiangxi')   //方法一

$('#pic').attr({    //方法二
  alt: 'Beijing Brush Seller',
  title: 'photo by Kelly Clark'
});

$('#pic').attr('title', function(i, val) {   //方法三
  return val + ' - photo by Kelly Clark'
});

示例：

<body>
    <div
    class="table-page-btn-list special-column-edit-container" id="app"
  >
  <p>中国江西九江</p>
  <ul>
      <li>列表一</li>
      <li><em title="huge">列表二</em></li>
  </ul>
  <img id="pic" src="" alt="picture">
  </div>
	<script>
        $(function(){
            $('p').addClass('myClass')
            $('p').removeClass('myClass').addClass('yourClass')
            $("ul li").addClass(function(index) {
                 return "item-" + index;
            });
            let title = $('em').attr('title')
            $("p").text(title)
            $('#pic').attr('alt','jiangxi')
        })
    </script>
    <style>
        ul{
            list-style: none;
        }
        .myClass{
            background: yellow;
            padding: 5px;
        }
        .yourClass{
            background: red;
            padding: 5px;
        }
        .item-0{
            color:blue;
        }
        .item-1{
            color:palevioletred;
        }
    </style>
</body>

在这里插入图片描述
demo

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; }
  span { color:red; }
  b { font-weight:bolder; }
        </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
  <div>Zero-th <span></span></div>
  <div>First <span></span></div>
  <div>Second <span></span></div>
 
<script>
$("div").attr("id", function (arr) {
  return "div-id" + arr;
})
.each(function () {
  $("span", this).html("(ID = '<b>" + this.id + "</b>')");
});
</script>
 
</body>
</html>

(3).hasClass( className )
确定任何一个匹配元素是否有被分配给定的（样式）类,有给定类，返回true,否则，返回false

 <p id="result">First paragraph has selected: <span class="res"></span></p>
 ===
$(function(){
            let result = $("div#result").hasClass("local")
            console.log(result)
            $('.res').text(result)
        })

在这里插入图片描述
(4).html()
获取集合中第一个匹配元素的HTML内容或设置每一个匹配元素的html内容

<p>
    <b>Click</b> to change the <span id="tag">html</span>
</p>
  
 $("p").click(function () {
            var htmlStr = $(this).html();
            $(this).text(htmlStr);
        });
    })

点击前
在这里插入图片描述
点击后

设置每一个匹配元素的html内容。

<div></div>
<div></div>
====
 $("div").html("<span class='red'>Hello <b>Again</b></span>")
====  
    <style>
        .red{
            color:red;
        }
    </style>

在这里插入图片描述
（5）.prop()
获取匹配的元素集中第一个元素的属性（property）值

<input id="check1" type="checkbox" checked="checked">
 <label for="check1">Check me</label>
  <p></p>
  ===
$("p").html(".attr('checked'): <b>" + $input.attr('checked') + "</b><br>"
                        + ".prop('checked'): <b>" + $input.prop('checked') + "</b><br>"
                        + ".is(':checked'): <b>" + $input.is(':checked') ) + "</b>";
            }).change();

在这里插入图片描述

为匹配的元素设置一个或多个属性（properties）

<input id="check1" type="checkbox" checked="checked">
$("input[type='checkbox']").prop({
            disabled: true
            });

在这里插入图片描述
（6）.removeAttr()
为匹配的元素集合中的每个元素中移除一个属性

<input type="text" title="hello there" />

var inputTitle = $("input").attr("title");
  $("button").click(function () {
    var input = $(this).next();
 
    if ( input.attr("title") == inputTitle ) {
      input.removeAttr("title")
    } else {
      input.attr("title", inputTitle);
    }

（7）.removeClass()
除集合中每个匹配元素上一个，多个或全部样式

$('p').removeClass('myClass noClass').addClass('yourClass');

（8）.removeProp( propertyName )
集合中匹配的元素删除一个属性

<p></p>
==
 var $para = $("p");
$para.prop("luggageCode", 1234);
$para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");
$para.removeProp("luggageCode");
$para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");

（9）.toggleClass()
在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名。

<!DOCTYPE html>
<html>
<head>
  <style>
 
  p { margin: 4px; font-size:16px; font-weight:bolder;
      cursor:pointer; }
  .blue { color:blue; }
  .highlight { background:yellow; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p class="blue">Click to toggle</p>
  <p class="blue highlight">highlight</p>
  <p class="blue">on these</p>
  <p class="blue">paragraphs</p>
<script>
    $("p").click(function () {
      $(this).toggleClass("highlight");
    });
</script>
 
</body>
</html>

（10）.val()要用于获取表单元素的值
获取匹配的元素集合中第一个元素的当前值或设置匹配的元素集合中每个元素的值

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:red; margin:4px; }
  b { color:blue; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p></p>
 
  <select id="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
 
  <select id="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select>
 
<script>
    function displayVals() {
      var singleValues = $("#single").val();
      var multipleValues = $("#multiple").val() || [];
      $("p").html("<b>Single:</b> " +
                  singleValues +
                  " <b>Multiple:</b> " +
                  multipleValues.join(", "));
    }
 
    $("select").change(displayVals);
    displayVals();
 
</script>
 
</body>
</html>

drunk喵咪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery方法与属性

1、引用 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>2、dom属性（1）addClass为每个匹配的元素添加指定的样式类名,一般与removeClass一起使用，用来切换元素的样式$('p').removeClass('myClass').addClass('yourClass')自 jQuery 1.4开始, .addClass() 方
复制链接

扫一扫