jQuery介绍——新手必看

一、入口函数

1.JS入口函数
window.οnlοad=function(){
    //执行内容
}

2.jquery入口函数
$(documnet).ready(function(){
    //执行内容
});
或者
$(function(){
    //执行内容
});

二、原生js节点向jquery转换

var div=document.getElementById("box");
$("#box").get(0)与div相同

三、jquery-css基础选择器

<body>
    <div id="box" class="div1" style="width: 100px;height: 100px;background: red"></div>
    <script src="jquery.js"></script>
    <script>
        $("#box").css("background","green");
        $(".div1").css("background","skyblue");
    </script>
</body>

1.层次选择器

$("*").css("background","green");
$("ul li:first").css("background","pink");
$("li:even").css("background","blue");
$("li:odd").css("background","green");
//紧邻选择器,后面一个
$("li.demo+li").css("background","pink");
//相邻选择器,后面所有
$("li.demo~li").css("background","pink");

2.表单域选择器

$(":text").val("请输入你的名字");
$(":password").val("12345");
$("p:hidden").show(3000);
$(":disable")
$(":visiable")

3.伪类选择器

$("li:first").css("background","red");
$("li:last").css("background","blue");
$("li:even").css("background","skyblue");
$("li:odd").css("background","pink");
$("li:eq(1)").css("background","red");
$("li:not(:empty)").css("background","blue");

4.内容选择器

$("p:contains('足球小子')").css("color","red");
$("p:has('span')").css("color","blue");

5.属性选择器

$("input[type='text']").val("");
$("input[type*='t']").val("");
$("input[type^='t']").val("");
$("input[type~='text']").val("");
$("input[type!='text']").val("");

6.子元素过滤器

$("ul li:first")选取第一个<ul>元素的第一个<li>元素
$("li:first").css("background","red");
$("li:last").css("background","blue");

$("ul li:first-child")选取每个<ul>元素的第一个<li> 元素
$("li:first-child").css("background","red");
$("li:last-child").css("background","blue");

//ele:nth-of-type(n)是指父元素下第n个ele元素, 
ele:nth-child(n)是指父元素下第n个元素且这个元素为ele,若不是,则选择失败。
$("li:nth-child(2)").css("background","skyblue");
$("li:nth-of-type(2)").css("background","pink");

四、jQuery函数

//jquery的html函数中如果传参数就将html中的值修改为参数;如果不传参数那么就获取html中的值
$("#box").html("shide");
//text()获取dom节点中的文本
$("#box").text();
//attr()获取和设置属性
$("#box").attr("style","background:blue");
//removeAttr()删除属性
$("#box").removeAttr("style");
//获取元素的个数
$('div').size();

$('div').addClass();
$('div').removeClass();

1.操作样式

$("#btn").click(function(){
    $("#box").css("background","blue");
});
    
2.遍历dom节点

//parents()它的父元素和祖先元素
console.log($(".main").parents("div"));
//它的孩子
console.log($(".main").children());
//find()
console.log($(".main").find(".con").siblings());
console.log($(".main").find(".con1").prev());
console.log($(".main").find(".con").next());

3.标签页
<ul>
    <li data-index="0">首页</li>
    <li data-index="1">我的</li>
    <li data-index="2">设置</li>
    <div class="red" hidden>首页</div>
    <div class="red" hidden>我的</div>
    <div class="red" hidden>设置</div>
</ul>
<script src="jquery.js"></script>
<script>
    $("li").click(function(){
        $(this).attr("class","red").siblings("li").attr("class","strans");
        $($("div")[this.dataset.index]).show().siblings("div").hide();
    });
</script>

4.插入dom节点
<ul>
    <li class="0">首页</li>
    <li class="1">我的</li>
    <li class="2">设置</li>
    
</ul>
<script src="jquery.js"></script>
<script>
    $("li.1").insertBefore($("li.0"));
    $("li.0").insertBefore($("li.1"));
    $("li.0").append($("li.2"));
    $("li.2").appendTo($("li.0"));
</script>

5.删除元素
$("").remove();
$("").empty();

6.替换元素
$("").replaceAll($("目标元素"));
$("目标元素").replaceWith($(""));

<button>这是一个按钮</button>
<p>这是一段话</p>    
<script src="jquery.js"></script>
<script>
    // 生成DOM节点
    // $("<p>这是一段话</p>")
    // $("button").replaceWith("<p>这是一段话</p>");

    $("<p>这是一段话</p>").replaceAll($("button"));
</script>

7.克隆元素
$("a").click(function() {
    alert("弹出")
});

$("a").clone(true).appendTo($("body"));

8.js轮播图
<script>
    var prev=document.getElementsByClassName("prev")[0];
    var next=document.getElementsByClassName("next")[0];
    var ul=document.getElementsByTagName("ul")[0];
    var num=1;
    var header=0;
    var target=0;
    prev.οnclick=function(){
        if(num==3){
            ul.style.left="0px";
            num=1;
            header=0;
            target=0;
        }
        target=num*-960;
        num++;
    }
    next.οnclick=function(){
        if(num<=0) {
            return
        }
            num --;
            target = num*-960;
        
    }
    setInterval(function(){
        header=header+(target-header)/10;
        ul.style.left=header+"px";
    },20);
</script>


9.jquery轮播图
<script>
    var num=0;
    var step=-960; 
    $(".prev").click(function(){
        console.log(num);
        if(num==3){
            $("ul").css("left",0);
            num=0;
        }
        num++;
        $("ul").animate({
            left:num*step,
            easing:"swing"
        },1000);
        
    })
    $(".next").click(function(){
        if(num==0){
            return;
        }
        num--;
        $(".ul").animate(function(){
            left:num*step,
            easing:"swing"
        })
    },1000);
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值