前端 ==> jquery
jquery
1.jquery 的 介绍
1.为什么用jquery？
答：短小，精悍，写起来简单，方便，开发效率高 兼容性好。
2.什么是jquery？
答： 类似python里面的模块
库/插件
3.如何使用jquery？
答： 1.导入 <script src="jquery-3.2.1.js"><script> ---- import re
2. jquery.xxxxxx ==> $() ----- re.xxxx
4.js 和 jquery 的关系。
答： 1.jquery 就是js 写的
2.js是基础 ， jquery 是工具
5.jquery 版本的介绍
答： 1.1.x 兼容IE8.
2. 3.x 最新
3. min.xx 压缩的 生产环境用。
2.筛选器
1. 写在引号里面
$("#i7>input:first")
2. 写在引号外面
$("#i7>input").first()
3.功能：
$(":first") 示例
1.first 第一个
2.not 除了
3.even 偶数
4.odd 奇数
5.eq 等于
6.gt 大于
7.lt 小于
8.header
9.animated
10.focus
11.contains
12.empty
13.has 包含
14.parent
$("#i8").parent() 找父亲
$("#i8:parent") 有子孙的标签
可见性：
hiddle:
4.属性
1. $("input[type='password']")
2.$("input[type!='password']")
3.$("input[type^='password']")
4.$("input[type='password']")
5.表单:
1.$(":input")
6.表单对象属性
1.$(":enabled")
2.$(":checked")
3.disable
4.selected
过滤
$("").first()
$("").parents()
$("").eq()
.hasClass
7.查找
1.$("#i7").children() ==== 示例
1.children
2.find
3.next/nextall/nextuntil
4.$("input[value='11']")
5.$("#i5").prev() 前面
6.$("#i5").prevuntil()
7.siblings()
8.css类
1.addClass(class|fn)
2.removeClass(Class|fn)
3.toggleClass(class|fn[sw])
id选择器
$("#i1")
$("#switch").on("click",function(){
$(".c11").toggleClass("c12");
})
1.属性
属性
attr
示例： $("").attr("")
removeAttr
以上是获取
例子： 图片的加载
prop 返回布尔值的类型用prop，返回字符串类型用attr。
示例： $(":checkbox").first().prop("checked",true)
removeProp
以上是checkbox
例子： 全选 反选 取消
循环：each
$.each(数组/对象,function(i,v){})
$("div").each(function(){})
伏笔：
登录校验的作业
小结： 一个参数获取值 ，两个参数时，是赋值
Css类
addClass
removeClsee
toggleClass 切换 有就去点 没有就加上
灯泡的例子
HTML 代码/文本/值
html
$("#id1").html("赋值")
text
加文本
.text("老师，")
val
input
获取的是输入的内容
checkout
获取的是value值
select
2.css
.css()
1.-- .css("color") ---> 获取color css 值
2.-- .css("color","#ff0000") ---> 设置值
3.-- .css({"color":"#cccccc","border":"1px solid #ff0000"}) --> 设置多个值
4.-- .css(["color","border"]) ---> 获取多个值
.offset
1.获取相对位置
2.比较的对象是html
.position
1.获取相对已经定位的父标签的位置
2.比较的是最近的那个做过定位的祖先标签
scrollTop([val])
---返回顶部
scrollLeft([val])
尺寸：
height: 元素的高度
- $("目标值").height()
width : 元素的宽度
- $("目标值").width()
innerHeight: 带padding的高度
- $("目标值").css("padding","20px")
- $("目标值").innerHeight()
outerHeight: 带border的高度
- $("目标值").css("border","2px solid #336699")
- $("目标值").outerHeight()
3.文档操作
1.内部插入
1.append -->往后加
2.appendTo -->
例子：
A.append(B) --> AB
A.appendTo(B) --> BA
3.prepend -->往前加
4.prependTO
A.prepend(B) --> BA
A.appendTo(B) --> AB
2.外部插入
1.after -->往后加
2.inserAfter
例子；
A.after(B) --> AB
A.insertAfter(B) --> BA
3.before -->往前加
4.insertBefore
A.before(B) --> BA
A.insertBefore(B) --> AB
3.包裹
1.wrap
A.wrap(B) --> B 包 A
-找到的每一个都单独的包裹起来。
2.unwrap
- 不要加参数
3.wrapALL
- 找个所有的一起包裹起来
4.wrapInner
- 找到目标得子标签，并包裹起来。
4.替换
1.replaceWith
A.replaceWith(B) --> B 替换A
2,replaceALL
A.replaceAll(B) -->A替换B
5.删除
1.empty()
--清空 内部清空
2.remove
移除、整体被删除
3.detach
剪切 多保存在变量中，方便再次使用
4.复制
clone
4.动画
1.基本
1.show
2.hide
3.toggle
2.滑动
1.slideDown
2.slideUp
3,slideToggle
3.淡入淡出
1.fadeIn
2,fadeOut
3.fadeTo
-淡出到0.66透明度
4.fadeToggle
-.fadeToggle(3000,function(){
alert()
});
4.自定义
animate
- css 属性值都可以设置
-女朋友变小
5.事件处理
1.之前绑定事件的方式
1. onclick="clickMe();" function clickMe(){}
2. ele.onclick = fun1 ; function.func1(){}
2. ele,onclick=function(){}
3.ele.addEventListener("click",function(){})
2.jquery绑定事件的方式
1. $(ele).on("click",function(){})
$(ele).click(function(){})
$(ele).focus(function(){})
2.$("tbody").delegate(".btn-warning","click",function(){})
-已经 用的很少了
3.$("tbody").on("click",".btn-warning",function(){}) 我们要用的事件委派
2.常用事件
1. blur
搜索框例子 移开返回
2.focus 获取焦点
搜索框例子 点击清除
3.change
自动补全
4.click
- 点击
5.dbclikck
- 双击
6.scroll
- 滚动
7.submit
- 提交
补充：
文档树加载完之后绑定事件（绝大部分情况下）
$(document).ready(function(){
// 绑定事件的代码
....
})
简写：
$(function($){
// 绑定事件的代码
....
});
3.jquery扩展
1.jquery 扩展
$.xxx()
$.extend({
"GDP" ：function(){
console.log("带帽子")
}
});
- 给 jquery 添加扩展
- $.GDP()
2.jquery 对象 扩展
$("").xxx()
$.fn.extend({
"BJG"：function({
console.log("英语八级")
})
})
- 给jquery对象添加扩展
- $(":jquery").BJG()
3.保存函数(func1)私有
(funcdtions(jq){
搞事情
$.fn.extend({
"BJG": function(){
func1();
console.log("英语八级就是好")
}
});
function func1() {
// 搞小事情
}
}) (jquery);
