我的jQuery学习笔记

最新推荐文章于 2022-11-06 14:59:42 发布

Linvo

最新推荐文章于 2022-11-06 14:59:42 发布

阅读量1.5k

点赞数

分类专栏： Front-end 文章标签： jquery function ajax callback class php

本文链接：https://blog.csdn.net/linvo/article/details/3893715

版权

Front-end 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

这几天的jQuery学习笔记，共享+备份一下:)
中间主要是用自己的方式予以记录，看不明白的地方还请见谅，也欢迎向我提出:P

/******************************
 * jQuery学习笔记
 * @author Linvo
 ******************************/
 
/*=========
 2009-1-14
=========*/
$() = $(document)
//实现window.onload()效果
$().ready(
	function(){
		//需要执行的内容
	}
);
//获取DOM元素(返回值为jQuery对象)
$("element") //相应元素名的
$(".classname") //class值匹配的
$("element.classname") //相应元素中，class值匹配的
$("#id") //id匹配的
$("element#id") //相应元素中，id匹配的
$("element1 > element2")	//元素一 下 的所有元素二（只包括儿子）
$("element1 element2")		//元素一 中 的所有元素二（包括子孙等）
$("element1 + element2")	//元素一 后 的所有元素二（代码后）
$("element1 ~ element2")	//与元素一 并列 的所有元素二（兄弟元素二）
$("#id").html("")	//设置 getElementById("id").innerHTML = ""
$("#id").html()		//取出 getElementById("id").innerHTML
//动画出现效果
$("#id").show(speed, [callback])
$("#id").slideDown(speed, [callback])
……

/*=========
 2009-1-16
=========*/
//在外面包围另一个结构（html代码/元素）
$("p").wrap("<div class='wrap'></div>")
$("p").wrap(document.getElementById('content'))
$("p").append("Hello");	//I would like to say: Hello
$("p").prepend("Hello");	//HelloI would like to say: 
$("p").before("Hello");	//HelloI would like to say: 
$("p").after("Hello"); 	//I would like to say: Hello 
//【删除相应class的p元素】
//AAA BBB CCC
//BBB CCC
$("p").remove(".classname");
/*=========
 2009-1-18
=========*/
//获取具有某属性值的相应元素
$("input[name=qq]")	//获取<input name="qq" type="text" />元素
//属性与值关系
=	//等于
*=	//包含该值
!= 	//不包含该值
^=	//以该值开头
$=	//以该值结尾
//为每一个匹配的元素执行该函数
$("element").each(function(){
	//需要执行的内容
})	
/*=========
 2009-1-19
=========*/
/*
jQuery中用post和get方法
（ajax高层抽象方法，对ajax方法进行了封装）
【当JQ中用post方式】
PHP用$_POST接收时，只有n2
PHP用$_GET接收时，只有n1
【当JQ中用get方式】
PHP用$_GET接收，n1 n2都有
PHP用$_POST接收时，都没有
*/
$.post("do.php?n1=a", {n2: "b"},	
	function(data){
		alert("Data Loaded: " + data);
	}
);
/*=========
 2009-1-20
=========*/
//DOM对象 -> jQuery对象
//$(DOM对象)
var v = document.getElementById("id"); //DOM对象 v 
var $v = $(v); //jQuery对象 $v
//jQuery对象 -> DOM对象
//jQuery对象.get(0) 或者 jQuery对象[0]
var $v = $("#id"); //jQuery对象 $v
var v = $v.get(0); //DOM对象 v
var v = $v[0]; //DOM对象 v
$("element").get(); //获取指定元素的集合
//jQuery用ajax方法（ajax低层方法）
$.ajax({
	type:	"POST", //POST时PHP中用$_POST接收，GET反之。
	url:	"do.php",
	data:	"n1="+x+"&n2="+y,
	success: function(data){ alert( "Data Saved: " + data ); } 
});
/*=========
 2009-1-21
=========*/
//序列表表格内容为请求字符串
//返回值：（例）name=linvo&age=22
$("form").serialize() //序列化整个表单元素内容
$("input[type=text]").serialize() //序列化指定元素内容（例）
$("element").empty(); //移除指定元素下所有元素
/*
 CSS设置
*/
$("element").addClass("classname"); //为指定元素添加css样式
$("element").removeClass("classname") //移除指定元素的css样式
$("element").toggleClass("classname") //指定元素的css样式，有则删除，无则添加
$("element").css("attname"); //获取指定元素相应属性的值（attname例：color）
$("element").css("attname","value"); //设置……属性值（例："color","#FF0000"）
$("element").css({ "margin-left": "10px", "background-color": "blue" }); 
//使用“名/值对”进行批量设置……（例子见自身）
/*=========
 2009-1-22
=========*/
$("element1").next(element2) //与指定元素一 紧邻 的指定元素二
$("element1").parent().is(element2) //元素一的父元素在元素二的集合中吗 
//模仿鼠标悬停事件
//hover(over,out)
//over:在上方执行 | out：移出时执行
$("element").hover(
	function(){
		//在上方执行
	}, function(){
		//移出时执行
	}
)

以上部分是参考 jQuery中文指导 + jQuery API手册进行学习的记录

到这里可能算是基本入门吧，接下来准备直接通过阅读API手册进行学习
最后再自我强调一下：切勿眼高手低！