jquery常见问题
1、使用jQuery一定要引入jQuery库吗?
答案:是,必须
2、jQuery中的$
到底是什么?
答案:它是一个函数
3、怎么为按钮添加点击响应函数的?
答案:
1、使用jQuery查询到标签对象
2、使用标签对象.dick( function() );
3、jQuery核心函数
$
是jQuery的核心函数,能完成jQuery的很多功能。$
()就是调用$
这个函数
1、传入参数为[函数]时:
表示页面加载完成之后。相当于window.onload = function(){}
2、传入参数为[HTML字符串]时:
会对我们创建这个html标签对象
$(function () {
alert(“页面加载完成之后,自动调用");
$("
<div>"+
u
<span>div-span1</span>"+
"
<span>div-span2</span>"+
"
</div>" ).appendTo("body") ;
});
3、传入参数为[选择器字符串]时:
$(“#id属性值”);
id选择器,根据id查询标签对象
$(“标签名");
标签名选择器,根据指定的标签名查询标签对象
$(“.class属性值”);类型选择器,可以根据class属性查询标签对象
4、传入参数为[ DOM对象]时:
会把这个dom][对象转换为jQuery对象
jQuery对象和dom对象区分
Dom对象
1.通过getElementeyld()查询出来的标签对象是Dom对象
2通过getElementsByName()查询出来的标签对象是Dom对象
3.通过getElementsByTagName()查询出来的标签对象是Dom对象
4.通过createElement()方法创建的对象,是Dom对象
jQuery对象
5.通过JQuery提供的API创建的对象,是JQuery对象
6.通过JQuery包装的Dom对象,也是JQuery对象
7.通过JQuery提供的API查询到的对象,是JQuery对象
问题: jQuery对象的本质是什么?
jQuery对象是dom对象的数组+jQuery提供的一系列功能函数。
4.3、jQuery对象和 Dom对象使用区别
jQuery对象能使用DOM对象的属性和方法
DOM对象也不能使用jQuery对象的属性和方法
4.4、Dom对象和 jQuery对象互转
*1、dom对象转化为jQuery对象(重点)
1、先有DOM对象
2、$( DOM对象)就可以转换成为jQuery对象
*2、jQuery对象转为dom对象(重点)
1、先有jQuery对象工于
2、jQuery对象[下标]取出相应的DOM对象
*注意
$
(function () { … }); 是一个jQuery的快捷方式,表示在DOM加载完毕后执行其中的代码。
如果缺少$(function () { … }),那么代码将不会在DOM加载完毕后执行。这意味着在代码运行之前,可能无法正确选择和操作DOM元素。
( f u n c t i o n ( ) . . . ) 是 (function () { ... })是 (function()...)是(document).ready(function () { … })的简写形式,它用来确保代码在DOM加载完毕后执行。这样可以避免在没有加载完整个DOM的情况下操作DOM元素。
层级选择器
ancestor descendant
;
parent > child
:
prev + next
:
prev ~ siblings
:
//3.选择id 为one 的下一个div元紊
$("tbtn3" ).click( function(){
$("tone+div" ).css("background","#bbffaa" ) ;});
//4.选择id 为two的元紊后面的所有div兄弟元紊
$("btn4" ).click(function(){
$(""#two~div" ).css("background", "#bbffaa" );
遍历
老式遍历
for (var i =0; i <$checkboies.length; i++)ialert( $checkboies[i].value );
// each方法是jQuery对象提供用来遍历元素的方法
//在遍历的function函数中,有一个this对象,这个this对象,就是当前遍历到的dom对象
$checkboies.each( function () {
alert( this.value );
});
html0、text0、val).
html()
它可以设置和获取起始标签和结束标签中的内容。
跟dom属性innerHTML一样。
text()
它可以设置和获取起始标签和结束标签中的文本。
跟dom属性innerText一样。
val()
它可以设置和获取表单项的value 属性值。
跟dom 属性value一样
不传参数,是获取,传递参数是设置
-attr()和prop()方法
alert($( " :checkbox:first" ). attr( “name”) ); //获取
$( “; checkbox:first” ).attr(“name” , “abc”) ;//设置
attr()
可以设置和获取属性的值,
不推荐操作checked、readOnly、selected、disabled等等
attr 方法还可以操作非标准的属性。比如自定义属性:abc,bbl
prop()
可以设器和获取属性的值,
只推荐操作checked、readOnlv、selected、disabled 等等
appendTof()
a.appendTo(b)
把a插入到b子元素末尾,成为最后一个子元素
prependTo()
a.prependTo(b)
把a插到b所有子元素前面,成为第一个子元素
外部插入:
insertAfter()
a.insertAfter(b)
得到 ba
insertBefore()
a.insertBefore(b)
得到ba
替换:
replaceWith()
a.replaceWith(b)
用b替换掉a
replaceAll()
a.replaceAll(bj
用a替换掉所有b
删除:
remove()
a.remove();
删除a标签
empty()
a.empty();
清空a标签里的内容
第二天
给删除的a标签绑定单击事件
$( “a” ).click(function () {
alert(1);
//return false;可以阻止元素的默认行为。
return false;
6、CSS样式操作。
addClass()添加样式
removeClass()删除样式
toggleClass()有就删除,没有就添加样式。
offset()获取和设置元素的坐标。
举例:
$("#btn03" ).click(function(){
//togglecLass( ) 对被选元素进行添加/删除类的切换操作
$divEle.toggleclass( "redDiv" )
});
$( "#btn04" ).click(function(){
//offset() 返回第一个匹配元素相对于文档的位置。
var pos = $divEle.offset( );
console.log(pos);
$divEle.offset({
top: 100,
left:50
});
});
7、jQuery动画
基本动画
show()将隐藏的元素显示
hide()将可见的元素隐藏。
toggle()可见就隐藏,不可见就显示。.
以上动画方法都可以添加参数。
1、第一个参数是动画执行的时长,以毫秒为单位
2、第二个参数是动画的回调丞数(动画完成后自动调用的函数)
举例
//淡入fadeIn()
$("btn4" ).click(function(){
$( "#div1 " ).fadeIn( 2000,function () {
alert( "fadeIn完成")
});
});
//淡出fadeout( )
$("btn5" ).click( function( ){
$( "tdiv1 " ).fadeout ( 2000,function ( ) {
alert( "fadeout完成")
});
});
淡入淡出动画
fadeln()淡入(慢慢可见》
fadeOut()淡出(慢慢消失)
fadeTo()在指定时长内慢慢的将透明度修改到指定的值。0透明,1完成可见,0.5半透明
fadeToggle()淡入/淡出切换
//淡化到fadeTo()
$( "btn6").click(function( ){
$( "div1" ).fadeTo( 2000,8.5,function (){
alert( "fadeTo完成")
}):
});
8、jQuery事件操作
$(function(){});
和
window.onload = function()的区别?
-
他们分别是在什么时候触发?
1、jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行。
2、原生js的页面加载完成之后,除了要等浏览器内核解析完标签创建好DOM对象,还要等标签显示时需要的内容加载完成。 -
他们触发的顺序?
1、jQuery页面加载完成之后先执行
2、原生js 的页面加载完成之后 -
他们执行的次数?
1、原生js 的页面加载完成之后,只会执行最后一次的赋值函数。
2、jQuery的页面加载完成之后是全部把注册的function函数,依次顺序全部执行