JQuery【记录】

JQuery

核心函数的作用

• $(function(){...}) 与 window.onload = function(){}作用相似
• $(#key)找到id为key的DOM标签
• $(DOM对象)将DOM对象包装为JQuery对象并返回

操作文本

• text()
• heml()
• val()

一大堆选择器...

• append()
• appendTo()
• prepend()
• prependTo()
• after()
• before()
• empty():掏空
• remove():删除
• replaceWith()

实例

$(function(){

    showAndHide();//dropDown显示
    dropDown();//dropDown数据获取
})

function showAndHide(){
    $('.dropDown').hover(function(){//!!!!!!!!!!! hover()
        $('.dropDown').show();
    },function(){
        $('.dropDown').hide();
    });
}

function dropDown(){
    //title个数
    let titleNum = 0;
    let index = -1;
    let last = -1;//用于判断是否第一次进入

    //dropDown
    $('.nav_title').mouseenter(function(){
        $('.dropDown').show();

        index = $(this).index();//!!!!!!!!!!! 判断为第几个li标签，下标
        let name = $(this).text();
        let attr = $(this).children().attr('href');//!!!!!!!!!!! this的时候用children()选DOM 
                                                   //!!!!!!!!!!! attr('href')找出属性href的值

        if(index !== last){
            //获取数据
            let arr = $('.title'+index+'').text().split(',');//!!!!!!!!!!!split() String转数组
            let length = arr.length;
            let arrLink = $('.link'+index+'').text().split(',');

            //先删除
            $('.dropDownItem1').empty();//!!!!!!!!!!! empty()
            $('.appendMe').empty();

            //后添加
            let str = '<a href="'+attr+'">'+name+'</a>';
            $('.dropDownItem1').append(str);

            for(let i=0; i<length; i++){
                let strLink = '<li><a href="'+arrLink[i]+'.html">'+arr[i]+'</a></li>';
                $('.appendMe').append(strLink);//!!!!!!!!!!! append()
            }
            last = index;//判断是否第一次进
        }
    });
}

  $(".inital,.popular-searches").removeClass("none-display");
  $(".sly1-haveresults").addClass("none-display");

• next()
• prev()
• siblings():兄弟

js的this，需要去弄清楚！