初学jquery需要注意的几点：
1.通过JQ获取到的元素是JQ对象，通过元素的document.getXXX获取到的元素是原生对象
2.原生对象不能调用JQ的方法和属性
3.JQ对象不能调用原生对象的方法和属性
JQ对象和原生对象可以相互转换:
1.原生对象如何转JQ对象
var content = document.getElementsByClassName("content")[0];
$(content).css("color","red");
2.JQ对象如何转原生对象
// JQ对象[0]
// JQ对象.get(0)
$(".content")[0].innerHTML = "显示";
$(".content").get(0).innerHTML = "显示2";
常用的语法
1.获取元素 （$("") 里面放字符串-选择器）
类名：$(".item")，标签名：$("div")，输入框的类型：$("input[type=radio]")，筛选类名不是item的div：$("div:not(.item)")。。。
2.创建元素，添加元素，删除元素
- .append和appendTo 节点子级最前面插入
- .prepend 和 prependTo 节点子级最后插入
- .after和.insertAfter 节点（同级）后面插入
- .wrap给节点包裹一个父级
- .unwrap去掉父级
- .wrapInner 给标签的内容加标签
区别看下列：
// 1.创建标签
$("<p class='item2' style='color:green;'>创建p标签</p>")
// 2.添加元素
// 给p插入一个子级span
$("p").append($("span"))
// 把span插入p里面
$("span").appendTo($("p"))
3.修改/获取css样式
// 获取样式
console.log($(".content").css("color"));
// 筛选下标为1的p标签
console.log($("p").eq(1).css("color"));
// 设置样式
// 设置样式第一种方式
$("p").css("color","pink");
// 设置样式第二种方式
$("p").css({
color:"green",
border: "1px solid red"
})
// 设置样式第三种方式
var cArr = ["black","green","blue","gray","purple","gold"];
$("P:first").css("color",function(index,oldValue){
return cArr[index];
})
$("p").css({
width:function(index,oldValue){
return 100 * (index + 1);
},
height:function(){
return "50px";
// return this.offsetWidth * 0.5;
}
})
JQ的属性和方法
1.document.ready: 和window.onload类似，都是文档加载完毕之后执行。不同点在于document.ready可以绑定多个事件.
// 三种写法
$(document).ready(function(){
console.log("文档加载完毕");
})
$(document).ready(function(){
console.log("文档加载完毕2");
})
// 简化版写法。最常用的写法
$(function(){
console.log("文档加载完毕3")
})
- 移交$的使用权
正常情况下$就代表是jQuery.如果和其他变量名有冲突，JQ可以把$的使用权交出去。
// 调用此方法以后，就不能继续使用$来代表JQ
// 用变量接收返回值之后，这个变量就代表JQ
var $$ = $.noConflict();
3.常用的jQ事件
DC5FA0E5-1063-4153-A958-C4406A82EA34.png
4.属性的获取
$(":button").click(function(){
// 获取属性
// attr一般用于获取去/设置自定义属性
// prop一般用于获取自带属性
// 获取src的时候，prop是绝对路径
console.log($(":checkbox").attr("checked"));
// 获取系统自带的属性可以使用prop
console.log($(":checkbox").prop("checked"));
// 设置属性
$(":checkbox").attr("checked",true);
console.log($(":button").prop("index"));
console.log($(":button").attr("index"));
// $(".box").addClass("box");
// 添加，移出，切换类名
$(".box").toggleClass("box1");
})
5.标签内容
.html 元素内容 相当于innerHTML
.text 元素内容
.val 文本框的值 相当于js的value
- 效果
1.自定义动画 .animate（）
2.隐藏 .hide()
3.淡入 用于隐藏元素 .fadeIn() - 淡出 .fadeOut()
5.淡入状态时为淡出，反之为淡入 .fadeToggle() - 向上滑动 .slideUp()
7.向下滑动 .slideDown()
8.停止未执行的动画 .clearQueue()
