文章目录

  • jQuery介绍
  • jQuery的加载
  • jQuery选择器
  • 概述
  • 对选择集进行过滤
  • 对选择集转移
  • 判断是否选择到了元素


jQuery介绍

  1. jQuery是目前使用最广范的JavaScript函数库。据统计，全世界排名前100
    网的网站，右46%使用jQuery，远超过其他库微软公司甚至把jQuery作为他们的官方库。
  2. jQuery的版本分为1.x系列，2.x系列、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列， 3.x系列常用于移动端。

jQuery是一个函数库，一个js文件，页面script标签i引入这个js文件就可以使用。

<script type="text/javascript" src="/js/jquery-1.9.0.js"></script>

实际要下载两个jQuery.js文件，一个是原生版本，另一个是压缩版（常用于实际开发）。

jQuery的加载

  1. jQuery的写法：用的是ready方法。相当于window.onload = function(){};
    1).ready的完整写法：
//ready的完整写法，相当于window.onload = function(){};
        $(document).ready(function(){
            var $box = $('#box');
            alert('ok'+ $box);
        });

2). ready的简写：

//ready的简写；
        $(function(){
            var $box = $('#box');
            alert ('ok!' + $box);
        });

注：实际开发用简写

  1. ready的速度是快于window.onload的
    原因:window.onload是等标签加载完后，在渲染完之后才运行，ready是等标签加载完后就运行。
  2. jQuery引入容易出错的写法

不能在引入jQuery的script标签里书写js代码，要另起一个script标签来书写js代码。

jQuery选择器

概述

jQuery用法思想一：

选择某个网页元素，然后对他进行某种操作。

jQuery选择器：

jQuery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。

1. $(’#myId’) //选择id为myId的网页元素
2. $(’.myClass’) //选择class为myClass的元素
3. $(‘li’) //选择所有的li元素
4. $(’#ul1 li span’) //选择id为ul1的元素下的所有li元素下的span元素
5. $(‘input[name=‘first’]’) //选择name属性等于first的input元素
$(function(){
            var $ul = $('ul li');
            var $box = $('.box');
            //带'-'的属性名，可以使用驼峰式，也可以根css规则一样，带'-'
            $box.css({'background-color':'lightblue','fontSize':'20px'});
            $ul.css('color','red');//单个样式设置，可以用这种写法，也可以用字典
            // $ul.css({'color':'red'});
        })

注：
 带’-‘的属性名，可以使用驼峰式，也可以根css规则一样，带’-’
$ul.css('color','red');//单个样式设置，可以用这种写法，也可以用字典

对选择集进行过滤
1. $(‘div’).has(‘p’); //选择包含p元素的div元素
2. $(‘div’).not(’.myClass’); //选择class不是myClass的div元素
3. $(‘div’).filter(’.myClass’); //选择class是myClass的div元素
4. $(‘div’).eq(5); //选择第六个div元素
对选择集转移
1. $(‘div’).prev(); //选择div元素前面紧挨的同辈元素
2. $(‘div’).prevAll(); //选择div元素前面所有的同辈元素
3. $(‘div’).next(); //选择div后面紧挨的同辈元素
4. $(‘div’).nextAll(); //选择div元素后面所有的同辈元素
5. $(‘div’).parent(); //选择div元素的父元素
6. $(‘div’).children(); //选择div的所有子元素
7. $(‘div’).siblings(); //选择div的所有同级元素
8. $(‘div’).find(’.myClass’); //选择div内的class是myClass的元素

判断是否选择到了元素

jQuery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素，length等于0，就是没选择带元素，length大于0，就是选择到了元素。

//用length判断是否选择到了元素
            alert($box.length);