1.jQuery入口函数其他写法
1. $(document).ready(function(){});
2. jQuery(document).ready(function(){});
2. $(function(){}); //常用的
2. jQuery(function(){});
2.jQuery冲突问题
<script></script>可能会引入多个js或者jquery文件
根据顺序不同，优先级也不同。可能会覆盖前一个，比如$
解决$冲突问题
1.释放$的使用权
释放操作必须在编写其他jQuery代码之前编写
释放之后就不能使用$，改为使用jQuery
jQuery.noConflict();
jQuery(function(){});
2.自定义一个访问符号
var a= jQuery.noConflict();
a(function(){});
3.jQuery核心函数
1.接收一个函数
$(function(){});
2.接收一个字符串选择器 (返回一个jQuery对象，对象中保存了找到的DOM元素)
var $div2=$(".box1");
var $div3=$("#box2");
3.接收一个字符串或字符串代码片段（返回一个jQuery对象，对象中保存了创建的DOM元素)
var $p=$("<p>我是一个段落</p>");
$div2.append($p);
4.接收一个DOM元素（会被包装成jQuery对象返回给我们)
var span=document.getElementsByTagName("span")[0];
var $span=$(span);
4.jQuery对象
jQuery是一个伪数组(有0到length-1的属性，并且有length属性)
5.静态方法和实例方法
1.定义一个类
function AClass(){}
2.给这个类添加一个静态方法 ，直接添加给类的就是静态方法
AClass.staticMethod=function()
{
alert("staticMethod");
}
//静态方法通过类名调用
AClass.staticMethod();
3.给这个类添加一个实例方法
AClass.prototype.instanceMethod=function()
{
alert("instanceMethod");
}
//实例方法通过类的实例调用 创建一个实例(创建一个对象)
var a=new AClass();
a.instanceMethod();
6.静态方法each方法
1.利用jQuery的each静态方法遍历数组
第一个参数:当前遍历到的索引，第二个参数:遍历到的元素
var arr=[1,3,5,7,9];
$.each(arr, function(index,value) {
console.log(index,value);
});
2.利用jQuery的each静态方法遍历伪数组
var obj={0:2,1:4,2:6,3:8,4:10,length:5};
$.each(obj, function(index,value) {
console.log(index,value);
});
7.静态方法map方法
1.利用jQuery的map静态方法遍历数组
第一个参数:要遍历的数组
第二个参数:每遍历一个元素之后执行的回调函数
回调函数的参数: 第一个参数:遍历到的元素,第二个参数;遍历到的索引
var arr=[1,3,5,7,9];
$.map(arr,function(value,index)
{
console.log(index,value);
});
2.利用jQuery的map静态方法遍历伪数组
var obj={0:2,1:4,2:6,3:8,4:10,length:5};
$.map(obj,function(value,index)
{
console.log(index,value);
});
3.each和map的区别
each静态方法默认的返回值就是:遍历谁就返回谁
map静态方法默认的返回值就是一个空数组
each静态方法不支持在回调函数中对遍历的数组进行处理
map静态方法可以在回调函数中通过return对遍历的数组进行处理
8.jQuery中其他静态方法
1.$.trim()
作用：去除字符串两端的空格
参数:需要去除空格的字符串
返回值:去除空格之后的字符串
2.$.isWindow()
作用:判断传入的对象是否是window对象
返回值:true/false
3.$.isArray()
作用:判断传入的对象是否是真数组
返回值:true/false
4.$.isFunction() （jQuery本质是一个函数)
作用:判断传入的对象是否是一个函数
返回值:true/false
9.静态方法holdReady方法
$(function()
{
alert("ready");
});
$.holdReady(true)：暂停ready执行
$.holdReady(false): 恢复ready执行
10.jQuery内容选择器
1. :empty
作用:找到既没有文本内容也没有子元素的指定元素
var $div=$("div:empty");
2. :parent
作用:找到有文本内容或有子元素的指定元素
var $div=$("div:parent");
3. :contains(text)
作用:找到包含指定文本内容的指定元素
var $div=$("div:contains('我是div')");
4. :has(slelector)
作用:找到包含指定子元素(选择器)的指定元素
var $div=$("div:has('span')");
11.jQuery-attr方法
1. attr(name | pro | key,val | fn)
作用：获取或设置属性节点的值
可以传递一个参数，也可以传递两个参数
如果传递一个参数，代表获取属性节点的值
如果传递两个参数，代表设置属性节点的值
var $div=$("span").attr("class");
var $div=$("span").attr("class","box");
var $div=$("span").attr("abc","123");
注意点:
如果是获取：无论找到多少个元素，都只会返回第一个元素指定的属性节点的值
如果是设置：找到多少个元素就会设置多少个元素
如果是设置:如果设置的属性节点不存在，那么系统会自动新增
2. removeAttr(name)
作用:删除属性节点
var $div=$("span").removeAttr("class");
var $div=$("span").removeAttr("class name"); //删除多个属性需要用空格隔开删除class 和 name属性
12.jQuery-prop方法
1. prop(name | pro | key,val | fn)
特点和attr方法一致
2.removeProp(name)
特点和removeAttr方法一致
注意事项:prop不仅能够操作属性,还能操作属性节点
官方推荐在操作属性节点时，具有 true 和 false两个属性的属性节点，如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()
13.jQuery操作相关方法
1. addClass(class | fn)
作用:添加一个类（如果要添加多个，多个类名之间用空格隔开)
2. removeClass(class | fn)
作用:删除一个类 (如果像删除多个，多个类名之间用空格隔开)
3.toggleClass(class|fn[,sw])
作用:切换类 (有就删除，没有就添加)
$(function()
{
var btns=document.getElementsByTagName("button");
btns[0].onclick=function()
{
$("div").addClass("class1 class2");
}
btns[1].onclick=function()
{
$("div").removeClass("class2 class1");
}
btns[2].onclick=function()
{
$("div").toggleClass("class2 class1");
}
});
14. jQuery文本值相关的方法
1. html([val | fn])
和原生js中的innerHTML一模一样
2. text([val | fn])
和原生js中的innerText一模一样
3. val([val | fn | array])
var btns=document.getElementsByTagName("button");
btns[0].onclick=function()
{
$("div").html("<p>我是段落<span>我是span</span></p>");
}
btns[1].onclick=function()
{
console.log($("div").html());
}
btns[2].onclick=function()
{
$("div").text("<p>我是段落<span>我是span</span></p>");
}
btns[3].onclick=function()
{
console.log($("div").text());
}
btns[4].onclick=function()
{
$("input").val("请输入内容");
}
btns[5].onclick=function()
{
console.log($("input").val());
}
15.jQuery操作css样式的方法
1. 逐个设置
$("div").css("width","100px");
$("div").css("height","100px");
$("div").css("background","red");
2. 链式设置 （注意点：链式操作如果大于三步，建议分开)
$("div").css("width","100px").css("height","100px").css("background","red");
3. 批量设置
$("div").css({
width:"100px",
height:"100px",
background:"red"
});
4.获取css样式值
$("div").css("width" );
16.jQuery尺寸与位置操作
1.尺寸操作
var btns=document.getElementsByTagName("button");
btns[0].onclick=function()
{
console.log($(".father").width()); //获取
}
btns[1].onclick=function()
{
$(".father").width("500px"); //设置
}
2.位置操作
offset()
作用: 获取或设置元素距离窗口的偏移位
获取距离窗口左边的偏移位 $(".son").offset().left；
获取距离窗口上边的偏移位 $(".son").offset().top;
设置距离窗口左边的偏移位 $(".son").offset({left:10 });
设置距离窗口上边的偏移位 $(".son").offset({top:10 });
position() 只能获取，不能设置
作用: 获取元素距离定位元素的偏移位
获取距离定位元素的偏移位 $(".son").position().left；
获取距离定位元素的偏移位 $(".son").position().top;
17.jQuery的scrollTop方法
1.获取滚动的偏移位
$(".scroll").scrollTop()
2.设置滚动的偏移位
$(".scroll").scrollTop("300");
3.获取网页滚动的偏移位 (为了保证浏览器的兼容性需要按照如下写法）
$("body").scrollTop()+$("html").scrollTop());
4.设置网页滚动偏移位 (为了保证浏览器的兼容,设置网页滚动偏移位的时候必须按照如下写法）
$("html,body").scrollTop(300);
