Jquery基础知识点梳理
2024-09-24 13:59:51
1、第一个jq程序
a、jq对象和dom对象的方法不能混用
b、dom对象转换成jq对象$(dom),jq对象转换成dom对象jq[0],转换之后方法就可以使用了
2、jq选择器
基本选择器
$('body') //标签选择器 $('#btn') //id选择器 $('.class') //类选择器 $('p:odd') //奇偶行选择器
$('p:even')
$('p:first') //页面中的第一个p
$('p:last')
$('p:first-child') //p的父元素的第一个子元素p
$('p:first-last')
$('p:nth-child(1)') //p的父元素的第一个子元素p
$('p:nth-of-type(2)') //p元素是其父元素的第2个p元素
$('p:nth-last-of-type(2)') //倒序
额外选择器
$('div:has(a)') //里面包含a标签的div
$('a[title]') //属性选择器有title属性的a
$('a[href^=www]') //以www开头的href值的a
$('a[href$=pdf]') //以pdf结束的href值的a
$('a[href="www.jfidg"]') //href值为www.jfidg的a
$('a[href*=www]') //href属性值里包含www的a
$('input[type=button]')
$(':button') //获取所有的按钮
$(':disabled') //所有被禁用的元素
3、jq基本方法
$('div').eq(2) //第二个div
$('div:eq(2)') //eq也可以写在里面
$('div:gt(2)') //第二个div后面的一个div(此方法只能写在里面)
$('div').eq(2).siblings() //获取第二个div的兄弟元素
$('span').not(':eq(2)') //不包括第二个的span
$('input').not(':button')
$('span').filter(':eq(2)') //刷选出第二个
$(".d1").parent() //找到类为d1的一级父元素
$(".d1").parents() //找到类为d1的所有的祖先父元素
$(".d1").children() //找到子元素
$(".d1").prev() //同一级的上一个
$(".d1").prevAll() //同一级的所有的
$(".d1").next() //下一个
$(".d1").nextAll()
4、jq链
$("div").find("p").addClass("c2").addClass("c1")
$("div").find("p").addClass("c2").end().addClass("c1") //end是当前结果级的上一个结果,此处是div
$("div").find("p").addClass("c2").endSelf().addClass("c1") //endSelf表示给当前结果和当前结果的上级都加
5、jq额外方法
$("div").attr("title") //获取属性值
$("div").attr("title","aaaa") //设置属性值
$("div").attr({"title":"aaaa","id":"d3"}) //设置多个属性值
$("#d4").html() //获取所有,加上参数也可以设置内容
$("#d4").text() //获取文本
$("#d2").hasClass("c1") //判断是否含有c1类
$("#d1").is("p") //判断是否是p元素
$("div").addClass("d1").filter(function (index) {
return index==1 || $(this).attr("id")=="d3" //index索引
}).addClass("c2"); $("div").append("<p>你好</p>") //追加内容
$("<p>你好</p>").appendTo('#d1') //加到某个元素中
$("<p>你好</p>").insertBefore('#d1') //插入到d1前面
$("<p>你好</p>").insertAfter('#d1') //插入到d1后面
$("div").mousemove(function () {
//鼠标移入
})
$("div").mousedown(function () {
//鼠标移出
})
$("div").hover(function () {
//移入事件
},function () {
//移出事件
})
$('div').size() //获取div的数量
$('div').css('color','red') //添加样式,设置的是行内样式,权重比较高
$('div').css({'color':'red','font-size':'14px'})
$('div').addClass('className') //添加类名,一般用于样式修改
$('div').removeClass('className') //一次类名
$('div').find('p') //查询元素
最新文章
- JavaScript禁用回退
- Perl语言
- 对比poj3050
- ASP.NET MVC下判断用户登录和授权的方法
- javascript异步延时载入及推断是否已载入js/css文件
- MVC 模型js远程校验的使用方法
- iOS开发之隐藏tabbar--解决隐藏后依然不能响应对应位置事件的问题
- LeetCode 122. Best Time to Buy and Sell Stock II (买卖股票的最好时机之二)
- javascript中正则表达式和ruby中的一点差异
- python 2.7 数据结构: 基础面试总结
- Mac OS 安装robotframework
- ASP.NET 文件操作类
- jpush在有网的情况下6002
- Oracle EBS OPM 发放生产批
- thinkphp5学习总结!
- android中使用toolbar
- 微软BI 之SSRS 系列 - 不显示 Pie Chart 饼图上 0% 的数据
- unity抗锯齿(Antialiasing)
- windows7 服务中上找不到mysql
- NBUT 1218 You are my brother