简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > jquery事件
Blogger Information
Blog 8
fans 0
comment 0
visits 6970
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jquery事件
A云海的博客
Original
563 people have browsed it


实例

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="/static/js/jquery-3.3.1.min.js"></script>
</head>
<style>
   body{background: #3C8DBC;}
   div{width:300px;height:200px;padding: 10px 10px;border: 1px solid #000000;border-radius: 8px; margin:450px auto;}
   .box{background: #FF8600;}
</style>
<script>
   //   ready() //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
$(document).ready(function () {
       //   focus()//当元素获得焦点时
       // $('input').focus(function () {
       //     $('input').css('background','red')
       // })
       //   blur()//当元素失去焦点时
       // $('input').blur(function () {
       //     $('input').css('background','blue')
       // })
       //   toggle()//切换元素为可见或者隐藏
       //   click()//当点元素是，会发生事件。
       // $('button').click(function () {
       //     $('input').toggle()
       // })
       //   dblclick()//当双击元素时，会发生事件
       // $('button').dblclick(function () {
       //     $('input').toggle()
       // })
       //   change()//当元素的值发生改变时，会发生事件。
       // $('input').change(function () {
       //     $('input').css('color','pink')
       // })
       //   hover(over,out) ///切换鼠标移动或移除元素
       // $('div').hover(function () {
       //     $(this).css('background','pink');},
       //     function(){
       //         $(this).css('background','red')
       //     }
       // )
       //   mouseenter()//当鼠标指针穿过元素时，会发生事件,大多数时候会与mouseleave 事件一起使用。
       // $('p').mouseenter(function(){
       //     $("p").css("background","yellow");
       // });
       //   mouseleave()//当鼠标指针离开元素时，会发生 事件,大多数时候会与mouseenter 事件一起使用。
       // $('p').mouseleave(function(){
       //     $("p").css("background","#fff");
       // });
       //   mouseover()//当鼠标移动到元素上，触发事件；
       // $('p').mouseover(function(){
       //     $("p").css("background","red");
       // });
       //   mousemove()//当鼠标移动到元素上，触发事件
       // $('p').mousemove(function(){
       //     $("p").css("background","red");
       // });
       //   mouseup()//当鼠标移动到元素上，松开触发事件
       // $('button').mouseup(function(){
       //     $("p").css("background","pink");
       // });
       //   mousedown()//当鼠标移动到元素上，按下触发事件；
       // $('button').mousedown(function(){
       //      $("p").css("background","red");
       // });
       //   resize()//当调整浏览器窗口的大小时
       // $(window).resize(function () {
       //     alert("窗口改变了！")
       // });
       //resize()//当调整浏览器窗口的大小时.统计次数
       //  var x=0;
       //  $(window).resize(function() {
       //      $('span').text(x++);
       //  });
       //   pageX()//获取鼠标移动时，x坐标
       //   pageY()//获取鼠标移动时，y坐标
       //  $(document).bind('mousemove',function(e){
       //      $('#box').text('x坐标: ' + e.pageX + ', Y坐标: '+ e.pageY);
       //  });
       // attr()//设置或返回被选元素的属性值
       //  $('button').click(function () {
       //      $('img').attr('src','/images/images/2.jpg')
       //  })
       // removeAttr()//从每一个匹配的元素中删除一个属性
       //     $('button').click(function () {
       //         $('img').removeAttr('src')
       //     })
       // addClass()//为每个匹配的元素添加指定的类名。
       // $('button').click(function () {
       //     $('p').addClass('box')
       // })
       // removeClass()//从所有匹配的元素中删除全部或者指定的类。
       // $('button').click(function () {
       //     $('p').removeClass('box')
       // })
       // toggleClass()//如果存在（不存在）就删除（添加）一个类。
       //     $('p').click(function () {
       //         $('p').toggleClass('box')
       //     })
       // html()//取得第一个匹配元素的html内容，可以改变html元素标签
       //      $('p').html('<h2>html来改变标签</h2>')
       // text()//获得匹配元素文本的内容
       //    $('p').text('text来改变文本内容')
       // val()//获得匹配元素的当前值
       //      $('input').val('val来修改内容')
})
</script>
<body>
<img src="/images/images/1.jpg">
<div id="box">

   <span>统计</span>
   <p>表单提交</p>
   <lable>用户名</lable>
   <input type="text" value="用户名" id="kk"><br>
   <lable>密码</lable>
   <input type="password"><br>
   <button>提交</button>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！