jQuery认识(一)
一、 jquery入口函数与js原生代码的区别
1、原生js与jquery入口函数的加载模式不同
原生js会等到dom元素加载完毕,并且图片也加载完毕才会执行
jquery会等到dom元素加载完毕,但不会等图片加载完毕才执行
2、原生的js如果编写多个入口函数,后面的会覆盖前面的;
jquery编写多个入口函数,后面的不会覆盖前面的
二、jquery写法
1、
$(document).ready(function(){
});
2、
jQuery(document).ready(function(){
});
3、
$(function(){
});//推荐使用
4、jQuery(function(){
});C
三、jquery的冲突问题
对于别的框架也使用符号的解决1、释放的使用权:释放操作必须在编写其他的jquery之前编写,释放之后不能使用$。改为使用jquery。
2、自定义访问符号
var nj=jQuery.noConflict();
nj(function(){
alert("hello world");
});
jQuery的核心函数与工具方法
一、jquery核心函数
$();或者jQuery();就代表一个核心函数:
a、可以接受一个函数
<script>
$(function(){
alert("hello world");
});
</script>
b、接受一个字符串
b.1 接受一个字符串选择器:返回一个jQuery对象,对象中保存了找到的DOM对象
<script>
var $box1=$(".box1");
var $box2=$("#box2");
console.log(.box1);
console.log(#box2);
</script>
b.2 接受一个代码片段;返回一个jQuery对象,对象中保存了创建的DOM对象
<script>
var $p=$("<p>我是段落</p>");
console.log($p);
$box1.append($p);
</script>
c、接受一个DOM元素:会被包装成一个jQuery对象返回发给我们
<script>
var span=document.getElementsByTagName(“span”)[0];
console.log(span);
var $span=$(span);
console.log($span);
</script>
二、jQuery对象
1、定义:jQuery对象是一个伪数组(有0~length-1的属性,并且有length属性)
2、实例方法
<script type="text/javascript">
//1、定义一个类
function AClass(){
//2、给这个类添加一个静态方法
//直接添加给类的就是静态方法
AClass.staticMethod=function(){
alert("staticMethod");
};
//静态方法通过类名调用
AClass.staticMethod();
//给这个类添加一个实例方法
AClass.prototype.instanceMethod=function(){
alert("nstanceMethod");
};
//实例方法通过类的实例调用
//创建一个实例(创建一个对象)
var a=new AClass();
//通过实例调用实例方法
a.instanceMethod();
}
</script>
三、jquery的静态方法
1、each()
:对于each方法,js原生能够遍历数组,但是不能遍历伪数组
var arr=[1,3,5,7,9,11];
var obj={0:1,1:3,2:5,3:7,4:9,length:5};
$.each(arr,function(value,index){
console.log(index,value);
});
2、map()
:对于map方法,js原生能够遍历数组,但是不能遍历伪数组
var arr=[1,3,5,7,9,11];
var obj={0:1,1:3,2:5,3:7,4:9,length:5};
$.map(arr,function(value,index){
console.log(index,value);
});
3、$.isWindow()
:
作用:判断传入的对象是否是window对象
返回值:true/false
4、$.isArray()
:
作用:判断传入的对象是否是真数组
返回值:true/false
**5、isFunction()**
:
作用:判断传入的对象是否是是一个函数
返回值:true/false
注意点:jquery本质是一个函数
var res=$isFunction(jQueryr);
console.log(res);
**6、holdReady()**
:
作用:暂停或者恢复ready的执行
$.holdReady(true);
$.holdReady(false);
jQuery属性和属性节点
一、属性定义:对象身上保存的变量
二、如何操作属性:
<script type="text/javascript">
$(function(){
function Person(){
};
var p=new Person();
//第一种操作方式
p.name="name";
console.log(p.name);
//第二种操作方式
p["age"]="123";
console.log(p["age"]);
})
</script>
三、属性节点定义:
在编写HTML代码时,在HTML标签中添加的属性就是属性节点
<span name="j+q12"></span>
在浏览器中找到span这个DOM元素之后,展开之后的都是属性节点,在attributes属性中保存的所有内容都是属性节点.
四、如何操作属性节点
<script type="text/javascript">
$(function(){
var span=document.getElementsByTagName("span")[0];
span.setAttribute("name","0000");
console.log(span.getAttribute("name"))
})
</script>
五、属性和属性节点的区别
任何对象都有属性,但是只有dom对象才有属性节点
六、jQuery属性操作方法
1、attr(name|pro|key,val|fn)、removeAttr(name)
`attr(name|pro|key,val|fn)`
$("span").attr("class");//当传递一个参数,表示获取属性节点的值
$("span").attr("class","box");//传递两个参数,表示设置属性节点的值
$("span").attr("abc","111");
作用:获取或者设置属性节点的值(注意点:如果是获取,无论找到多少个元素,只会返回第一个元素的指定的属性节点的值;如果是设置,找到多少个元素就设置多少个元素,如果设置的属性节点不存在,则系统会自己新增)
`removeAttr(name)`
$("span").removeAttr("class");
$("span").removeAttr("class name");//当想删除多个属性节点时,两个属性节点只有中间以空格隔开即可
作用:删除属性节点(注意点:会删除所有找到元素指定的属性节点)
2、prop(n|p|k,v|f)、removeProp(name)
prop(n|p|k,v|f)
$("span").eq(0).prop("demo","box1");
$("span").eq(1).prop("demo","box2");
特点:和attr方法一致
removeProp(name)
$("span").removeProp("demo");
特点:和removeAttr方法一致
注意点:Prop不仅能够操作属性,还能操作属性节点
$("span").prop("class","box");
官方推荐在操作属性节点时,具有true和false两个属性的属性节点时,如checked、selected或者disabled使用prop(),其他用attr()
console.log($("input").prop("checked"));//true|false
console.log($("input").attr("checked"));//checked|undefined
3、jQuery类操作相关方法
a、 addClass(class|fn)
作用:添加一个类(如果要添加多个,中间用空格隔开即可)
b、 removeClass(class|fn)
作用:删除一个类(如果要删除多个,中间用空格隔开即可)
c、 toggleClass(class|fn)
作用:切换一个类(有就删除,没有就添加)
<script type="text/javascript">
$(function(){
var btns=document.getElementsByTagName("button");
btns[0].onclick=function(){
$("div").addClass("div1 div2");
};
btns[1].onclick=function(){
$("div").removeClass("div1 div2");
};
btns[2].onclick=function(){
$("div").toggleClass("div1 div2");
};
})
</script>
4、jQuery文本值操作相关方法
html([val|fn])//和原生js中innerHTML一模一样
text([val|fn])//和原生js中textHTML一模一样
val([val|fn|arr])//和原生js中value一模一样
<script type="text/javascript">
$(function(){
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());
};
})
</script>
5、jQuery操作样式相关方法
a、设置方式
<script type="text/javascript">
$(function(){
//a.逐个设置
$("div").css("width","100px");
$("div").css("height","100px");
$("div").css("background","red");
//b.链式设置(如果大于三步,建议分开)
$("div").css("width","100px").css("height","100px").css("background","yellow");
//c.批量设置
$("div").css({
width:"100px",
height:"100px",
background:"blue"
});
})
</script>
b、获取css样式值
console.log($("div").css("width"));
6、jQuery尺寸和位置操作方法
a、尺寸heigh([val|fn]);width([val|fn]);innerHeight();innerWidth();outerHeight([soptions]);outerWidth([options])
<script type="text/javascript">
$(function(){
var btns=document.getElementsByTagName("button");
//监听获取
btns[0].onclick=function(){
console.log($(".father").width());
};
//监听设置
btns[1].onclick=function(){
$(".father").width("500px")
};
})
</script>
b、位置
offset([coordinates])
//作用:获取或者获取元素距离窗口的位偏移
console.log($(".son").offset().left);
btns[2].onclick=function(){
$(".son").offset({
left:10
})
};
position()
//作用:获取元素距离定位元素的位偏移
console.log($(".son").position().left);
//注意点:position只能获取不能设置
btns[2].onclick=function(){
$(".son").position({
left:10
})
};
//获取网页滚动的偏移位(为了浏览器兼容,需要按照如下手法)
console.log($("html").scrollTop()+$("body").scrollTop());
//获取网页滚动的偏移位(为了浏览器兼容,需要按照如下手法)
btns[1].onclick=function(){
$("html,body").scrollTop(300);
}