jQuery初识及选择器

最新推荐文章于 2023-04-13 19:47:42 发布

yjx_43750162

最新推荐文章于 2023-04-13 19:47:42 发布

阅读量99

点赞数

本文链接：https://blog.csdn.net/weixin_43750162/article/details/97619018

版权

本文介绍了jQuery库的基本概念，包括其定义、开发环境搭建及入口函数使用方法。重点讲解了jQuery选择器的多种类型，如ID、类、标签、属性、后代、子代等选择器，并展示了如何通过这些选择器操作DOM元素。

摘要由CSDN通过智能技术生成

jQuery

1.定义：是前端js的一个库，是对js部分代码特效功能进行封装，同时优化代码
2. jQuery开发环境
第一种在官网下载相应的版本在页面中script标签引用
第二种使用cdn资源库中的链接地址前提连网(有网的情况 jquery文件才会引用)
3.入口函数

<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   //第一种方法
   $(document).ready(function(){
    alert("入口函数1");
   });
   //第二种方法
   jQuery(document).ready(function(){
    alert("入口函数2");
   })
   //第三种方法
   $(function(){
    alert("入口函数3");
   })
  </script>

jQuery选择器

<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(function(){
    //1.id选择器
    var div_01=$('#div_01');
    div_01.css({
     width:'200px',
     height:'200px',
     background:'green'
    });
    //2.类选择器
    var div_02=$('.div_02');
    div_02.css({
     width:'200px',
     height:'200px',
     background:'red'
    });
    //3.标签选择器
    var h1=$('h1');
    h1.css('color','red');
    //4.属性选择器
    var input=$('input[type=text]');
    input.css('background','yellow');
    //5.后代选择器
    var li_01=$('ul li');
    li_01.css('background','gold');
    //6.子代选择器
    var span=$('.div_02>span');
    span.css('color','hotpink');
    //first():第一个元素
    var li_02=$('ul>li:first');
    li_02.css('color','teal');
    //odd:偶数行
    var od=$('.div_02>span:odd');
    od.css('background','aquamarine');
    //even:奇数行
    var ev=$('ul>li:even');
    ev.css('background','darkblue');
    //eq:通过索引来选定元素
    var e=$('body div:eq(1)');
    e.css({
     width:'120px',
     height:'120px',
     border:'1px solid blue'
    });
    //has:包含li标签的ul元素
    var li_03=$('ul').has('a');
    li_03.css({
     background:'pink',
     color:'purple'
    });
    //not:去除该元素之外的其他元素
    var div_03=$('body div').not('.div_02');
    div_03.css({
     width:'200px',
     height:'300px',
     border:'1px solid black'
    });
    //filter:选择该元素
    var li_03=$('ul li:first');
    li_03.css('background','green');
    //prev:选择某一元素前面的第一个某元素
    var span_01=$('h5').prev('span');
    span_01.css('background','sandybrown');
    //prevall:选择某一元素前面的所有同级元素
    var a_02=$('a').prevAll('li');
    a_02.css('background','darkorchid');
    //next:选择某一元素后面的第一个某元素
    var h2=$('h5').next('h1');
    h2.css('background','tomato');
    //parent:许纳泽某一结点的父元素
    var div_04=$('div').parent('body');
    div_04.css('background','navy');
    //children:选择某一元素的所有的子元素
    var li_04=$('li').children();
    li_04.css('color','magenta');
    //siblings:选择某一元素的同级元素
    var h3=$('h3').siblings();
    h3.css('color','darkgray');
   })
  </script>