jQuery介绍——新手必看

吉帅振的网络日志

于 2018-09-19 16:54:56 发布

阅读量369

点赞数

分类专栏： jQuery 文章标签： jQuery 新手必看选择器函数轮播图

本文链接：https://blog.csdn.net/qq_42451979/article/details/82774506

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、入口函数

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>