实例
<!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>运行实例 »
点击 "运行实例" 按钮查看在线实例