【无标题】

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函数,依次顺序全部执行

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值