JQuery 简单的函数调用
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
function bef(){
$("#btn1").click(function(){$("img").before("<b>Before</b>");})
}
function aft(){
$("#btn2").click(function(){$("img").after("<i>After</i>");})
}
</script>
</head>
<body>
<img src="/i/eg_w3school.gif" alt="W3School Logo" />
<br><br>
<button id="btn1 onClick="bef()">在图片前面添加文本</button>
<button id="btn2" onClick="aft()">在图片后面添加文本</button>
</body>
</html>
想用两个按钮，分别在图片前后添加文本，但是不能实现，在下初学JS，可能是低级错误，望大神见谅。 展开
1、首先建立一个静态页面命名为js.html,标题为“JS函数调用的方法”。
2、在js.html的页面<head></head>之间加入 <script></script>。
3、在 <script></script>中加入一个js函数 toalert，当点击一个button的时候弹出一个alert。
4、在body之中加入一个button，并且添加一个onclick点击事件。
5、在onclick的事件中，加入js的toalert函数名，加载onclick事件的双引号中即可。
6、为了让button看的更明显一些，可以设置一下button的样式，设置宽为100px，高为30px，字的颜色为红色。
7、用浏览器打开js.html，如果点击按钮能够弹出“JS函数调用的方法”，说明调用js函数是成功的。
1、html加载CDN jQuery库，如果加载失败调用本地jQuery。
2、click事件：click单击事件，点击元素，并鼠标抬起。
3、dbclick事件：dbclick是双击事件，两次点击相同元素。
4、mousedown事件和mouseup事件，第一个是鼠标点击事件，第二个是鼠标抬起事件。
5、mouseenter事件和mouseleave事件。第一个是光标移入元素调用，第二个是光标移除元素调用。
你的结构写错了，重复注册，并且在函数作用域结束后被销毁了，所以完全起不到作用。
写法有两种
1.通过jQuery绑定button的click操作，然后进行操作
$(function() { // 这是document的ready事件的简写，jquery的dom操作得写在document加载后
img = $('img'); // 寄存jquery选择对象，提高效率
$('#btn1').on('click', function() { // 这里等同于click()方法
img.before("<b>Before</b>");
});
$('#btn2').on('click', function() { // 这里等同于click()方法
img.after("<i>After</i>");
});
});这里注意，button标签就不要再重复定义onclick了
2.定义函数，在button元素的onclick属性中调用
function bef(){
$("img").before("<b>Before</b>");
}
function aft(){
$("img").after("<i>After</i>");
}<button id="btn1" onClick="bef()">在图片前面添加文本</button>
<button id="btn2" onClick="aft()">在图片后面添加文本</button>
<body>
// 最好加上id 方便选取元素
<img id="logo" src="/i/eg_w3school.gif" alt="W3School Logo" />
<br><br>
<button id="btn1" onclick="bef()">在图片前面添加文本</button>
<button id="btn2" onclick="aft()">在图片后面添加文本</button>
</body>
<script>
function bef(){
// 选取元素
var obj = document.getElementById("logo");
// 在前面插入文本
obj.insertAdjacentHTML("beforeBegin","text");
}
function aft(){
// 选取元素
var obj = document.getElementById("logo");
// 在后面插入文本
obj.insertAdjacentHTML("afterEnd","text");
}
</script>
insertAdajcentHTML(swhere,stext)
参数：
swhere: 指定插入html标签语句的地方，有四种值可用：
1. beforeBegin: 插入到标签开始前
2. afterBegin:插入到标签开始标记之后
3. beforeEnd:插入到标签结束标记前
4. afterEnd:插入到标签结束标记后
你好！！
<button id="btn1 onClick="bef()">在图片前面添加文本</button>---->"btn1" 少了个引号
<button id="btn2" onClick="aft()">在图片后面添加文本</button>
如果使用onclick的话，直接在对应的函数中书写逻辑即可,如下：
function bef(){
$("img").before("<b>Before</b>");
}
如果想使用 $("#btn1").click(...)这种方式的话，就不需要在button标签中写onclick属性了，如下：
<button id="btn1">在图片前面添加文本</button>
<script>
$(function(){
$("#btn1").click(function(){$("img").before("<b>Before</b>");})
});
</script>
//以上两种都可以实现功能，但是如果放到一起，你会发现，第一次通过onclick事件，属于为其进行了一次click事件的绑定，而第二次onclick事件时，会追加两次内容，这个追加的内容会随着你点击的次数而增加···
