jquery

最新推荐文章于 2023-07-07 14:28:52 发布

weixin_30451709

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量50

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/moyulove/p/10883275.html

本文主要介绍了jQuery的使用方法，包括基本操作、选择器、属性操作、事件绑定等。还讲解了js原生对象和jq对象的相互转化。同时展示了jQuery在元素追加、替换、动画效果以及Ajax请求等方面的应用，为前端开发提供了实用的参考。

//1.jq如何使用
//$("选择器").动作()
//console.log($("#myDiv"));
//console.log(document.getElementById("myDiv"));

/*
js操作
var arr = document.getElementsByTagName("p");
for(var i = 0; i<arr.length;i++){
arr[i].innerHTML = "aaa";
} */

/*
jq操作
var arr = $("#myDiv").children();
for(var i = 0; i<arr.length;i++){
arr[i].innerHTML = "aaa";
} */

//2.js原生对象和jq对象的相互转化
//jq对象-->js原生对象
var jqObj = $("#myDiv");
var jsObj = jqObj[0];
console.log(jsObj);

//js原生对象-->jq对象
var jsObj2 = document.getElementById("myDiv");
var jqObj2 = $(jsObj2);
console.log(jqObj2);

//写法

function testVal() {
//$("li").eq("3").html("aaaaaaa");
//$("li").first().html("aaaaaaa");
//$("li").last().html("aaaaaaa");
}

function testHasClass() {
console.log($("#myDiv").hasClass("c1"))
}

function testChildren() {
//如果遍历数组，获取数组中的元素，返回的是一个js对象
console.log($("ul").children().length)
var cs = $("ul").children();
for (var i = 0; i < cs.length; i++) {
console.log(cs[i].innerText);
}
}

function testNext() {
$("p").next().text("ababababa");
}

function testNextAll() {
$("div[id=id1]").nextAll().text("ababababa");
}

function testParent(){
console.log($("p").parent());
}

$(document).ready(function(){
console.log("就绪...")
})

//页面载入就绪时，执行一个方法
$(function(){
console.log("就绪2...")
})
$(function(){
console.log("就绪3...")
})

function testBind(){
$("#eveid").bind("focus", function(){
console.log("获取焦点")
})
$("#eveid").bind("focus", function(){
console.log("获取焦点,haha")
})

$("#eveid").bind("blur",function(){
console.log("丢失焦点！");
})

}

function testUnBind(){
$("#eveid").unbind("focus");
}

//一次性事件
function testOne(){
$("#eveid").one("focus",function(){
console.log("hello!");
});
}

function testClick(){
$("#btnid").click(function(){
console.log("我被点击了！！！")
});

$("#btnid").bind("click",function(){
console.log("我被点击了！！！")
});
}

function testCss() {
console.log($("#myDiv").css("color"));

$("#myDiv").css("color", "white");
$("#myDiv").css("background-color", "blue");

$("#myDiv").css({
color : "red",
background : "blue"
});

}

function testToggle() {
$("#myDiv").fadeToggle(1000);
}

function testAnimate() {
$("p").animate({
left : "+=50px",
opacity : 'show'
}, 5000);
}

$(function(){
$("#right").click(function(){
$(".block").animate({left: '+50px'}, "slow");
});

$("#left").click(function(){
$(".block").animate({left: '-50px'}, "slow");
});
})

$(function(){
$( "#clickme" ).click(function() {
$( "#book" ).animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 5000, function() {
// 动画完成。
});
});
})

//async:是否异步请求
//data:发送到服务器的数据
//dataType:预期服务器返回数据的类型
function testAjax() {
$.ajax({
url:"hiservlet",
type:"get",
async:true,
data:{aaa:"bbb",ccc:"ddd",fav:"1",fav:"2"}, //"aaa=bbb&ccc=ddd"
dataType:"json",
success:function(data){
console.log(data.aaa);
}
})

$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );
}

转载于:https://www.cnblogs.com/moyulove/p/10883275.html