0029 Jquery 简介和选择器

目录

1、 jquer的简介

image-20230411142019349

国内的地址 https://www.bootcdn.cn

jQuery是js的一个库，极大的简化了js代码的编写，

也同时也是有两种引用的方式，本地引用和远程引用

编写的js代码，使用link 引用到html 文件中
image-20230411142904102
基本语法
$().方法

（） 查找标签
 .方法  调用方法，操作标签

2、选择器

在js获取的标签对象，能够操作标签的属性和样式，js的不同的标签选择器获取到的对象，一个是集合，一个对象本身，

jquery()实例化成对象，参数是cs查找标签的语法
获取到的返回值就是dom对象的集合，
jquery可以简写成$('.c1'),这个对象所操作的样式，
都将加载到集合内所有的标签对象上，极大的简化了js代码量。


<body>
<ul>
    <li>123</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

<script>
    $('ul li').css('color','blue')
    // $('ul li') 获取到的是一个 jquery对象集合 ，转document对象 加索引
    // var ele = document.get...id('1') 
    // ele 这个document对象怎么转jquery对象，加$(ele) 把ele作为一个元素加入到集合内。
    
</script>
</body>
基本选择器

1.jquery的选择器和css选择器基本一致，基本选择器标签，class，id 通配选择器 与或非 选择器  *全局选择器。
<script>
    $(".c1").css('color','red')
    // class 选择

    $("#d1").css('color','red')
    // id 选择

    $("div").css('color','red')
    // 标签选择器

    $("*").css('color','red')
    // 通配选择

    $("p,.c1").css('color','red')
    或选择器

</script>
组合选择器
后代选择器

子代选择器，

兄弟选择器，

普通兄弟，多个标签的查找与或，属性选择器的属性值查找，子级标签的顺序，第一个标签，最后一个标签。

毗邻兄弟
属性选择器和表单选择器
[] 属性选择器 

属性选择器延伸的3种方式,^$* 开头结尾包含，
^= 以什么为开头
$= 以什么为结尾
*= 属性值包含什么
~= 指定class专用，指定class的一个属性




<input type="password">
<input type="text">
$(':text').css('1 px red')
// 属性选择器的缩写 ：text
jquery 筛选器
根据js的选择器都是对同类型的的属性值，
或者后代，子代等这种选择发出来的标签范围不够灵活，
jquery的筛选器，是对document对象集合再次进行筛选，
因为是集合可以灵活的运行索引值标记，第一个，最后一个，大于1的，小于3，等于4，索引是奇数的，偶数的，
还可以引入eq方法把js中的变量作为索引传入筛选器内。
posted @ 2023-03-13 17:54  mmszxc  阅读(27)  评论(0)    收藏  举报