jQuery引入和各种选择器

1>引子

    jQuery官网介绍：write less，do more

    jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发。

2>先看下引入jQuery

    

<!--可以引入百度的jQuery库-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<!--或者从官网下载jQuery库到本地，以文件路径方式-->
<script src="./jquery-3.3.1.min.js"></script>

//jquery是js的一个库文件，既然是库文件，那么就会抛出来一个构造函数或者对象

//$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕
//书写jquery的方式  入口函数
$(document).ready(function(){
   alert(111)
});

//等价
$(function(){
   alert(222);
});

补充一点之前，js脚本为什么要写在window.onload下面

所以， 以后写jQuery都写在 $(function(){XXXXXX})就行了，这就是入口函数，DOM结构绘制完毕后就执行。

3>再看下它是如何简化js开发的

    一个简单的例子，页面一个按钮btn 控制div展示，js写法如下

    

window.onload = function(){
    var btn1 = document.getElementsByTagName('button')[0];
    var div = document.getElementsByTagName('div');
    btn1.onclick = function(){
    for(i=0; i<div.length; i++){
        div[i].style.display = 'block';
        div[i].innerHTML = '展示了'
    }
    }
    };

如上，需要找到对应的btn和div DOM对象，再于btn对象上增加onclick方法，再写循环，改变div的属性等，相当繁琐。

引入jQuery之后，写法如下：

<script src="./jquery-3.3.1.min.js"></script>

$(function(){
   $('#btn').click(function(){
      $('div').css('display','block');
      $('div').html('div展示了')
   })
})

直接定位到相应的元素，增加事件函数或者增改样式属性。

4>jQuery的选择器，也就是定位元素的方法，其实跟css绝大相同

    4.1>id选择器，#ID值

    

    4.2>标签选择器，标签值，

//设置多个值 设置多个值得时候使用对象存储 key:value
 $('a').css({'color':'yellow','font-size':'24px'});

如上，当要设置多个样式时，用对象存储，key：value

    4.3>class选择器，.类值

$('.li3').css('background','green');

    4.4>通配符选择器

console.log($('*'));
//清空整个界面的dom元素
$('*').html('');

5>jQuery层级选择器

//1.后代选择器  div p
$('#box p').css('color','red');
         
//2.子代选择器  div > p
$('#box>p').css('color','yellow');
         
//3.毗邻选择器 匹配素所有紧接着选中元素的兄弟 +
$('#father+p').css('font-size','30px');
         
//4.兄弟选择器 ~
$('#father~p').css('background','blueviolet');
         
//5.获取第一个元素
$('li:first').css('font-size','50px');

//6.获取最后一个元素
$('li:last').css('font-size','50px');

//7.获取指定索引值的那一个元素
$('li:eq(3)').css('font-size','50px');

6>jQuery过滤选择器

$('li:odd').css('color','red');
         
//索引为奇数的元素
$('li:even').css('color','yellow');

//选中索引值为1的元素 *（通过索引定位，很常用）
$('li:eq(1)').css('font-size','100px');

//大于索引值1
$('li:gt(1)').css('font-size','50px');

//小于索引值1
$('li:lt(1)').css('font-size','12px');

7>jQuery属性选择器

// 标签名[属性名] 查找所有含有id属性的该标签名的元素
$('li[id]').css('color','red');

// 匹配所有class属性等于box的元素
$('li[class=box]').css('font-size','30px');
         
// [attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
// 这里是匹配所有不包含class属性 和 class属性不等于box的元素
$('li[class!=box]').css('font-size','50px');

// ^匹配给定的属性是以某些值开始的元素
$('input[name^=user]').css('background','gray');
         
// $匹配给定的属性是以某些值结尾的元素
$('input[name$=222]').css('background','greenyellow');

// *匹配给定的属性是包含某些值的元素
$('button[class*=btn]').css('background','red');

8>jQuery筛选选择器

//获取第n个元素 数值从0开始
$('span').eq(1).css('color','#FF0000');

//获取第一个元素 :first ，最后一个元素：last
$('span').first().css('color','greenyellow');
$('span').last().css('color','greenyellow');

//.parent() 选择父级元素
$('span').parent('.p1').css({"width":'30px',height:'40px',"background":'red'});

//.siblings()选择所有的兄弟元素
      $('.list').siblings('li').css('color','red');

      //.find() 查找所有的后代元素
      $('div').find('button').css('background','yellow');