首页 前端知识 前端-javaScript:jquery补充

前端-javaScript:jquery补充

2024-11-05 23:11:40 前端知识 前端哥 779 462 我要收藏

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 post
data:{},//参数域
success:function(value){//data|value) 成功之后的回调函数
console.log(value)
console.log(value.sites)
},
error:function(){//失败之后的回调函数
}
})
复制

success里的data|value是形参。


请求最好发到后台。

在前台的话,引json文件。

看json代码符不符合,在json在线解析里检查。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/20095.html
标签
评论
发布的文章

前端:HTML

2025-02-23 11:02:50

CSS3快速入门

2025-02-23 11:02:48

CSS3——transform属性

2025-02-23 11:02:46

React【vite使用模块化css】

2025-02-23 11:02:44

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!