jQuery学习笔记

技术mix呢 2017-10-09

javascript js jquery h2 test html type list

1. 点击<p></p>之间的内容,对应的消失

复制代码
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>如果您点击我,我会消失。</p>
<p>点击我,我会消失。</p>
<p>也要点击我哦。</p>
</body>
</html>
复制代码

注:$("p"),这里的p指的是标签<p>

2. 点击按钮,<p></p>间的内容消失

复制代码
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html> 
复制代码

3. $(".test")  .表示类

复制代码
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
  $("button").click(function()
  {
  $(".test").hide();
  });
});
</script>
</head>
<body>

<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>

</body>
</html>
复制代码

4. $("#test")  #表示id

复制代码
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button type="button">Click me</button>
</body>

</html>
复制代码

5.改变html的内容

复制代码
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").html("W3School");
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">请点击这里</button>
</body>

</html>
复制代码

6. html追加内容

复制代码
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
  });

  $("#btn2").click(function(){
    $("ol").append("<li>Appended item</li>");
  });
});
</script>
</head>

<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表项</button>
</body>
</html>
复制代码

7. 在html元素之后追加内容

复制代码
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("img").before("<b>Before</b>");
  });

  $("#btn2").click(function(){
    $("img").after("<i>After</i>");
  });
});
</script>
</head>

<body>
<img src="/i/eg_w3school.gif" alt="W3School Logo" />
<br><br>
<button id="btn1">在图片前面添加文本</button>
<button id="btn2">在图片后面添加文本</button>
</body>
</html>
复制代码

8. 获取内容---text()、html()、val()

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)
  • val() - 设置或返回表单字段的值
复制代码
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>
</head>

<body>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>

</html>
复制代码

 

复制代码
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("Value: " + $("#test").val());
  });
});
</script>
</head>

<body>
<p>姓名:<input type="text" id="test" value="米老鼠"></p>
<button>显示值</button>
</body>

</html>
复制代码

9. 获取属性--attr()

复制代码
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#w3s").attr("href"));
  });
});
</script>
</head>

<body>
<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
<button>显示 href 值</button>
</body>

</html>
复制代码

 









本文转自jihite博客园博客,原文链接:http://www.cnblogs.com/kaituorensheng/p/4591937.html,如需转载请自行联系原作者

登录 后评论
下一篇
冒顿单于
10888人浏览
2019-08-28
相关推荐
jQuery插件开发学习笔记
616人浏览
2017-11-26 17:36:00
jQuery插件开发学习笔记
494人浏览
2017-11-26 10:49:00
jQuery插件开发学习笔记
467人浏览
2017-11-26 14:29:00
jQuery插件开发学习笔记
928人浏览
2016-05-23 14:25:15
jquery学习笔记
575人浏览
2017-11-08 19:41:00
Jquery学习笔记一
613人浏览
2016-01-28 08:27:00
jQuery 学习系列笔记(二)
666人浏览
2017-11-22 19:01:00
Jquery学习笔记一
618人浏览
2016-01-28 08:27:00
Jquery基础学习笔记(1)
469人浏览
2017-09-28 15:52:00
jQuery学习笔记开篇
577人浏览
2017-11-07 22:02:00
Jquery学习笔记1
604人浏览
2017-11-16 00:03:00
Jquery基础学习笔记(1)
315人浏览
2009-05-26 21:20:00
0
0
0
468