JQuery 학습(3)

JQuery 학습(3)
JQuery 버전은 어떻게 보십니까?
jQuery 파일 이름을 통해 jQuery의 버전을 보는 것은 사실 믿을 수 없는 방법이다.다음 네 가지 방법으로 jQuery 버전을 볼 수 있습니다.(1)、console.log(jQuery.fn.jquery); (2)、console.log(jQuery.prototype.jquery); (3)、console.log( . f n . j q u e r y ) ; ( 4 ) 、 c o n s o l e . l o g ( .fn.jquery); (4)、console.log( .fn.jquery);(4)、console.log(.prototype.jquery).
다중 라이브러리 공존

//       jQuery  ,          $    jQuery  .
console.log($.fn.jquery);

var _$300 = $.noConflict(); //3.0.0   jQuery $        

  var _$1124 = $.noConflict(); //1.12.4   jQuery $        

  console.log($);
  console.log(_$1124.fn.jquery);
  console.log(_$300.fn.jquery);

플러그 인
플러그인은 확장 기능을 위한 것입니다. jQuery 플러그인 라이브러리: jq22.com
색상 플러그인:https://cdn.bootcss.com/jquery-color/2.1.2/jquery.color.js
UI 플러그인:plugin/jquery-ui.js
테이블 플러그인: jQuery-table.js
tab 막대 플러그인:jQuery-tabs.js
플러그인 패키지
4

jQuery의 원형에 추가하는 방법

$('div').width(100).height(100).bgColor('red');
$('div').bgColor('green').width(100).height(100);

2 .jQuery에 직접 방법을 추가합니다.

console.log($.add(10, 20));

플러그인 사용 – 도시 간 연계

<script src="jquery-1.12.4.js"></script>
<script src="plugin/distpicker.data.js"></script>
<script src="plugin/distpicker.js"></script>
<script>
  $(function () {
    //    
    //1.  jQuery  .
    //2.      .
    //3.      .
    $('#one').distpicker({
      province: "   ",
      city: "   ",
      district: "   "
    });
  });

5 성 평가 사례
필요1: 마우스를 리 탭에 옮기면 현재 리 탭과 이전 리 탭은 속이 찬 오각심을 표시하고 뒤에 있는 리 탭은 속이 빈 오각심을 표시합니다

 $('.comment>li').on('mouseenter', function () {
       //       li       li        .
       $(this).text(sx_wjx).prevAll().text(sx_wjx);
       //       li     li        .
       $(this).nextAll().text(kx_wjx);

필요2: 마우스가 li를 떠나면 모든 리가 비어 있습니다

$('.comment>li').text(kx_wjx);
       //         li.  $('.comment>li[clickCurrent]').text(sx_wjx).prevAll().text(sx_wjx);
     }).on('click', function () {

수요3: 리클릭, 마우스가 떠나면 방금 클릭한 리와 이전의 리는 모두 실심 오각심으로 변하고 뒤에는 공심 오각심으로 변한다.

$(this).attr('clickCurrent','current').siblings().removeAttr('clickCurrent');
     });

반복 표시

 $(function () {
    //  :     li  ,       ,       1.

    //1.     li  .
    var $lis = $('#ulList').children();
    //console.log($lis);

    //2. $lis      li       .
    //$lis.css('opacity',0.5);//        ,          li           0.5,     .

    //               
    //  ：  jQuery    ，              
    $lis.each(function (index,element) {
      // console.log(index); //   li     
      // console.log(element);//   li  ,   dom  .
      $(element).css('opacity',(index+1)/10);
    });

  });