一些jquery 常用实例图解

最新推荐文章于 2022-04-06 15:07:54 发布

bcbobo21cn

最新推荐文章于 2022-04-06 15:07:54 发布

阅读量353

点赞数

分类专栏： web前端文章标签： jquery css

本文链接：https://blog.csdn.net/bcbobo21cn/article/details/89106646

版权

web前端专栏收录该内容

150 篇文章 1 订阅

订阅专栏

使用工具jquery pad；

1 jquery 隐藏

单击p，p隐藏；

2 jquery 滑动

一开始，div中的内容是不显示的，因为display:none；

点击p之后，面板向下展开，因调用了slideDown；

3 带参数隐藏

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

点击按钮后，2个段落隐藏；

4 获取文本和html

.text()方法获取文本；.html()获取元素的html;

5 设置文本和值

.text()方法设置文本；.val()方法设置值；

设置id为test1的元素的文本为"AAAA BBBB!"；

设置id为test2的元素的html为"<b>CCCC DDDD!</b>"；然后字体变为粗体；

设置输入框的值为"Mao Zhuxi Wansui!!!"；

6 获取元素的父

parents()方法获取元素的全部父；

先看没有js代码，光有html的情形；

获取span元素的父；li 是它的直接父，ul是它的祖父，div 是它的曾祖父，body是它的增曾祖父；

获取之后设置它的父的字体颜色为蓝色，父的边框为绿色2个像素宽；

7 遍历

遍历每一个li；弹出其文本；

8 css() 方法

css() 方法设置或返回被选元素的一个或多个样式属性。

获取p元素的背景色，然后弹出；

9 代码

1
<body>
<p>click me, will disappear.</p>
</body>

$(document).ready(function(){
  $("p").click(function(){
  $(this).hide();
  });
});

2
<style type="text/css">
div.panel
{
height:120px;
border:solid 1px #c3c3c3;
display:none;
}
</style>

<div class="panel">
<p>AAAAAAAAAAAAA</p>
<p>CCCCCCCCCCCCCCCCCCCCCCCCCCC</p>
</div>
 
<p class="flip">点击</p>

$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideDown("slow");
  });
});

3
<body>
<button type="button">隐藏</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>

$(document).ready(function(){
  $("button").click(function(){
  $("p").hide(1000);
  });
});

4
<body>
<p id="test">AAAAAAA BBBBBBB CCCCCCCCC</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>

$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});

5
<body>
<p id="test1">段落。</p>
<p id="test2">另一个段落。</p>
<p>Input field: <input type="text" id="test3" value="ABCD"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text("AAAA BBBB!");
  });
  $("#btn2").click(function(){
    $("#test2").html("<b>CCCC DDDD!</b>");
  });
  $("#btn3").click(function(){
    $("#test3").val("Mao Zhuxi Wansui!!!");
  });
});


6
<body class="ancestors">body (曾曾祖父)
  <div style="width:500px;">div (曾祖父)
    <ul>ul (祖父)  
      <li>li (直接父)
        <span>span AAAA</span>
      </li>
    </ul>   
  </div>
</body>


$(document).ready(function(){
  $("span").parents().css({"color":"Blue","border":"2px solid Green"});
});

7
<body>
<button>输出每个列表项的值</button>
<ul>
<li>兔子</li>
<li>猫咪</li>
<li>奶狗</li>
</ul>
</body>

$(document).ready(function(){
  $("button").click(function(){
    $("li").each(function(){
      alert($(this).text())
    });
  });
});

8
<body>
<h2>标题</h2>
<p style="background-color:#ff0000">一个段落。</p>
<p style="background-color:#00ff00">一个段落。</p>
<button>返回 p 元素的背景色</button>
</body>

$(document).ready(function(){
  $("button").click(function(){
    alert("Background color = " + $("p").css("background-color"));
  });
});

bcbobo21cn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一些jquery 常用实例图解

使用工具jquery pad；1 jquery 隐藏单击p，p隐藏；2 jquery 滑动一开始，div中的内容是不显示的，因为display:none；点击p之后，面板向下展开，因调用了slideDown；3 带参数隐藏可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。点击按钮后，2个段落隐藏；...
复制链接

扫一扫

专栏目录