jQuery初用

2021-09-10 14:30:47 作者：互联网

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>

标签：jQuery,function,p1,console,log,选择器,初用,光标
来源： https://blog.csdn.net/m0_59345279/article/details/120220935