JQ（jQuery）基础入门

敲可爱的小cc
474 阅读1分钟

[toc] ##JQ(jquery)

  • zepto 就是一个缩减的JQ，一般用于移动端；
  • JQ就是一个封装好的方发库，提供了各种常用方法；
  • JQ获取的元素永远是一组、一个集合
  • JQ提供的方法，我们不用考虑兼容性问题；
  • 获取DOM元素 $("css选择器，上下文")
  • 获取JQ用$，代码如下：
 var $box = $('.box');
  var $box2 = $('ul .box');
  var $ul = $('.ul_box');
  var $box3 = jQuery('.box',$ul);
  var $box4 = jQuery('.box:last-child',$ul);//获取最后一个
  var $box5 = jQuery('.box:nth-child(2)',$ul);//获取第二个

  console.log($box,$box2,$box3)

##JQ节点获取元素

  • 样式代码：
<div id="app">
    <span>123</span>
    <a href="http://baidu.com">qqqq</a>
    <ul>
      <li> <span>6666</span><>
      <li> <a> href="http://qqqq">aaaa</a></li>
    </ul>
  </div>
  • 获取代码如下：
  • ** filter是JQ自带的方法，用于过滤;**
let $oDiv = $('#app');
 var $a = $oDiv.children('a');// 获取子代中的a标签
  console.log($a);
  var $a = $oDiv.find('a');// 获取后代中的a标签
  console.log($a);


  var $lis = $('ul li');// 从这些获取到的li中筛选出  有qqq属性的哪个元素
  var $li = $lis.filter('[qqq=123]');// 
  console.log($li);
console.log($li.prev());//上一个元素标签;
console.log($li.next());//下一个元素标签；
console.log($li.prevAll());//上边所有元素标签;
console.log($li.nextAll());//下边所有元素标签；
console.log($li.sib  lings());//除了自己以外的所有兄弟；
console.log($li.parent());//父标签

##JQ与原生对象的转化

  • JQ对象转成原生对象，通过索引的方式；
console.log($oDiv);
$oDiv[0].style.color = 'red';
  • 原生对象转化为JQ对象
    • **$(原生对象DOM),**用前面的符号包起来
$($oDiv[0]);

##替换、添加

 var str = `<h2>你好！cc</h2>`;
  $oDiv[0].innHtml = str;
  $oDiv.html(str);//相当于替换$oDiv的原有结构
  $oDiv.append(str)//把str对应的结构塞到$oDiv的末尾；

##文本框是否传参操作

  • vavl用于表单元素
  • $inp.val();不传参 就是获取input对应的内容；
  • $inp.val('666'); 传参就是设置input框的内容；
var $inp = $('input');
console.log($inp.val())
$inp.val('666');

##$().attr() 操作行内属性

  • 一个参数的时候，是获取对应的属性名的属性值
  • 两个参数的时候，是设置对应的属性
  • 若设置多个属性的时候，我们可以传递一个对象；
var $inp = $('input');
console.log($inp.attr('type'));//获取
console.log($inp.attr('class','ccc'));//设置
console.log($inp.attr({
a:111,
b:222,
c:333
}))//设置多个属性；
$inp.removeAttr('class');//移除对应的样式；

##JQ操作类名的方法

console.log($inp.hasClass('ccc'));//判断对应的元素有没有对应的类名 有就返回true；没有就返回false；
$inp.addClass('box box2 box2')//添加对应类名；
$inp.removeClass('box')//移除对应类名；
$inp.toggleClass('qqq')//若元素有这个类名，就把类名删除；若没有，就把这个类名加上；

##开关灯toggleClass方法

  • 样式：
  body {
        background-color: black;
        color: blanchedalmond;
    }

    .body_box {
        background-color: blanchedalmond;
        color: black;
    }
    //样式
    <body body_box>
    <button>点击</button>
  • JQ点击开关灯事件
$('button').on('click', function () {
$('body').toggleClass('body_box');
    });

##选项卡JQ插件方法

$.fn.extend({
    tab: function () {
      // console.log(this)
      let _this = this;// 因为事件对应的回调函数中的this不是当前这个函数中的this 所以用一个变量去存储this;
      $('li',_this).on('click', function () {
        $(this).addClass('active').siblings().removeClass('active');
        let n = $(this).index(); 
        $('div',_this).eq(n).addClass('active').siblings().removeClass('active');
      });
    }
  })

  $('#tabBox').tab();
  $('#tabBox2').tab();
  $('#tabBox3').tab();
avatar
文章
阅读
粉丝