JQuery($)

jquery是一个javascript的框架，是对javascript的一种封装，通过JQuery可以非常方便的操作html元素

实现显示和隐藏

• 导入jquery.min.js
• 链接：https://pan.baidu.com/s/1p-PtH5JTWbO_FVPLRXeZnQ
• 提取码：9olg
• 文档加载完成后再执行JS：$();
• JQuery：$("#id")获取元素对象
• 增加监听器：click
• 调用JQuery对象的方法：hide(),show()

常见方法

• 取值：$("#input1").val()
• 获取元素内容：如果有子元素，保留标签：.html
• 获取元素内容：如果有子元素，不包含标签：.text

CSS

• 增加class：addClass()
• 移除class：removeClass()
• 切换class：toggleClass()
• css函数

$("#b1").css("background-color", "pink");
$("#b1").css({"background-color":"pink", "color":"pink"});

选择器

• 元素：$("tagName")
• id：$("#id")
• 类：$(.className)
• 层级：$("div#d3 span")
• 最先最后：$("div:first")
• 奇偶：$("div:odd") $("div:even")
• 可见性：$(div:visible)
• 属性：$("div[id='pink']")
• 表单对象：:submit
• 表单属性：:checked
• 当前元素：$(this)

筛选器

• 指的是在已经通过选择器选中了元素后，在此基础上进一步选择
• 第一个：.first() .last() eq(num)
• 父，祖先：parent() parents()
• 儿子 后代：children() find(selector)
• 同级元素：siblings()

属性

• 获取一个元素的属性：$("#h").attr("align")
• 修改属性：$("#h").attr("align","right")
• 删除属性：$("#h").removeAttr("align")
• prop与attr的区别：区别在于自定义属性和选中属性，attr可以获取自定义属性，pro可以获取表单中变化后的值

效果

• 显示、隐藏、切换：show(),hide(),toggle()
• 滑动切换：slideUp(),slideDown,slideToggle()
• 淡入淡出：fadeIn(),fadeOut
• 自定义动画效果：animate({left:'100px'},2000);
• 回调函数：在效果方法的最后一个参数传入function

事件

• 加载：页面加载$();,图片加载load()
• 点击：click(),dblclick()
• 键盘：先后顺序，keydown,keypress,keyup
• 鼠标：mousedown,mouseup
• 焦点：focus,blur
• 改变：change()
• 绑定事件：on()
• 触发事件：$("#b").trigger("dblclick");

AJAX

• $.ajax
• $.get
• $.post
• 最简单的方式：$("#id").load(page, [data])
• 格式化输入数据：serialize()

数组操作

• 数组操作：$.each
• 排序，去除重复：sort(),$.unique()
• 在数组中的位置：$.inArray

字符串操作

• 去除首尾空白：$.trim()

JSON反序列化

• 将JSON格式的字符串，转换为JSON对象：$.parseJSON

JQuery与DOM转换

• JQuery转DOM：[0]
• DOM转JQuery：$()