通天源码jqury的操作属性作业

最新推荐文章于 2023-06-25 22:49:57 发布

weixin_44102403

最新推荐文章于 2023-06-25 22:49:57 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/weixin_44102403/article/details/85006500

版权

操作属性一

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

/*  .red{color: pink}

.oks{font-weight: bold;font-size: 35px;} */

#web{font-weight: bold;font-size: 35px;}

</style>

<script type="text/javascript"src="js/jquery-3.3.1.min.js"></script>

</head>

<body>

<script type="text/javascript">

// jQuery的操作属性其原理还是对于DOM的操作

// 通过对象的关系，对节点树中的元素的属性进行操作的方法有以下：

    

// addClass() 该方法向被选中的元素添加一个或者多个类

// removeClass() 该方法从被选中的元素移除一个或者多个类

// attr() 该方法设置或者返回被选中元素的属性值

// removeAttr() 该方法从被选中的元素中移除属性

// hasClass() 该方法检查被选中的元素是否包含指定class

// toggleClass()该方法对被选中元素进行添加/删除类的切换操作

// 设置内容：

// text()  该方法返回或者设置被选中的元素的文本内容

     //html() 该方法返回或者设置被选中的元素的内容（类似innerHTML 可以包括html标签）

// val() 该方法返回或者设置被选元素的值

$(document).ready(function(){

$('p').addClass('red oks')    //给p标签增加red 和oks的css属性、 可以多增加

$('p').removeClass('oks')     //给p标签移除oks的css属性  可以多个移除

// alert($('p').attr('id',''))      //p标签下的ID等于的值 列如 id=web   那么久等于web  

// ($('p').attr('id','修改'))  //也可以修改id下的

        $('button').click(function(){   //删除按钮被点击执行  img下移除src属性

          $('img').removeAttr('src') 

           //removeAttr   点击按钮 执行img里面的src被移除

                 

         alert($('div').hasClass('ord'))  //div下clss下右ord这个元素

        })

        })


         })

</script>

<p id="wed">我是通天源码论坛</p>

<img src="www.ttkmwl.com/forum.php">

<button>QQ：2172243813</button>

<div>我是通天源码论坛</div>

<button class="">www.ttkmwl.com</button>

</body>

</html>

操作属性二

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

/*  .red{color: pink}

.oks{font-weight: bold;font-size: 35px;} */

.web{font-weight: bold;font-size: 35px;color: pink;}

.v{color: red;}

</style>

<script type="text/javascript"src="js/jquery-3.3.1.min.js"></script>

</head>

<body>

<script type="text/javascript">

// jQuery的操作属性其原理还是对于DOM的操作

// 通过对象的关系，对节点树中的元素的属性进行操作的方法有以下：

    

// addClass() 该方法向被选中的元素添加一个或者多个类

// removeClass() 该方法从被选中的元素移除一个或者多个类

// attr() 该方法设置或者返回被选中元素的属性值

// removeAttr() 该方法从被选中的元素中移除属性

// hasClass() 该方法检查被选中的元素是否包含指定class

// toggleClass()该方法对被选中元素进行添加/删除类的切换操作

// 设置内容：

// text()  该方法返回或者设置被选中的元素的文本内容

     //html() 该方法返回或者设置被选中的元素的内容（类似innerHTML 可以包括html标签）

// val() 该方法返回或者设置被选元素的值

$(document).ready(function(){

     $('button').click(function(){

      $('p,h1,h2,h3,i').toggleClass('web')   //点击按钮  获取标签  在给css的值        增加元素或者  删除操作

     })

     $('p').text('我师傅是灭绝师太')   //返回货设置选中文本内柔  删除和增加内柔

 //    $('h1').html('<span>vo</span>')  //返回或者设置被选中的内容

     $('input').val('v')             //改变值

        })


</script>

<p>我的事件</p>

<h1>我的快乐</h1>

<h2>我的玩具</h2>

<h3>我的师傅是师太</h3>

<i>holo word</i>

<button>点击</button>

<input type="" name="" value="我的师傅是师太">

</body>

</html>

生成以下效果：
操作属性一

Document

我是通天源码论坛

QQ：2172243813

我是通天源码论坛

www.ttkmwl.com

操作属性二

Document

我的事件

我的快乐

我的玩具

我的师傅是师太

holo word

点击

weixin_44102403

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
通天源码jqury的操作属性作业

操作属性一Document我是通天源码论坛QQ：2172243813我是通天源码论坛www.ttkmwl.com操作属性二Document我的事件我的快乐我的玩具我的师傅是师太holo word点击...
复制链接

扫一扫