jq基础

//1.0jQuery样式操作$(element).css()方法//$(element).css()方法：获取元素样式属性的计算值或者设置元素的css属性

    //1.1$(element).css()方法使用方法
    //1. $(element).css("属性名"）//获取匹配元素集合中的第一个元素的样式属性
   // 2  $(element).css(["属性名1","属性名2"]）//传递一个数组，返回一个对象
    // 3   $(element).css("属性","属性值"）//设置元素的css样式
    //  4    $(element).css({"属性1"："属性值1","属性2："属性值2"}）//可以传一个对象  同时设置多个样式
               //3.设置元素的css样式
            // $(this).css("backgroundColor", "green");
            $(".box").css("backgroundColor", "green");//同时设置


            //4.可以传一个对象  同时设置多个样式
            $(".box") .css ({ "color":"#fff", "fontSize":20, "textAlign": "center","width":"300px"
            })

            //5  可以传入一个回调函数， 返回取到对应的值进行处理
            $(this).css({
                height: function (index, value) {
                    console.log(index);//索引
                    console.log(value);//当前height的值


                    return parseFloat(value) * 1.5;
                }

            })

//width()方法获取的宽度是内容区的宽度
//height()方法获取的高度是内容区的高度
var width = $(".box").width()
var height = $(".box").height()

//获取第一个匹配元素内部区域高度（包括内边距。不包括边框）。
var innerwidth = $(".box").innerWidth();
var innerheight = $(".box").innerHeight();
console.log(innerheight);

//获取第一个匹配元素外部高度 （默认包括内边距和外边距）。
var innerwidth = $(".box").outerWidth();
var innerheight = $(".box").outerHeight();
console.log(innerheight);

//会获取集合中的第一个匹配的HTML元素
//HTML处理的是元素内容 text处理的是文本内容
var strhtml = $(“div”).html();
//添加时会把相同元素添加到设置的内容
$(“div”).html(“

通过jQuery中的html（）方法添加的p标签

”)
基础选择器
ID选择器
var box = $("#box");
console.log(box);

   //类选择器
   var wrap = $(".wrap")
   console.log(wrap);

   //元素选择器
   var divs = $("div");
   console.log(divs);


   //输出所有页面的元素

   var qb = $("*");
   console.log(qb);

层级选择器
$("bodydiv");//选择body中的所有div元素console.log($(“body div”));
$("body>div");//选择body中直接的子元素divconsole.log($(“body>div”));
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲box+div");//选择d…("#box + div"));
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲box~div");//选择d…("#box~ div"));

$(document).ready(function () {
$(“li:first”).css(“backgroundColor”,“red”)first 匹配第一个元素
$(“li:last”).css(“backgroundColor”, “red”)last 匹配最后一个元素
$(“li:even”).css(“backgroundColor”, “red”)even 匹配偶数元素
$(“li:eq(0)”).css(“backgroundColor”, “red”)eq()根据索引来匹配元素
})

var url = document.getElementById(“picture”).getAttribute(“src”);
console.log(url); //getAttribute获取元素的属性

document.getElementById(“picture”).setAttribute(“alt”,“这是通过JS代码动态改写的alt值”)
setAttribute修改alt属性

document.getElementById(“picture”).removeAttribute(“alt”);
removeAttribute移出属性

修改alt的属性
$("#picture").attr(“alt”, “这是通过JQ代码动态改写的alt值”);
移除属性alt属性
$("#picture").removeAttr(“alt”);

function addClassFun() {
$("#box").addClass(“bgGreen”);
$("#box").addClass(“bgGreen fontStyle”)//addClass给指定元素添加属性
}
function removeClassFun() {
$("#box").removeClass(“bgGreen fontStyle “)//removeClass移除指定元素里面的属性
}
function toggleClassFun() {
$(”#box”).toggleClass(“bgGreen fontStyle”);//toggleClass给指定元素添加或者删除 像一个开关一样
}
jQuery基本效果 show（）与hide（）
$(“button”).first().click(function () {
// $(".wrap").show();//显示
$(".wrap").show(‘slow’);//有效果的显示 slow： 延迟了1秒
})
$(“button”).eq(1).click(function () {
// $(".wrap").hide();//隐藏
$(".wrap").hide(1000,‘linear’);//有效果的隐藏 1000为一秒 linear:设置显示的效果
})
$(“button”).last().click(function () {
// $(".wrap").toggle();//显示或者隐藏 像一个开关一样
$(".wrap").toggle(2000, ‘linear’, function () {
alert(“动画已完成”)
})
})

div 向上滑动
function slideUpFun() {
$(".wrap").slideUp();
}

    div向下滑动
    function slideDownFun() {
        $(".wrap").slideDown();
    }

    div向下或者向上切换滑动
    function slideToggleFun() {
        $(".wrap").slideToggle();
    }

fadeOut淡出的效果
function fadeOutFun() {
$(".wrap").fadeOut();
}

    fadeIn淡入的效果
    function fadeInFun() {
        $(".wrap").fadeIn();
    }

    fadeToggle淡入或者淡出的效果切换
    function fadeToggleFun() {
        $(".wrap").fadeToggle(5000);  //5000设置效果的时间多久  5000为15秒
    }

    fadeToFun改变元素的透明度
    function fadeToFun() {
        $(".wrap").fadeTo(1000, 0.5); //fabeTo第二个参数是透明度的取值  0~1是透明度的取值
    }