Loading

jQuery基础

  jQuery 是一个JavaScript 库,让开发者快速操作页面元素,实现交互。

jQuery基础–语法#

  • 基础语法是:$(selector).action()
  • $为jQuery的别名(简写)
  • 选择器(selector)“查询”和“查找”HTML 元素
  • jQuery 的action() 执行对元素的操作

常用选择器:#

  • 标签选择器  p
  • id选择器  #demo
  • 类选择器  .demo

显示或者隐藏图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
    <script  src="js/jquery.min.js" type="text/javascript"></script>
    <title>Document</title>
</head>
<body>
    <div>
        <button id="button">显示/隐藏</button>
    </div>
 
<img src="images/girl.jpg" class="demo" id="image" alt="图片加载不成功">
</body>
<script type="text/javascript">
    $('#button').on('click',function(){
        if ($('#image').is(':visible')){
            // id选择器
            $('#image').hide();
            // 标签选择器
            $('button').css("background",'red')
        }else{
            $('#image').show();
            $('#button').css("background",'#bfa')
        }
    });
 
 
</script>
</html> 

元素操作:#

  • 添加/替换:append() html()
  • 隐藏/展示:show()  fadeIn()     hide() fadeOut()
  • 删除: remove

 

1
2
3
4
5
6
7
8
9
10
$('#container')
n.fn.init [div#container, context: document, selector: "#container"]
$('#container').append('<p>hello</>')
n.fn.init [div#container, context: document, selector: "#container"]
$('p').hide()
n.fn.init [p, prevObject: n.fn.init(1), context: document, selector: "p"]
$('p').show()
n.fn.init [p, prevObject: n.fn.init(1), context: document, selector: "p"]
$('p').remove()
n.fn.init [p, prevObject: n.fn.init(1), context: d

 

常见的事件 #

  • 点击:click
  • 双击: dblclick
  • 鼠标移上: mouseover
  • 鼠标移开: mouseout

点击超链接显示提示,移开消失。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <p><a href="#" class="demo" title="显示超链接1">超链接1.</a></p>
    <p><a href="#" class="demo" title="显示超链接2">超链接2.</a></p>
 
    <script  src="js/jquery.min.js" type="text/javascript"></script>
     
    <script type="text/javascript"> 
      $(".demo").mouseover(function(e){  
          var title = $(this).attr('title');        
          var tooltip = "<div id='tooltip'>"+ title +"<\/div>"; //创建 div 元素  
          $("body").append(tooltip);  //把它追加到文档中  
          $("#tooltip").css({  
                  "top": e.pageY  + "px",  
                  "left": e.pageX   + "px" 
              }).show("fast");      //设置x坐标和y坐标,并且显示  
      }).mouseout(function(){         
          $("#tooltip").remove();   //移除   
      });  
    </script>
 
</body>
 
 
</html>

  

posted @   头痛不头痛  阅读(571)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
· SQL Server 内存占用高分析
阅读排行:
· 盘点!HelloGitHub 年度热门开源项目
· DeepSeek V3 两周使用总结
· 02现代计算机视觉入门之:什么是视频
· C#使用yield关键字提升迭代性能与效率
· 回顾我的软件开发经历(1)
点击右上角即可分享
微信分享提示
主题色彩