后端入门（JQuery基础） 01

不修×蝙蝠2024-09-16 21:02

引入jQuery资源（https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js）

javascript 复制代码

 <script src="jquery.js"></script>   <!-- 引入jQuery资源 -->

绑定事件的方式：

直接使用事件函数

javascript 复制代码

   $("p").click(function(){
            $("p").hide();
         });

用on函数绑定事件 on(事件类型,事件函数)

事件类型以参数的形式传递

可以同时绑定多个事件用空格隔开

只支持Javascript原生的方法 -- hover （这种jQuery独有的，则只能用事件绑定函数）

javascript 复制代码

var aa="dblclick"
        $("div").on(aa,function(){
          alert(1)
        })

3.用on函数给未来函数绑定事件

javascript 复制代码

 $("body").on("click","h1",function(){  
//把事件位置填写所设置事件的父级或祖先元素（且是html中自带的元素，
//那么body更加符合，并且一定是祖先元素+html自带的元素）
          alert(1)  
        })

        $("input").click(function(){
          $("div").after("<h1>新添加的元素</h1>")
        })

dom 和 jdom

JavaScript中找到的是---->dom

jquery中找到的是------>jdom

dom <---> jdom

dom--->jdom : $(dom)

jdom--->dom :jdom $0$ 【随便一个数字，都可以将jdom转换为dom】

Ajax (服务器交换数据的技术)--> 数据交互

javascript 复制代码

 $.ajax({     //不需要寻找具体元素，是由系统发出的
          url:"json/eg15.json",    //请求路径
          type:"get",   //请求方式 get post
          data:{},   //参数域
          success:function(value){ //请求成功后回调函数
            console.log(value)
            console.log(value.sites)
          },
          error:function(){   //请求失败后回调函数

          }
        })

后端入门 （JQuery基础） 01

后端入门（JQuery基础） 01