13jQuery对象、选择器

最新推荐文章于 2019-10-25 17:53:31 发布

AlbertLiangzt

最新推荐文章于 2019-10-25 17:53:31 发布

阅读量495

点赞数

分类专栏：学习笔记-Javaweb 文章标签： jquery javascript html

本文链接：https://blog.csdn.net/AlbertLiangzt/article/details/77197942

版权

学习笔记-Javaweb 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

jQuery概述

jQuery简介
使用jQuery

浏览器如何解析HTML文档

利用选择器定位节点

调用方法操作节点

jQuery的使用步骤
jQuery对象

什么是jQuery对象

jQuery对象与DOM对象的关系

DOM对象转换为jQuery对象

jQuery

是一个JavaScript框架，一个轻量级的JS库
封装了JS、CSS、DOM，提供了一致的、简洁的API
兼容CSS3，及各种浏览器
使用户的HTML页面保持代码和HTML内容分离
核心理念：write less， do more
本质：

DOM数组，在该数组上扩展了一些操作数组中元素的方法
使用步骤：
- 引入jQuery的js文件：
  
  <script src=“jquery-1.11.1.js”></script>
- 使用选择定位器定位要操作的节点
- 调用jQuery的方法进行操作

case:font bigger

功能实现：点击按钮，增大字体

<script src=“jquery-1.11.js”></script>

<!-- 自定义的js必须写在jQuery引入之后 -->

<script>
    function bigger() {
        //获取第1个p的字号
        var size = $( “p:eq(0)” ).css( “font-size” );
        //去掉单位px，便于增加字号
        size = size.replace( “px”, “” );
        //字号+1，再设置给所有的p
        $( “p” ).css( “font-size”, ++size+px );
    }
</script>
<body>
    <input type = “button” value=”+” onclick = “bigger();” />
    <p>jQuery是一个轻量级的js框架</p>
    <p>它提供了简洁的API，极大的简化了js编程</p>
</body>

jQuery对象

什么是jQuery对象:

jQuery为了解决浏览器的兼容问题而提供的一种统一封装后的对象描述
jQuery提供的方法都是针对jQuery对象特有的，而且大部分方法的返回值类型也是jQuery对象，所以方法可以连缀调用“jQuery对象.方法().方法().方法… …”
通过jQuery选择器选中的对象为jQuery对象：
如: $( “div” ) 和$ ( “#d1” )

jQuery对象与DOM对象的关系

jQuery对象本质上是一个DOM对象数组，它在数组上扩展了一些操作数组中元素的方法
可以直接操作这个数组：

obj.length：获取数组长度
obj.get(index)：获取数组中的某一个DOM对象
obj[index]：等价于obj.get(index)

DOM对象转化为jQuery对象

DOM对象可以直接转化为jQuery对象
$( DOM对象 )

case：

功能实现：获取jQuery对象，并输出对象中各元素的内容；单击图片时改变图片宽高

<script src=”jquery-1.11.1.js”></script>
<script>
    function prt() {
        var ps= $( “p” );
        console.log(ps);
        for(var i=0; i<ps.length; i++) {
            console.log(ps[i].innerHTML);
        }
    }

    function chg(img) {
        if( $(img).width() ==218 ) {       //原图218px
            //变大
            $(img).width(250).height(250);
        } else {
            //变小
            $(img).width(218).height(218);
        }
    }
</script>
<body>
    <input type=”button” value=”print” onclick=”prt(); ”/>
    <p>jQuery对象可以调用jQuery方法</p>
    <p>jQuery对象本质上是对DOM数组的封装</p>
    <div>
        <img src=”1.jpg” onclick=”chg(this);”/>
        <img src=”2.jpg” onclick=”chg(this);”/>
    </div>
</body>

jQuery选择器

什么是选择器
jQuery选择器类似于CSS选择（定位元素，施加样式），能够实现定位元素，施加行为
使用jQuery选择器能将内容与行为分离
选择器的种类
- 基本选择器
- 层次选择器
- 过滤选择器
  - 基本过滤选择器
  - 内容过滤选择器
  - 可见性过滤选择器
  - 属性过滤选择器
  - 状态过滤选择器
- 表单选择器

基本选择器

元素选择器：根据标签名定位元素

$( “标签名” )
类选择器：根据class属性定位元素

$( “.class属性名” )
id选择器：根据id属性定位元素

$( “#id” )
选择器组：定位一组选择器所对应的所有元素

$( “#id, .importent” )

层次选择器

在select1元素下，选中所有满足select2的后代元素

$( “select1 select” )
在select1元素下，选中所有满足select2的子元素

$( “select1 > select2” )
选中select1元素的，满足select2的下一个弟弟

$( “select1 + select2” )
选中select1元素的，满足select2的所有弟弟

$( “select1 ~ select2” )

过滤选择器

基本过滤选择器

根据元素的基本特征定位元素，常用于表格和列表

first	第一个元素	not(selector)	把selector排除在外
last	最后一个元素	eg(index)	下表等于index的元素
even	挑选偶数行	gt(index))	下标大于index的元素
odd	挑选奇数行	lt(index)	下标小于index的元素

$( “tr : first” )

内容过滤选择器

根据文本内容定位元素
- contains（text）匹配包含给定文本的元素
- empty 匹配所有不包含子元素或文本的空元素
可见性过滤选择器

根据可见性定位元素：
- hidden 匹配所有不可见元素，或type为hidden的元素
- visible 匹配所有的可见元素
属性过滤选择器
- [ attribute ] 匹配具有attribute属性的元素
- [ attribute = value ] 匹配属性等于value的元素
- [ attribute != value ] 匹配属性不等于value的元素
状态过滤选择器

根据状态定位元素

enabled 匹配可用的元素 checked 把匹配选中的checkbox
disabled 匹配不可用的元素 selected 匹配选中的option

表单选择器

text	匹配文本框	password	匹配密码框
radio	匹配单选框	checkbox	匹配多选框
submit	匹配提交按钮	reset	匹配重置按钮
button	匹配普通按钮	file	匹配文件框
hidden	匹配隐藏框

<script src=“jquery-1.11.1.js”></script>
<script>
    //页面加载后自动调用此匿名函数
    //等价于window.onload = function() {}
    $( function() {
        //1.基本选择器——和css一样
        //2.层次选择器——后代选择器和子类选择器同css
        console.log(“#gz+li”);
        //3.1.基本过滤(*)
        console.log($("li:first"));
        console.log($("li:lt(2)"));
        console.log($("li:odd"));
        console.log($("li:not(#gz)"));
        //3.2内容过滤
        console.log($(“li:contains(‘京’)”));
        //3.3可见性过滤
        console.log($(“li:hidden”));
        //3.4 属性过滤
        console.log($(“li[id]”));
        //3.5状态过滤
        console.log($(“input:disabled”));
        console.log($(“input:checked”));
        //4.表单选择
        console.log($(“:radio”));
    } );
</script>
<body>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li id=““gz>广州</li>
        <li>深圳</li>
        <li>南京</li>
        <li>天津</li>
        <li style=“display:none”>杭州</li>
    </ul>
    <!-- readonly：只读，但数据依旧可以提交服务器disabled：不可用，数据将无法提交到服务器 -->
    <p>
        <input type=“text” disabled/>
    </p>
    <p>
        <input type=“password”/>
    </p>
    <p>
        <input type=“radio” name=“gender” checked/> male
    </p>
    <p>
        <input type=“radio” name=“gender”/>female
    </p>
</body>

这里写图片描述