目录
- 引入jquery库
- 页面载入
- 寻找元素(选择器和筛选器)
- 循环遍历
- 属性操作(attr、prop、css、html)
- 文档处理(插入、替换、删除、复制)
- css操作(css、位置、大小)
- jquery事假绑定和事件委托
- 动画效果
- 扩展方法与插件
- ajax使用
引入jquery库
<script src="jquery-3.1.1.js"></script>
页面载入
在页面加载等html语句加载完了，在加载js代码
$(document).ready(function () {
#jquery语句
})
简写:
$(function () {
#jquery语句
})
寻找元素(选择器和筛选器)
基本选择器
$("*") $("#id") $(".class") $("element") $(".class p")
层级选择器
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
> : 按照子代(向内一层)选择
+ : 紧挨着向下寻找
~ : 不必紧挨着向下寻找
基本筛选器
$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)") $("li:lt(1)")
属性选择器
$('[id="div1"]') $('[chen="18"][id="div1"]')
表单选择器
$("[type='text']")----->$(":text") 注：只适用于input标签 (type可以用:表示)
筛选器
$("li").first() $("li").last() $(".outer").children("p") 找子代 $(".outer").find("p") 找后代
$("li").next() $("li").nextAll() $("li").eq(2).nextUntil("#end") 选择第二个到最后
$("li").prev() $("li").prevAll() $("li").eq(2).prevUntil("li:eq(0)") 选择第二个到第一个
$(".inner").parent() $(".inner").parents() $(".inner").parentsUntil()
$(".inner").siblings() 寻找上下紧挨的标签
form表单数据获取
//直接获取表单的所有数据 var data = $('#form').serialize()
循环遍历
方法一 arr=[11,22,33] $.each(arr,function (x, y) { #x是索引下标 #y是值 }) 方法二 $("p").each(function () { #遍历所有p标签 $(this) })
属性操作(attr、prop、css、html)
------------------------属性 $("").attr() $("").prop() $("").removeAttr() $("").removeProp() ------------------------css类 $("").addClass() $("").removeClass() ------------------------HTML代码/文本/值 $("").html() $("").text() $("").val() -------------------------css $("").css("color","red")
$("").attr() 可以获得属性值，两个参数添加属性，用来使用自定义的属性
注意:在遇到固有属性(本身标签自带的属性 如：input checked属性)就会遇到问题，在checked属性里，用attr获取会有checked和undefined两种状态，如果返回true和false会更加方便判断，因此以引入prop()方法
$("").prop() 用来使用标签本身固有的属性(判断 input checked属性返回的true和false两种状态，而不是checked和undefined)
文档处理(插入、替换、删除、复制)
内部插入 $("").append(content|fn) ----------->$("p").append("<p>hello</p>") $("").appendTo(content) ----------->$("p").append("div") $("").prepend(content) ----------->$("p").append("<p>hello</p>") $("").prependTo(content|fn) ----------->$("p").append("div") 外部插入 $("").after(content|fn) ---------->$("p").after("<p>hello</p>") $("").before(content|fn) ---------->$("p").before("<p>hello</p>") $("").insertAfter(content) ---------->$("p").insertAfter("#foo") $("").insertBefore(content) ---------->$("p").insertBefore("#foo") 替换 $("").replaceWith(content|fn) 删除 $("").empty() $("").remove() 复制 $("").clone()
css操作(css、位置、大小)
css $("").css("color","red") 位置 $("").offset(content) $("").position() $("").scrollTop() $("").scrollLeft() 大小 $("").height() 内容 $("").innerHeight() 内容+padding $("").outerHeight() 内容+padding+border $("").outerHeight(true) 内容+padding+border+margin $("").width() $("").innerWidth() $("").outerWidth() $("").outerWidth(true)
$("").position().top 相当于已定位父代的偏移量，如果父带没有定位，默认根据视口
$("").scrollTop() 监听滑轮与窗口的距离
window.onscroll(function () {
var cuerrent = $(window).scrollTop()
})
jquery事假绑定和事件委托
事件绑定
$("").click(function () { }) $("").bind("clink",function () { })
事件委托 : 标签绑定事件后，即使后面创建新的标签，也会绑定事件
//子标签的事件绑定委托给父标签来做 $("父标签").on("click","子标签",function () { })
动画效果
显示隐藏(参数设置时间)
$("").show() $("").hide() $("").toggle()
滑动(参数设置时间)
$("").slideDown() $("").slideUp() $("").slideToggle()
淡入淡出(参数设置时间)
$("").fadeIn() $("").fadeOut() $("").fadeToggle() $("").fadeTo(1000,04)
回调函数
$("").show(1000,function () { #这里是动画结束后调用的方法 })
扩展方法与插件
$.extend(objcet) #为JQuery添加一个静态方法 $.fn.extend(object) #为JQuery实例添加一个方法 // 静态方法 jQuery.extend({ min: function (a,b) {return a < b ? a : b }, max: function (a,b) {return a > b ? a : b }, }); console.log($.min(3,4)) // 实例方法 $.fn.extend({ "print" : function () { console.log($(this).html()) } }); $("").print();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>大图轮播</title> <script src="jquery-3.1.1.js"></script> <style> .outer{ 790px; height: 340px; margin: 80px auto; position: relative; } .img li{ position: absolute; list-style: none; top: 0; left: 0; } .num{ position: absolute; bottom: 15px; left: 280px; list-style: none; } .num li{ display: inline-block; 18px; height: 18px; border-radius: 50%; background-color: white; margin-left: 13px; } .btn{ position: absolute; top:0; 30px; height: 60px; background-color: #603cf0; color: white; text-align: center; line-height: 60px; font-size: 30px; opacity: 0.7; margin-top: 130px; display: none; cursor:pointer; } .right{ right: 0; } .left{ left: 0; } .num .active{ background-color: red; } .outer:hover .btn{ display: block; } </style> </head> <body> <div class="outer"> <ul class="img"> <li><a href=""><img src="img/1.jpg"></a> </li> <li><a href=""><img src="img/2.jpg"></a> </li> <li><a href=""><img src="img/3.jpg"></a> </li> <li><a href=""><img src="img/4.jpg"></a> </li> <li><a href=""><img src="img/5.jpg"></a> </li> <li><a href=""><img src="img/6.jpg"></a> </li> </ul> <ul class="num"> <!--<li class="active"></li>--> <!--<li></li>--> <!--<li></li>--> <!--<li></li>--> <!--<li></li>--> <!--<li></li>--> </ul> <div class="left btn"><</div> <div class="right btn">></div> </div> <script> //创建jquery自动创建按钮标签 var $img_num = $(".img li").length; for (var i=0;i<$img_num;i++){ $(".num").append("<li></li>") } $(".num li").eq(0).addClass("active") // 手动轮播 var i = 0; $(".num li").mouseover(function () { i = $(this).index(); $(this).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).fadeIn().siblings().fadeOut(); }) // 自动轮播 var c = setInterval(GO_R,1500); function GO_R() { if (i == $img_num-1) { i = -1; } i++; $(".num li").eq(i).addClass("active").siblings().removeClass("active") $(".img li").eq(i).fadeIn(1000).siblings().fadeOut(1000) } function GO_L() { if (i == 0) { i = $img_num; } i--; $(".num li").eq(i).addClass("active").siblings().removeClass("active") $(".img li").eq(i).fadeIn(1000).siblings().fadeOut(1000) } $(".outer").hover(function () { //停留的时候执行 clearInterval(c) },function () { //离开的时候执行 c=setInterval(GO_R,1500) }) // button 加定播 $(".right").bind("click",GO_R) $(".left").bind("click",GO_L) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select id="provinces"> <option value="">请选择省份</option> <!--<option value="">河北省</option>--> <!--<option value="">河南省</option>--> <!--<option value="">北京</option>--> </select> <select name="" id="citys"> <option value="">请选择城市</option> </select> <script> data={"河北省":["石家庄","廊坊"],"山西":["晋城","大同"],"陕西":["西安","延安"]}; var pro_ele=document.getElementById("provinces"); var city_ele=document.getElementById("citys") for(var i in data){ var ele=document.createElement("option"); ele.innerHTML=i; pro_ele.appendChild(ele) } pro_ele.onchange=function () { console.log(this.selectedIndex); console.log(this.options[this.selectedIndex]) var citys=data[this.options[this.selectedIndex].innerHTML]; city_ele.options.length=1; for(var i=0;i<citys.length;i++){ var ele=document.createElement("option"); ele.innerHTML=citys[i]; city_ele.appendChild(ele) } } </script> </body> </html>
ajax使用
使用ajax可以通过不刷新界面的情况下进行后台的数据交互，和页面的更新
$.ajax({ url:'', //url地址 type: 'GET', //传递的方式 data:{}, //发送的数据 success:function (arg) { //这里是返回的响应 } })
注：data的value包含数组的时候，要加上 traditional:true
Ajax试用项目仓库地址：https://gitee.com/addr_devon/ajaxtest-django
Ajax进阶及jsonp跨域请求：https://www.cnblogs.com/shuzhixia/p/11225319.html