day04.29jQuery框架

JQuery框架

什么是JQuery：

JQuery是一个简洁高效的且功能丰富的JavaScript工具库，是对原生JavaScript二次分装的工具函数集合

优点：
开源，简洁的选择器，简化的Ajax操作，良好的浏览器兼容，强大的链式操作

JQ的下载使用

下载地址:https://jquery.com/
jQuery必须先导入才可以使用(html页面上得写导入语句>>>:容易忘)
jQuery本身就是一个js文件，里面写了一些js代码而已

导入方式：
1、本地jQuery文件
2、CDN加速服务

JQ选择器

// 获取满足条件的所有页面元素jq对象
$('css3选择器语法');

// 拿到指定索引的页面元素jq对象
$('css3选择器语法').eq(index);

// 拿到指定索引的页面元素js对象 (jq对象转js对象)
$('css3选择器语法').get(index);

// js对象转jq对象
$(js对象);

基本选择器：

$('#d1')  # id选择器  
$('.c1')  # class选择器  
$('p')  # 标签选择器
$('div#d1')
$('div,#d1,.c1')
$("x y")        // x的所有后代y（子子孙孙）
$("x > y")    // x的所有儿子y（儿子）
$("x + y")    // 找到所有紧挨在x后面的y
$("x ~ y")    // x之后所有的兄弟y

基本筛选器：

$('ul li:first')
$('ul li:last')
$('ul li:eq(2)')
$('ul li:odd')
$('ul li:even')
$('ul li:gt(2)')
$('ul li:lt(2)')
$('ul li:not(li)')
$('ul:has(#d1)')  # 查看内部含有id是d1的ul标签

属性选择器：

$('[name]')
$('[name="jason"]')
$('div[name="jason"]')

表单筛选器:专门针对form表单内的标签：

$('input[type="text"]')     筛选器简化    $(':text')

$(':checked') 会将option也找到
$(':selected')  只会找到option标签

筛选器方法：

# 同级别往下查找
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
# 同级别网上查找
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
# 查找父标签
$("#id").parent()
$("#id").parents() 
$("#id").parentsUntil() 
# 查找儿子和兄弟
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们(同级别上下所有标签)

eg：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq选择器</title>
    <style>
        body .box:first-child {}
    </style>
</head>
<body>
<div class="box">123</div>
<div class="box">456</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    // 使用jq => 该html页面有jq环境 => 引入jq => 依赖jq,所以jq要提前引入

    console.log(jQuery);
    console.log($);

    // jq选择器
    // $("css3选择器位")

    // 命名小规范, jq变量一般以$开头
    var $boxs = $('.box');
    console.log($boxs);

    // 拿到123

    // js与jq对象的相互转化

    // jq拿到文本
    console.log($boxs.text());

    // 只获取第一个box
    var $box = $('.box:nth-child(1)');
    console.log($box);
    console.log($box.text());

    console.log($box[0].innerText);

    // 总结: jq对象就是用数组包裹的js对象, 可以包裹0个到多个

    // jq转js => 使用js语法
    var box1 = $boxs[0];
    console.log(box1);
    var box2 = $boxs.get(1);
    console.log(box2);

    // js转jq => 使用jq语法
    var $box1 = $(box1);
    console.log($box1);
    
</script>
</html>