前端-JQuery基础

JQuery找元素标签与转换

JS:
	document.querySelector('')
	document.querySelectorAll('') 返回所有，返回的数组
jquery:
	$('选择器'):返回值是个伪数组，数组元素是DOM对象/JS对象
jquery 对象如何转JS对象
    因为$('')返回的是一个数组 1,$('')[index]; 2,$('').get(index)
JS对象如何转为jQuery对象
	$(js对象)

<div id="d1">容器1</div>
<div id="d2">容器2</div>
<div id="d3">容器3</div>
<script src="./js/jquery-3.2.1.min.js"></script>
<script>
    $(function () {
        //1，
        let div2 = $('#d2');
        let div2Element = div2[0];
        let div22 = div2.get(0);
        console.log(div2Element);
        console.log(div2Element.innerText);

        console.log($(div2Element).text());
    })
</script>

JQuery过滤元素

过滤 
对选择器选中之后的结果进行过滤,返回的是jQuery对象
选择器:first  选择器的第一个结果
选择器:last
选择器:odd  索引为奇数的返回
选择器:even 索引为偶数的返回
选择器:eq(索引) 指定索引的返回
last()
first()

<div id="d1" class="c1">容器1</div>
<div id="d2" class="c1">容器2</div>
<div id="d3" class="c1">容器3</div>
<div id="d4" class="c1">容器4</div>
<script src="./js/jquery-3.2.1.min.js"></script>

<script>
    let list = $('.c1:first');
    let last = $('.c1:last');
    let listOdd = $('.c1:odd');
    let listEven = $('.c1:even');
    let equal = $('.c1:eq(2)');
    let first = $('.c1').first();
    let end = $('.c1').last();
    console.log(list);
    console.log(last);
    console.log(listOdd);
    console.log(listEven);
    console.log(equal);
</script>

JQuery查找元素查找

查找元素,返回JQuery对象
input:password
input:text
input:radio
input:file

JQuery操作标签属性

JS
    对象操作属性
    getAttribute('属性名') /setAttribute('属性名','')
    dataset 对象 只能操作自定义的 ；
jquery
    1.attr() 操作自带的和自定义的属性
      attr('属性名') 取值
      attr(key,value) 设置值，如果属性名存在就是替换否则就是新增
      removeAttr(key )删除一个属性
    2.prop()操作自带的和自定义的属性
      prop('属性名') 取值
      prop(key,value) 设置值，如果属性名存在就是替换否则就是新增
      removeProp(key)删除一个属性
attr优先使用，disabled checked selected 拿不到的时候再使用prop

JQuery事件

JS
    addEventListener('click', function ()
jquery
    1，$('#btn1').on('click', function () {
            console.log('clicked')
        })// on('事件名’，事件处理函数)
        off用来移除事件
    2,$().click（function(){}）

JQuery样式操作

<body>
<!--
JS
    style
    className
jQuery
    1.样式的操作
    css(属性名，属性值)
    2.class的操作
    hasClass是否有指定的class
    removeClass 移除class
    toggleClass切换 本来有的删除 本来没有的加上
    addClass 新增一个class
 -->
<div id="d1">容器</div>
<script src="./js/jquery-3.2.1.min.js"></script>
<script>
    let div1 = $('#d1');
    div1.css('color', 'red');
    // 中划线- 变成驼峰标志
    div1.css('lineHeight', 2);
    // 是否有指定的class
    if (div1.hasClass('c1')) {
        console.log();
    } else {
        console.log('不包含');
    }
    // 添加class
    // div1.addClass('c1');
    setInterval(function () {
        div1.toggleClass('c1');
    }, 1000);
    //切换class

    // 删除class
    // div1.removeClass('c1');
</script>
</body>

JQuery操作标签内容

JS
    innerText
    innerHtml 对HTML标签敏感 =
    value 取的是input输入值 select的选项值
jQuery
    text()：给参数就是赋值 不给参数就是取值
    html('')：给参数就是赋值 不给参数就是取值 对HTML标签敏感 =
    val() 取的是input输入值 select的选项值

JQuery节点查找

JS
    childNode 父找子
    parentNode 子找父
    previousElementSibling找哥哥
    nextElementSibling 找弟弟
jquery
    children()找孩子
    parent()找父亲
    prev()找哥哥 
    next()找弟弟
    nextAll()找所有的弟弟
    prevAll()找所有的哥哥
    siblings()找兄弟姐妹

JQuery节点增删改

JS
   A.appendChild(B) 把B添加到A中，A闭合之前
   A.insertBefore(B,C),把B添加到A中,把B插入到C之前
   A.replaceChild(B,C),把B添加到A中,B替换C
   A.removeChild(B) 把A中的B删除
   A.remove():自杀

jQuery
   A.append(B)把B添加到A中，A闭合之前
   B.appendTo(A) 把B添加到A中，A闭合之前
   A.prepend(B)把B添加到A中,作为第一个孩子
   B.prependTo(A) 把B添加到A中,作为第一个孩子
   A.after(B) 把B作为弟弟在A之后
   A.before(B) 把B作为哥哥在A之前
   A.empty() 把A中的内容清空
   A.remove()自杀行为，标签清除

新增节点
    fa.append($('<a>').attr('href','#').text('点击')); // 对象
    fa.append('<a href="" ></a>'); //字符串

JQuery操作数组

<body>
<!--
    数组和对象的遍历
 -->
<script src="js/jquery-3.2.1.min.js"></script>
<script>
    let arr = [10, 203, 40, 50];
    let stu = {
        name: 'anne',
        age: 13,
        gender: 'f'
    }

    $.each(arr, function (i, n) {
        console.log(i + ' : ' + n);
    });

    $.each(stu, function (i, n) {
        console.log(i + ' : ' + n);
    })
</script>
</body>