jQuery基础,我就不信你还听不明白了

28 阅读2分钟

总结

大厂面试问深度,小厂面试问广度,如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官,还要平时遇到问题后思考一下问题的本质,找方法解决是一个方面,看到问题本质是另一个方面。还有大家一定要有目标,我在很久之前就想着以后一定要去大厂,然后默默努力,每天看一些大佬们的文章,总是觉得只有再学深入一点才有机会,所以才有恒心一直学下去。

开源分享:docs.qq.com/doc/DSmRnRG…

实例运用
1.id选择器
例如需要寻找一个ID=city的div标签,并更改.
如果是JavaScript中应该是getelementbyid("city"),然后定义一个变量var,然后使用innertext来进行更改.
如果是使用jQuery则 ("#city").text("???"); 即可以进行更改数据 2.样式选择器(类选择器) 例如一个span中class=a1 使用jQuery进行寻找是    (".a1")
3.标签选择器
例如存在三个span
1
2
3
同时选中span标签则 $("span")
4.层级选择器
如存在很多层级的标签,例如存在

abc

    
                                              
            

需要找到span标签,同时存在两个h1标签,span标签嵌套在第二个h1标签内,如果要寻找span,则 $(".b1 .c1 span") 5. 多选择器

abc

    
                                              
            

如果需要同时找到div span和ul,则 $("#c1,#a1,ul") 注意,井号,并且二者之间是逗号隔开,代表不仅要找c1标签,还要寻找a1标签,还要寻找ul标签. 6.属性选择器 例如: 需要寻找input中name等于a1的标签 $("input[name='a1']")

间接的标签选择

    
a
    
b
    
c
    
d
$("#a1").prev() //寻找上一个兄弟标签的内容,这里寻找到的数据就是a $("#a1").next() //寻找下一个兄弟标签的内容,这里寻找到的数据就是c .next和.prev都可以继续嵌套,以寻找上上个或者下下个数据 例如: $("#a1").next().next() 寻找到的就是d $("#a1").siblings() //找到所有的兄弟标签,但是并不包括本身

寻找父子关系

    
        
a
        
            
1
                
        
c
        
d
    
    
        
aa
        
bb
        
cc
        
dd
    

("#a1").parent() //寻找a1标签的父亲,即上层的div,id=c1 ("#a1").children() //寻找a1标签的儿子,即下层的div,id=b1
同样children和parent都可以嵌套
$("#a1").children().children()
如果需要特定的parent或者children,则再括号中填入class标签名字(".???"),或者填入id名称("#???"),或者直接("//标签类型,例如div,span")

$("#a1").find() 寻找所有的子孙

jQuery中
如果需要移除class效果,可以removeclass("??")
如果需要增加class效果,可以addclass("??")
如果需要判定class效果是否存在与标签内,则hasclass("??")

class类型中可以使用cursor:pointer //移动到标签中光标会变为手指,而并非指针

值的操作
例如存在一个div    

123

如果要通过jQuery获取div中的内容,则

如果要通过jQuery更改div中的内容,则

如果是input这种需要用户输入的数据,则返回值便不是.text(),需要获取input需要.val()
例如:
<input id="a1" type="button" placeholder="用户名" οnclick="//自己定义的函数名称">
如果需要获取用户中的用户名,则再script中写入自己的函数名称{}
("#a1").val() //获取了id为a1的输入值,如果想进一步获取数据并展示到本地,可以直接var一个变量,然后反馈到本地,例如var usersname=("#a1").val()
当我们再次调用usersname的时候,便会返回输入的id为a1的input中的输入数值

分享

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】