jQuery

入门

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

选择器

$("*")；//选区所有元素
$("[href]")；//选取带有 href 属性的元素
$("a[target!='_blank']")；//选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(this)；//选取当前 HTML 元素
$(":button")；//选取所有 type="button" 的 <input> 元素 和 <button> 元素

$("tr:even")；//选取偶数位置的 <tr> 元素，奇为odd
	:eq(3)//获取索引为三的元素
	:gt(3)//索引大于3的所有元素
	:lt(3)//索引小于3的所有的元素

事件

鼠标事件click、dblclick、mouseenter、mouseleave、hover

键盘事件keypress、keydown、keyup

表单事件submit、change、focus、blur

文档、窗口事件load、resize、scroll、unload

$("p").click(function(){
  $(this).hide();
});

效果

callback完成动画后的函数名

隐藏显示

$("p").hide(speed,"linear",function);//隐藏,speed="slow"、"fast" 或毫秒;后者只有"linear" 和 "swing"
$("p").show();//显示
$("p").toggle();//显示被隐藏的元素，并隐藏已显示的元素--切换

淡入淡出

fadeIn();//淡入已隐藏元素

滑动案例

slideDown();//元素向下滑动

var $slidebar = $('#slidebar');//转换jQuery对象
var rate=$box.innerHeight()/$content.innerHeight();//计算比例

$slidebar.draggable({// 滑块的拖拽
			axis: 'y',//固定其只能y轴运动
			containment: 'parent',//固定其只能在父级内部移动
			drag: function(event, ui){//ui拥有两个有用的方法
				nowtop = ui.position.top;//获取其位置
				nowcontenttop = -nowtop/rate;
				$content.css('top', nowcontenttop);
			}
		});

$box.mousewheel(function(event){//鼠标的滑动，鼠标没动一下，执行一次
			nowtop += -event.deltaY * 5;// 根据滚轮方向计算滑块的top
			$slidebar.css('top', nowtop);// 设置滑块的top
		});

动画

var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow",callback);
$("div").stop();//停止动画

链

$("#p1"，".p2").css("color","red").slideUp(2000).slideDown(2000);//设置属性color为red，并让p1向上滑2000

JQuery HTML

属性显示

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值
• css()；方法设置元素的样式,类似于style

$("#runoob").attr("href");//显示相应属性内容

添加元素

$("p").append("<li>追加列表项</li>");//追加文本或列表项
$("img").after("<i>之后</i>")；//在前或后插入.before();

删除元素

$("#div1").remove();//删除被选元素及其子元素。
$("#div1").empty();//删除被选元素的子元素
$("p").remove(".italic");//删除 class="italic" 的所有 <p> 元素：

CSS操作

$(".ddd").addClass("important blue"); //向被选元素添加一个或多个类
$("h1,h2,p").removeClass("blue");		//从被选元素删除一个或多个类
toggleClass();   //对被选元素进行添加/删除类的切换操作

$("p").css("background-color");//返回首个匹配元素的 background-color 值
$("p").css({"background-color":"yellow","font-size":"200%"});//设置属性值
$("p").css("background-color","yellow");

尺寸

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gOQOirB4-1577074208830)(F:\TyporaWorkplace\文件\图片\jQuery尺寸.jpg)]

遍历

祖先

• parent()
• parents()//所有祖先元素
• parentsUntil()

$("span").parents("ul").css("color","red");//所有为ul的祖先元素
$("span").parentsUntil("div");//返回介于 <span> 与 <div> 元素之间的所有祖先元素

后代

• children()//直接孩子
• find()

$("div").find("span");//后代所有span元素
 $("div").find("*");//后代所有元素

同胞元素

• siblings()//返回被选元素的所有同胞元素
• next()
• nextAll()
• nextUntil()
• prev()//与上面方向相反
• prevAll()
• prevUntil()

过滤

• first();
• last();
• eq(1);指定索引号的，首个是1不是0
• filter();不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
• not()；返回不匹配标准的所有元素

Ajax

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新

• 必需的 URL 参数规定您希望加载的 URL
• 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
• 可选的 callback 参数是 load() 方法完成后所执行的函数名称

$(selector).load("demo_test.txt #p1",data,callback);//

noConflict()

会释放对 $ 标识符的控制，这样其他脚本就可以使用$

插件

• Validate客户端表单验证
• cookie
• accordion
• autocomplete
• growl
• 密码验证
• prettydate
• tooltip
• treeview

JSON

• JSON 指的是 JavaScript 对象表示法
• JSON 是轻量级的文本数据交换格式

json.parse();将从服务器中获得的数据转换为 JavaScript 对象

json.stringfy();将 JavaScript 对象转换为字符串,以向服务器发送数据

值

• 数字（整数或浮点数）
• 字符串（在双引号中）
• 逻辑值（true 或 false）
• 数组（在中括号中）
• 对象（在大括号中）
• null

对象

创建对象的两种方法：

var obj = new Object();
obj.age = 18;

var myObj,x;//访问对象值
var obj = {
			name: 'xiaoming',
			age: 18,
			pai: ['东风','二万','五条'],
			jiehun: false,
			isHaved:null,
    		zhangda : function(){
					this.age++;
            }
		};

使用

x = myObj.name;//赋值
x=myObj["name"];
obj.zhangda();
x=myObj[0];
delete myObj.name;//删除对象值

this

• 直接用()运算符来调用函数，那么函数里面的this指的是window对象
• 函数如果绑定给了某个HTML元素的事件上，那么函数里面的this就是这个HTML对象
• 用定时器调用函数，函数内部的this就是window对象
• 用对象打点（方法）来调用函数，函数里面的this指的是这个对象
• 用apply、call，可以人工设置this是谁了，百变