jQuery练习代码暂存
index.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-3.2.1.min.js"></script>
<!--jQuery UI 依赖于jQuery-->
<script src="js1.js"></script>
<style>
div{
float: left;
background:#ece023;
width: 50px;
height: 50px;
margin: 2px;
}
</style>
</head>
<body>
<p>1111111</p>
<p id ="pid">2222222</p>
<p class ="pid" >3333333</p>
<button id="mybtn">click me</button>
<button id="toggle">隐藏/显示</button>
<button id="btn1">新增</button>
<p id="p1">btn5附带内容</p>
<br>
<script>
for(var i=0;i<5;i++){
$("<div>").appendTo(document.body);
}//依次将<div>添加至document的body中
$("div").click(function(){
$(this).hide(2000, function () {
$(this).remove();
})
})
</script>
<div id="flipshow" style="padding: 5px;text-align: center;background-color: #ece023;border: solid 1px #ece999">出现</div>
<div id="content" value="value" style="padding: 50px;display: none">Hello world</div>
<br><br><br><br>
<button id="btn2" οnclick="appendText()">append增加</button>
<button id="btn3" οnclick="appendText()">append删除</button>
<button id="btn4">Ajax测试</button>
结果：<span id="result"></span>
</body>
</html>js1.js:
/**
* Created by Vodka on 2017/4/29.
*/
//$("p")是通过$加元素 来定位到那个元素 然后用.api(function{})来写函数
$(document).ready(function(){
$("#mybtn").click(function(){
$("p").text("0");
$("#pid").text("1");
$("#pid").html("<a href='index.html'>更改为了标签</a>")
$(".pid").text("2");
console.log("更改前id:"+$(".pid").attr({
"class":"ppid",
"href":"index.html"
}));
$(".pid").attr("class","ppid");//更改id
console.log("更改后id:"+$(".ppid").attr("class"));
})
$("#mybtn").bind("click",clickHandle);//bind绑定事件
$("#mybtn").dblclick(function(event){
$(this).toggle(1000);//缓慢淡出
})
$("#btn1").click(function(){
$("#p1").text(function(i,ot){
return "old:"+ot+" new:new thing"+(i);
})
})
// 众多方法请查看官网API
function clickHandle(e){
// 使用stopPropagation可以阻止事件的发生（阻止冒泡）
var ee =jQuery.Event("事件名称");
$("#pid").trigger(ee);
console.log("加载完毕");
var text = $("#content").text();
console.log(text);
console.log($("#content").html());
console.log($("#content").val());
console.log("id:"+$("#content").attr("id"));
// text()用来获取文本信息
}
$("#toggle").click(function(){
$("p").fadeToggle(1000);
})
// fadeTo 设置透明度过渡
$("#flipshow").click(function(){
$("#content").slideToggle(1000);
})
// append prepend before after
$("#btn2").click(function(){
$("#btn2").prepend("prepend somthing");
$("#btn2").after("after somthing");
$("#btn2").before("before somthing");
})
$("#btn3").click(function(){
$("#btn2").remove();
$("#btn2").empty();
})
function appendText(){
var text1 = "<p>hhh</p>>"
var text2 = $("<p></p>").text("555哇");
var text3 = document.createElement("p");
text3.innerHTML = "666哇";
$("body").append(text1,text2,text3);
}
$("xxx").css({
width:"110px",height:"110px"
})
//向下遍历
$("parent").find("针对所有子孙类").xxx();
$("parent").children("只针对儿子").xxx();
//向上遍历
$("xxx").parent("只针对父亲").xxx();
$("xxx").parent("针对所有祖先类").xxx();
$("xxx").parentsUntil("从xxx到该元素之间的所有").xxx();
//同级遍历
$("xxx").siblings("除该元素其他与它同级的元素都修改").xxx();
$("xxx").next("同级的下一个元素修改").xxx();
$("xxx").nextAll("同级的下边的所有都元素修改").xxx();
$("xxx").nextUntil("同级的向下从xxx到该元素之间的所有修改").xxx();
$("xxx").pre("同级的上一个元素修改").xxx();
$("xxx").preUntil("同级的向上从xxx到该元素之间的所有修改").xxx();
$("#divv p").filter("条件").xxx();//满足这个条件（可以是类型名、id名之类的）的div里面的p可以被过滤获取
//Ajax异步处理
$("#btn4").on("click",function(){
$.get("Server.php",{name:$("#namevalue").val()},function(data){
$("#result").text(data);
})
})
})
