JQuery事件与操作教程-优快云博客

本文链接：https://blog.youkuaiyun.com/liuweiqiang11188/article/details/72732473

Jquery事件
http://www.w3school.com.cn/jquery/jquery_events.asp

第一个事件
$(document).ready(function()
{

//一旦DOM在浏览器中注册后，$(document).ready()里的代码就开始执行
});

例子
$(document).ready(function(){ 这种情况是有button ,但是button 没有onclick 事件,只有

id="test"
$("button").click(function(){
$("#test").hide();
});
});

单独文件中的函数
会将函数直接添加到 <head> 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过

src 属性来引用文件）：
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>//分离出来
</head>

jQuery 名称冲突
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

$("button# demo").click(function()
{
$("img").hide()

});
点击id="demo"的button元素的click事件

隐藏和显示
$(document).ready(function(){
$("p").click(function(){
$(this).hide();//第一种

$("p").hide(1000);//隐藏的时间设置第二种
$("p").hide(1000,function(){//第三种

alert("The paragraph is now hidden");
});

})

Toggle 切换隐藏和显示 hide() 和 show() 方法。
$("document").ready(function(){
$("button").click(function(){
$("p").toggle();//切换隐藏和显示,不用下面写hide 和show方法

});

});

点击打开链接

});

效果事件(动画显示透明滑动停止链式连接)
效果表格 http://www.w3school.com.cn/jquery/jquery_ref_effects.asp
Chaining 允许我们在一个语句中显示多个Jquery方法
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
或者
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);

方法
Jquery操控HTML元素
text() -- 设置或返回所选元素的文本内容
html() --设置或返回所选元素的内容(包括HTML标记)
val() --设置或返回表单字段的值属性,比如input的href \value

1简单的
<script>
$(document).ready(function(){
$("#btn1").click(funtion(){
alert("text:"+ $("#test").text());

});

$("#btn2").click(funtion(){
alert("HTML: +$("#test").html()");

});
$("button").click(function(){
alert("Value:" +$("#test").val());// val() 方法获得输入字段的值
})
});
</script>
<body
<p id="test">这是段落中的<b>粗体</b></p>
<button id="btn1">显示文本</button>
<button id="btn2">显示HTML</button>

<p>姓名:<input type="text" id="test2" value="米老鼠"><p>

</body>

2有点复杂的,有回调函数的

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){    // i是被选元素列表中当前元素的下标     //origText以及原始（旧的）值
    return "Old text: " + origText + " New text: Hello world!  //然后以函数新值返回您希望使用的字符串
    (index: " + i + ")";
  });
});

$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});