jQuery系列06

一、表单事件

　　1.focus()　　获取焦点时触发

　　2.blur()　　  失去焦点时触发

　　3.change()   当内容改变时触发（只适用于text类型的input，textarea，select）

　　4.select()     当文本被选中是触发（适用于text类型的input或者是textarea）

　　5.submit()    当表单提交时会触发submit事件，该事件只适用于表单。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery-3.2.1.min.js"></script>
</head>
<body>
    <form>
        <input type="text"/>
        <input type="password"/>
    </form>
</body>
<script>
    $(function () {
        $("input").focus(function(){
            $(this).css({
                "color":"red",
                "background":"white"
            });

        });

        $("input").blur(function () {
            $(this).css("background","pink");
        })
    })

</script>
</html>

当text和password获得焦点和是去焦点时，会改变样式。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <Script src="../jquery-3.2.1.min.js"></Script>
</head>
<body>
    <form action="">
        <input type="text"/>
    </form>
    <textarea cols="30" rows="10"></textarea>
   <select>
       <option value="first">first</option>
       <option value="second">second</option>
   </select>
</body>
<script>
    $(function () {
      $("form [type|='text']").change(function () {
          $(this).css("color","Red");
      });

        $("textarea").change(function () {
            $(this).css("background","pink");
        });

        $("select").change(function () {
            $(this).css("color","red");
        })
    })
</script>
</html>

当text类型的input，textarea和select中的内容改变时，会改变相应的样式。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery-3.2.1.min.js"></script>
</head>
<body>
    <form action="">
        <input type="text" placeholder="hello"/>
    </form>
</body>
<script>
    $(function () {
        $("input").select(function () {
            $(this).css("color","red");
        })
    })
</script>
</html>

当文本被选中时，改变其样式（只适用于text类型的input和textarea）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../jquery-3.2.1.min.js"></script>
</head>
<body>
    <form id="target">
        <input type="submit" value="go"/>
    </form>
</body>
<script>
  $(function () {
      $("#target").submit(function () {
          document.write("hello");
      })
  })
</script>
</html>

当表单进行提价操作时，触发submit事件。

二、DOM属性　

　　1.addClass()  添加类
　　2.attr()      添加或者获取属性
   3.hasClass()  检测是否拥有某个类
   4.html()      获取元素的内容或者添加内容
   5.prop()      改变或者是获取某个属性的属性值
   6.removeAttr()移除某个属性
   7.removeClass()移除某个类
   8.removeProp()移除某个属性的属性值
   9.toggleClass()更改类，当指定的类存在时移除，不存在时添加
   10.val()       获取或改变元素的value值，通常用在input上　　

　　　








		

			posted on 
2017-07-31 22:36 
观琪不喻 
阅读(101) 
评论(0) 
编辑 
收藏 
举报

		

	

	
	
	






    
    

    
    

    

        

    

        

            
                
                
            
        

    

        

            
                
            
        

    

    

    











	
		

导航