jQuery小结

show()显示 hide()隐藏
入口
$(function(){})
互相转化
//jQuery对象转为js对象
var $li = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲li"); …li);
$li[0].style.color = “pink”;

        //js对象转为jQuery对象
         var li = document.getElementById("li");
          $(li).text("哈哈");//给钱就行
选择器

// 在jq里设置样式 jq对象.css(“样式名”,"“样式值)
//标签
$(“li”).css(“backgroundColor”,“pink”);
//交集
$(“li.four”).css(“backgroundColor”,“red”);
//类选择器
$(”.seven").css(“backgroundColor”,“green”);
//后代选择器
$(“ul p”).css(“color”,“yellow”);
//子集选择器
$(“div>p”).css(“color”,“purple”);
//并集选择器
$(".four,.seven").css(“fontSize”,“25px”);
//下标为偶数
$(“li:even”).css(“background”,“red”);
//下标为奇数
$(“li:odd”).css(“background”,“cyan”);
//下标为1的元素
//写法一
$(“li:eq(1)”).css(“fontSize”,“30px”);
//写法二
$(“li”).eq(2).css(“fontSize”,“20px”);
//li元素的第一个
$(“li:first”).css(“color”,“pink”);
//li元素的最后一个
$(“li:last”).css(“color”,“pink”);

    //mouseenter 鼠标移入
    //mouseleave 鼠标移出

    //mouseover  鼠标经过
    //mouseout   鼠标移过
   //当前对象.index();


class操作
//获取某个样式
        console.log($("li").css("fontSize"));
        //跟隐式迭代有关系:获取时只会获取li对应的值 :获取第一个对应的值

       //添加类
        $("li").addClass("aa");//添加类
        $("li").addClass("bb");
        //移除类$
        $("li").removeClass("bb");
        $("li").hasClass("aa");//移除类 返回值是布尔值

.属性操作
//设置单个属性
$(“img”).attr(“alt”,“美女吗?”);
//设置多个属性
$("img").attr("title":"京剧","alt":"真的是美女")//获取属性console.log($(“img”).attr((“alt”)));
//关于布尔类型的属性不要用attr方法,用prop方法,用法和attr一样的

动画
//show([speed],[callback]) []–>可选参数
//speed : 动画的持续时间 , 可以是毫秒,也可以是固定字符串 :
//fast:200ms normal : 300ms slow:600ms
//callback : 回调函数 ,动画完成后执行

// 淡入 :fadeIn 淡出 : fadeOut 切换 : fadeToggle
$(“button”).eq(0).click(function () {
//fadeIn ([speed],[callback]) []–>可选参数
//speed : 动画的持续时间 , 可以是毫秒,也可以是固定字符串 :
//fast:200ms normal : 300ms slow:600ms
//callback : 回调函数 ,动画完成后执行

// 滑入 :slideDown 滑出 : slideUp 切换 : slideToggle
$(“button”).eq(0).click(function () {
//slideDown ([speed],[callback]) []–>可选参数
//speed : 动画的持续时间 , 可以是毫秒,也可以是固定字符串 :
//fast:200ms normal : 300ms slow:600ms
//callback : 回调函数 ,动画完成后执行
//stop : 停止当前正在执行的动画

//语法 : jQuery对象.animate(style,[speed],[动画的执行效果],[callback])
// ①:必选 , 传需要动画的样式 ,传对象 只生效数值变化
// ②:持续时间
// ③:动画的执行效果 swing :秋千 linear:匀速
// ④:回调函数
// play()播放 -->js方法

动态创建节点
// append() 添加到父节点的末尾
// appendTo() 把子节点添加到父节点的末尾
//$(“body”).append(‘百度一下’)
// $(“a”).appendTo("#box")

//把子元素添加到父节点里面的前面 prepend()
// 在到父节点里面添加一个子节点到最前面prependTo()
   $("#box").prependTo($("span"))
//添加兄弟节点  after() 兄弟之后  before() 兄弟之前;

// $("a").after($(“span”))
// $("a").before($(“span”))