jQuery 前端框架
目录
1.下载jQuery
2.导入jQuery
1 <script src="jQuery3.3.1.js"> </script>
3.jQuery代码
jQuery是JS的一个库。所以使用jQuery代码时，代码的网站的网站与JS相同，放在body标签的最下方。
展示jQuery的第一个代码
$(“div”).css(“color”,”red”) 让所有的div标签全部变红。
4.DOM以jQuery的转换关系
$(“p”)[0] —->DOM对象
var j1 = document.getElementById(“i1”)
$(j1) —-> jQuery对象
5.选择器筛选器
基础选择器
1 $("div") 所有div标签
层级选择器
1 $(".class p") 2 $(".class>p") class下面的第一层P标签。 3 $(".class+p") class的兄弟标签。 4 $(".class~p") class的毗邻标签。
基础筛选器
1 $("li:first") li下面的第一个标签。 进阶 $("li").first() 2 $(li:eq(2)) li索引取值。 进阶 $(li).eq(2) 3 $(li:gt(2)) 大于索引。 进阶 4 $(li:gt(2)) 小于索引。 进阶 5 $("div:even") 索引偶数。 进阶 6 $("div:odd") 索引奇数。 进阶
属性选择器
1 $("[h=h1]").css("color","red") 找到自定义的h属性。
表单选择器
1 $(":text").css("border","1px solid red") 冒号只限表单选择器。
6.导航查找
1 $(".c1").next().css("color","red") .c1的下一个标签。 2 $(".c1").next().next().css("color","red") .c1的下一个标签的下一个标签。 3 $(".c1").nextAll().css("color","red") .c1下面的所有标签。 4 $(".c1").nextUntil(".c5").css("color","red") .c1到指定的标签。 5 $(".c5").prev().css("color","red") .c5的上一个标签。 6 $(".c5").prevAll().css("color","red") .c5上的所有标签。 7 $(".c5").prevUntil(".c1").css("color","red") .c5到指定的标签。 8 $(".c5").siblings().css("color","red") .c5的使用兄弟标签，除了自己。 9 $(".c1").parent().css("border","1px solid red") .c1的父标签。 10 $(".c1").parents().css("border","1px solid red") .c1到整个页面。很少用。 11 $(".c1").parentsUntil(".d1").css("border","1px solid red") .c1标签向上找父标签，直达.d1标签为止。 12 $(".d1").children().css("color","red") .d1下的所有子标签。 13 $(".d1").children():first().css("color","red") .d1下的第一个子标签。 14 $(".d1").children("p").css("color","red") .d1下面的P标签。 15 $(".d1").find("li").css("color","red") 让.d1标签下的所有li标签，多层。
7.文本控制
text与HTML的区别，HTML可以插入标签，text插入标签会当成文本操作。
1 $(".c1").html() 取值
2 $(".c1").html("haha") 赋值
3
4 $(".c1").text() 取值
5 $(".c1").text("haha") 赋值
8.属性操作
1 $(".c1").attr("class") 取值 2 $(".c1").attr("class") 赋值 3 $(".c1").removeAttr("i1") 删除 4 $(".c1").addClass("c2") 增加 5 $(".c1").removeClass("c2") 删除
9.事件绑定
1 $(".c1").click(function () { alert(this.innerHTML) })
10.事件委派
往一个标签内插入一个标签，想让插入的标签与已有标签功能一样，就使用事件委派。
1 $(".c").on("click",".c1",function () { 2 alert($(this).html()) 3 }); 4 5 $("[type=button]").click(function () { 6 $(".c").append("<div class=\'c1\'>777</div>") 7 })
11.循环
分别打印索引与值
1 $.each([111,222,333],function (i,j) { 2 console.log(i,j); 3 }) 4 5 退单次循环 6 return
12.bootstrap
下载地址：https://v3.bootcss.com/getting-started/#download
1 引用：<link rel="stylesheet" href="bootstrap-3.3.7/dist/css/bootstrap.css">
13.栅格栏
页面分为12块，一个col-md-1为一格。
1 <div class="col-md-1 time1"></div> 2 3 表格统一向右移 4 关键字：col-md-offset-2 5 <div class="row"> 6 <div class="col-md-offset-2"> 7 <div class="col-md-1 time1"></div> 8 ...内容... 9 <div class="col-md-1 time8"></div> 10 </div> 11 </div>
版权声明：本文为1640435254原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。