前端-javaScript:jquery补充

jquery绑定事件的方式

1.直接使用事件函数

&("div").click(function(){alert(1)})

2.用统一的on函数绑定事件

on(事件类型，事件函数)

$("div").on("click",function(){alert(2)})

事件类型以参数的类型传递 --->可以同时绑定多个事件，用空格隔开（只支持JavaScript原生的方法，hover不行（jQuery自己封装的））

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

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

on（事件类型，目标元素，事件函数）

事件类型以参数的类型传递 --->可以同时绑定多个事件，用空格隔开（只支持JavaScript原生的方法，hover不行（jQuery自己封装的））

   $("body").on("click","h1",function(){alert(1)})$("input").click(function(){$("div").after("<h1>添加元素</h1>")})

    <style>div{width: 400px;height: 300px;background-color: red;font-size: 15px;}</style>
</head>
<body><div><h4 id="aa">aaa</h4><a href="#" class="aa">sdfas</a><p>aasjda</p><button>点击</button><input type="button" value="生成元素"></div>
</body>

dom和jdom

javascript---->dom

jquery---->jdom

dom <----->jdom相互转换

dom--->jdom $(dom)

jdom ---->dom jdom[0]

eg.jdom

console.log($("input").eq(0))
$("input").click(function(){alert(1)
})

如果有很多input, eq(0)找到下标为0的第一个input（用eq指定）

eg.dom

$("input")[0].onclick=function(){alert(1)}

或者用querySelector直接找到对象

JQuery-AJAX

如果用html原生的<form>表单的形式对网页进行提交，会对所有的进行更新。

若要实现局部的更新，用AJAX来实现

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

ajax是系统直接发起的，所以不需要找具体的元素。

$.ajax({
})

$.ajax({url:"json/eg16.json",//请求路径type:"get",//请求方式 get postdata:{},//参数域success:function(value){//data|value)  成功之后的回调函数console.log(value)console.log(value.sites)},error:function(){//失败之后的回调函数}})

success里的data|value是形参。