jQuery获取文本框的值，input和select，option的选中值

最新推荐文章于 2022-09-02 22:30:12 发布

原创最新推荐文章于 2022-09-02 22:30:12 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

jquery 同时被 2 个专栏收录

23 篇文章

订阅专栏

javascript

18 篇文章

订阅专栏

本文通过一个实战案例介绍了如何使用jQuery操作DOM元素，包括按钮点击事件、下拉框改变事件的处理，以及利用属性选择器实现页面元素样式的动态修改。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script type="text/javascript" src="jquery-2.1.1.js"></script>
<body>



<input type="text"  id="context"/>
<input  type="button" id="zs" value="获取点击事件的val()"/>

<select id="txt">
<option value="0">option1</option>
<option value="1">option2</option>
<option value="2">option3</option>

</select>

<br/>
<a href="http://zhannei.baidu.com/cse/search?q=java%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84&click=1&entry=1&s=1841543737020962857&nsid=">java123</a>
<br/>
<br/>
<a href="http://www.java1234.com/">java网站---->>>$("[href]").css("background-color","#C06");</a>

<br />
<br />
<a href="#">href=#--->>$("[href='#']").css("background-color","#C06");</a>

<p></p>
<h1></h1>

<script>
$("#zs").click(function(){
   var context=$("#context").val();
   $("p").html("<h1>"+context+"</h1>");
   })
   $("#txt").change(function(){
      var val=$("#txt option:selected").val();
        console.log("22--->>>"+val);
      $("h1").html(val);
      })
      //属性选择器
      //$("[href]").css("background-color","#C06");
      $("[href='#']").css("background-color","#C06");
      
      $("[href$='com']").css("background-color","#C06");


</script>


</body>
</html>