一、入口函数
1.JS入口函数
window.onload=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.onclick=function(){
if(num==3){
ul.style.left="0px";
num=1;
header=0;
target=0;
}
target=num*-960;
num++;
}
next.onclick=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>
---------------------
【转载，仅作分享，侵删】
作者：Ryan Ji
原文：https://blog.csdn.net/qq_42451979/article/details/82774506
版权声明：本文为博主原创文章，转载请附上博文链接！
|
|
收藏
淘帖
踩
奈斯，感谢分享！
