jquery

Posted 2021-03-21 yelan5222

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()    添加兄弟元素(之前)