开发者社区> JKXQJ> 正文

JQuery入门(1)

简介: 1、jQuery的优势: 轻量级。jQuery非常轻巧,最新的jQuery版本压缩后,大小保持在80k左右。 强大的选择器。jQuery允许使用从CSS1到CSS3几乎所有的选择器,以及jQuery自己的高级而复杂的选择器。甚至你可以编写属于自己的选择器。出色的DOM操作的封装;jQuery封装了大量常用的DOM操作,让你能轻松地完成各种原本非常复杂的操作。可靠的事件处理
+关注继续查看

1、jQuery的优势:
轻量级。jQuery非常轻巧,最新的jQuery版本压缩后,大小保持在80k左右。
强大的选择器。jQuery允许使用从CSS1到CSS3几乎所有的选择器,以及jQuery自己的高级而复杂的选择器。甚至你可以编写属于自己的选择器。出色的DOM操作的封装;jQuery封装了大量常用的DOM操作,让你能轻松地完成各种原本非常复杂的操作。可靠的事件处理机制; 完善的Ajax;jQuery将所有的Ajax操作封装到一个函数$.ajax()里,使得开发者处理Ajax的时候能够专心处理业务漏极而无需关系复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。 出色的浏览器兼容性等等。但是jQuery2.0及后续版本将不再支持IE6/7/8浏览器。

2、什么是选择器:
jQuery选择器是jQuery库中非常重要的部分之一。它支持网页开发者所熟知的CSS语法快速轻松地对页面进行设置。了解jQuery选择器是打开jQuery之门的钥匙。
典型的jQuery选择器句法形式:
$(selector).methodName();
selector是一个字符串表达式,由于识别DOM中的元素,然后使用jQuery提供的方法集合加以设置。
根据所获取页面中元素的不同,可以将jQuery选择器分为几类:
1)基本选择器
2)层次选择器
3)过滤选择器
- 简单过滤选择器
- 内容过滤选择器
- 可见性过滤选择器
- 属性过滤选择器
- 子元素过滤选择器
- 表单对象属性过滤选择器
4)表单选择器
3、基础选择器
基础选择器是jQuery中使用最频繁的选择器,它由元素id、class、多个选择符组成,通过基本选择器可以实现大多数页面元素的查找,如下表格:
选择器 功能 返回值
[#id] 根据给定的id匹配一个元素 单个元素
[element] 根据给定的元素名匹配所有元素 元素集合
[.class] 根据给定的类匹配元素 元素集合
[*] 匹配所有元素 元素集合
[selector1,selectorN] 将每一个选择器匹配到的元素合并后一起返回 元素集合
示例如下:
(1)描述
所有的元素标记全部显示,然后通过jQuery基础选择器隐藏相对应的页面标记。
(2)代码实现

    <script type="text/javascript">
        $(function(){ //id匹配元素
        $("#divOne").css("display","none");
    })
    $(function(){ //元素名匹配元素
            $("div span").css("display","none");
    })
    $(function(){ //类匹配元素
        $(".clsFrame .clsOne").css("display","none");
    })
    $(function(){ //匹配所有元素
        $("*").css("display","none");
    })
    $(function(){ //合并匹配元素
        $("#divOne,span").css("display","none");
    })
    </script>
    ...jQuery控制的代码
    <div class="clsFrame">
        <div id="divOne">ID</div>
    <div class="clsOne">CLASS</div>
    <span>SPAN</span>
    </div>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端面试常问cookie、session、localStrorage、sessionStrorage区别以及应用场景
以上文章讲述的是【线上系统打如何正确打日志】接下来我总结一下【前端面试常问sessionStrorage、localStrorage、cookie、session的区别以及应用场景】。
3 0
Vue3项目配置Mock模拟接口数据
Vue3项目配置Mock模拟接口数据
2 0
【技术创作101训练营】Web 前端发展历程
【技术创作101训练营】Web 前端发展历程
4 0
Vue 动态添加路由及生成菜单
Vue 动态添加路由及生成菜单
5 0
浅谈Vue2中provide和inject使用
浅谈Vue2中provide和inject使用
4 0
在Vue3中使用Provide / Inject
在Vue3中使用Provide / Inject
3 0
对比Vue2中Options API 和 Vue3中Composition API
对比Vue2中Options API 和 Vue3中Composition API
4 0
干货 | 2021 年如何一步一步的学习 Python
干货 | 2021 年如何一步一步的学习 Python
6 0
Vue项目中Axios的简单封装
Vue项目中Axios的简单封装
3 0
万字长文Python面试题,年后找工作就靠这了(二)
万字长文Python面试题,年后找工作就靠这了(二)
4 0
+关注
JKXQJ
好好学习,天天向上
362
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载