jQuery初用

最新推荐文章于 2025-12-03 01:20:56 发布

原创最新推荐文章于 2025-12-03 01:20:56 发布 · 86 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ajax #css

这篇博客介绍了jQuery库在HTML元素选择、操作、CSS样式调整、事件处理和Ajax交互等方面的应用。通过示例展示了如何使用jQuery选择器选择元素，如类选择器、元素选择器和属性选择器，并演示了鼠标和键盘事件的监听。此外，还讨论了jQuery中的hover、focus和blur事件以及键盘按键检测。

jQuery

功能：
选择html元素
操作html元素
css操作：对样式修改
操作HTML事件
......
Ajax

jQuery选择器：$(选择器)

<script>
   /* $("div").dblclick(
        function(){
           $(this).hide();
        }
    )*/
    $("#p1").mouseenter(
        function(){
          console.log("光标移动到了p1上");
        }
    )
    $("#p1").mouseleave(
        function(){
          console.log("光标移出了p1上");
        }
    )
    $("#p1").mousedown(
        function(){
          console.log("光标anxia");
        }
    )
    $("#p1").mouseup(
        function(){
          console.log("光标taiqi");
        }
    )
    //两个参数 第一个是光标移入的回调函数 第二个是移出的回调函数
    $("#p1").hover(
        function(){
          console.log("光标移入");
        },
        function(){
          console.log("光标移出");
        } 
    )
    //焦点事件
   /* $("input").focus(
        function(){
            //$(this).hide();
            $(this).css("background-color","red");
        }
    )*/
  /*  $("input").blur(
        function(){
            //$(this).hide();
            $(this).css("background-color","white");
        }
    )*/
    $(document).keydown(
        function(event){
            console.log(event.keyCode)
            if(event.keyCode===13){"清开会员"}
        }
    )
</script>

console.log(jQuery);

console.log($);

console.log(jQuery===$);//true

1. 具体的选择器

//选择所有元素

console.log($("*"));

2.类选择器

console.log($(".p3"))；

3. 元素选择器

//根据元素名选取

console.log($("p"));

4.属性选择器

//根据属性选择[]

console.log($("[href='xxx']"));

<body>
 <div id="app"></div>
 <p>1</p>
 <p>2</p>
 <p class="p3">3</p>
 <a href="http://www.baidu.com">百度</a>
 <a href="xxx">xxx</a>
</body>
<script>
  var app1 =document.getElementById("app");
  var app2=$("#app")[0];
  console.log(app1);
  console.log(app2);
//选择所有元素
console.log($("*"));
//根据元素名选取
console.log($("p"));
//根据类名选择
console.log($(".p3"));
//组合选择器
console.log($("p.p3"))//选择类名为p3的p元素
//根据属性选择[]
console.log($("[href='xxx']"));

jQuery事件

<script>
   /* $("div").dblclick(
        function(){
           $(this).hide();
        }
    )*/
    $("#p1").mouseenter(
        function(){
          console.log("光标移动到了p1上");
        }
    )
    $("#p1").mouseleave(
        function(){
          console.log("光标移出了p1上");
        }
    )
    $("#p1").mousedown(
        function(){
          console.log("光标anxia");
        }
    )
    $("#p1").mouseup(
        function(){
          console.log("光标taiqi");
        }
    )
    //两个参数 第一个是光标移入的回调函数 第二个是移出的回调函数
    $("#p1").hover(
        function(){
          console.log("光标移入");
        },
        function(){
          console.log("光标移出");
        } 
    )
    //焦点事件
   /* $("input").focus(
        function(){
            //$(this).hide();
            $(this).css("background-color","red");
        }
    )*/
  /*  $("input").blur(
        function(){
            //$(this).hide();
            $(this).css("background-color","white");
        }
    )*/
    $(document).keydown(
        function(event){
            console.log(event.keyCode)
            if(event.keyCode===13){"清开会员"}
        }
    )
</script>