jq

一 jq的引入方式:

1.本地文件引入

 <script src="path/jquery-v.js"></script>        // 引入本地路径的jq文件

2.CDN链接引入

 <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>

注意: jq的API只对自己开放 jq不能用js的API, js也不能用jq的API

二 jq的选择器

在JQ中使用选择器选择元素和在CSS中使用CSS选择器是一样的

 <div id="box">     <div class="wrap"></div> </div> <div class="text"></div> <ul class=‘list‘>     <li></li>     <li></li>     <li></li> </ul> ? <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script> <script>     var $box = $(‘#box‘);   //  获取id="box"的元素     let $wrap = $("#box .wrap"),         $ul = $(".list"),         $listAll = $(‘.list li‘);        // jq修改内容     $wrap.html(‘<h2>添加/修改文本</h2>‘);     // 会解析标签    [同js中 aBox.innerHTML=""]     $wrap.text(‘添加/修改文本‘);              // 不会解析标签          // jq ==> 变成你想要的哪一个jq   eq(index)   依然是一个jq对象     $listAll.eq(2).html(‘获取指定元素‘) </script> ? /* js ==> jq   $() oBox ==> $(oBox) ? jq ==> js   [index]     .get(index) */ ?

三 jq的基本使用

1. jq操作元素

 <ul class=‘list‘>     <li></li>     <li></li>     <li></li> </ul> <input type=‘text‘ name=‘username‘></input> <input type=‘password‘ name=‘password‘></input> ? <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script> <script>     let sUsername = $(‘input[name="username"]‘);    // 属性选择器 ; 获取元素      $("ul li").each(function(i){     // this.innerHTML = ‘js对象‘+i     $(this).html(‘我是第‘+i+‘个‘) });     // each方法如果传入一个函数，该函数的第一个参数代表每一个元素的下标         jq          js     html()      innerHTML     text()      innerText     val()       value      </script>

2. jq 方法操作属性

attr 设置/获取 标签属性

removeAtrr 移除标签属性

 var $box = $("#box");     $img = $(‘.captcha‘); ? $box.attr(‘id‘)         // 读操作  获取属性box $box.attr(‘class‘，‘wrap‘)   // 写操作  设置属性 ? $img.attr(‘src‘, ‘/image_code/‘) ? ? $box.removeAttr(‘class‘)    // 移除class属性

addClass 增加class名, 不会覆盖已有的class名

removeClass 移除class名

 $(‘ul li‘).eq(0).addClass(‘show box‘);      // 增加class=‘show box‘ $(‘ul li‘).eq(0).removeClass()              // 不传参移除所有class名 $(‘ul li‘).eq(0).removeClass(‘ box‘);       // 移除指定的class名

toggleClass 有就删除，没有加增加操作class类名。（取反）

 <ul class=‘list‘>     <li class=‘box‘ ></li>     <li></li>     <li></li> </ul> $(‘.list li‘).toggleClass(‘box‘)； // 第一个li标签的box会删除， 其余两个加box属性

empty 清空子节点

remove 移除自己

添加子元素 可以是标签 文本 js对象 jq对象

 append(<li>追加</li>) 添加子元素(之后) ? prepend()   添加子元素(之前) ? after() 添加兄弟元素(之后) ? before()    添加兄弟元素(之前)