Jquery-1(基础)-白红宇

Jquery-1(基础)

阅读量：5230 次

发布时间：2019-06-14

本文共 13848 字，大约阅读时间需要 46 分钟。

一、 jQuery 基础

1.安装jQuery

<script src="./dist/jquery-1.12.4.min.js"></script>

<script src="./dist/jquery-2.2.4.min.js"></script>

2.ready 事件(等待DOM就绪)

用法(写多个不会覆盖)

$(document).ready(function(){  })  //简写（function可写选择器 例："#box"）  $(function(){  })

与onload的区别

onload 事件等到页面的一切加载完毕，才能触发

ready事件等页面中所有的dom加载完毕，就能触发

3.jquery dom 和原生js dom（不一样）

通过$() 获取的对象，是jquery dom

jquery dom 本质上是由原生dom 组成的集合，通过取下标就可以获取原生dom

$()方法可以把原生dom 变为 jquery dom $(document)

4.jquery 中绑定事件

5.jquery连贯操作

二、jquery 选择器

1. 基本选择器

#ID

.className

tagName

* 通配符

selecter1,selecter2...

2.层级选择器

selecter seclter

selecter>selecter

selecter+selecter 仅后面一个兄弟元素

selecter~selecter 后面所有的兄弟元素

3. 过滤选择器

:first （先找：前面的集合，再过滤集合中的第一个）

:last

:eq(index) 指定某一个（按照顺序找，并不会区分子元素还是孙子元素）

:lt(index) 小于索引值index的元素

:gt(index) 大于索引值index的元素

指定某一个  $("#firstList li:eq(3)").css("border", "3px solid red");  $("#firstList li:lt(5)").css("border", "3px solid red");  $("#firstList li:gt(6)").css("border", "3px solid red");

:odd （数数从0开始）奇数
- 不需要像JS（数数从1开始）一样nth-of-type(odd);
- 直接用例：li:odd

:even 偶数

:not(selecter) 排除

:is(selector)判断是否（true/false）

:lang(zh) 任何元素都有该属性(类似CSS3)
- li:lang(en)匹配:<li lang="en-us/en">小丽丽</li>

:header 所有的标题标签(hn)

:root 根元素（最外面HTML元素）

:target 锚点

$(document).ready(function(){      /*由于时间问题 只写下面的一行没有效果*/      $("ul:target").css("border","10px solid green");  })

:animated 选择正在执行动画的元素（不是执行CSS3动画的元素）

:focus 选中获取焦点的元素

$("input").focus(function(){      /*只写下面的一行没有效果*/      $("input:focus").css("border", "1px solid red");  })

4.内容选择器

:contains(text) （先找：前面的集合，再过滤）

$("li:contains('翠翠')").css("border", "1px solid red");  /*选择内容包含翠翠的li*/

:empty

:parent

$("li:parent").css("border", "5px solid red");  /*选择的不是li的父元素，选择有子元素的或者有文本内容的li*/

:has(seelcter)（内容选择器）

$("li:has(.item)").css("border", "5px solid red");  /*选择包含子元素.item的li*/

5. 可见性选择器

:hidden

:visible 选择所有的元素

6.属性选择器

[attrName]

[attrName=value]

[attrName!=value]

[attrName^=value]

[attrName$=value]

[attrName*=value]

[attrSel1][attrSel2][attrSelN]

7. 子元素选择器

:first-child 所有兄弟里的第一个

:last-child

:nth-child(index)

:nth-last-child(index)

:only-child

:first-of-type

:last-of-type 从后往前数

:nth-of-type(index)

:nth-last-of-type(index)

:only-of-type

8.表单选择器

:input 所有的表单控件(input\select\textarea)
- 不是选择所有的input元素，还包括其他表单控件

:text 选择type等于text的

:radio 选择type等于radio的

:checkbox

:password

:image

:submit 选择type等于submit、button 的

:reset

:button 选择type等于button的

:file

9. 表单对象选择器

:disabled 不能用的控件

:enabled 所有能用的表单控件

:checked

:selected

三、筛选（JQ DOM的一些`方法`）

`返回值都是JQ DOM 一个方法调用完了之后可以接着调用另一个`

1.过滤（在：满足条件下，再查找）

.eq(index|-index)

.first() 取第一个

$("li").first().css("border", "5px solid red");

.last()

not(expr|ele|fn)

$("li").not(".item").css("border", "5px solid red");

filter(expr|obj|ele|fn) 选择满足条件的

$("li").filter(".item").css("border", "5px solid red");

is(expr|obj|ele|fn) true/false

has(selecter)

$("li").has(".item").css("border", "5px solid red");

slice(start,[end]) 从集合中截取一部分

$("li").slice(2,6).css("border", "5px solid red");  /*选择第2~6的元素（不包含6）*/

is(selecter) 返回值是 true/false

$("li").click(function(){       //alert($(this).is('.item'))        //alert($(this).is(':first-child'))        alert($(this).hasClass('item'))  })

hasClass(className) 返回值是/true/false

map(fn) map(callback)所有的遍历了一遍

var arr  = $("li").map(function(index, item){      return item.innerHTML;  });  console.log(arr);

2. 查找(找亲戚)

find(selcter) 后代元素find(e|o|e)

$("#myList").find("li").css("border", "1px solid red");

children(selcter) 子元素children([expr])参数可以为空

$("#myList").children("li").css("border", "1px solid red");  /*选择其中一个 用eq*/  $("#myList").children("li").eq(1).css("border", "1px solid red");

parent() 父元素parent([selector])

$(".item").parent().css("border", "5px solid red");

parents(selcter) 所有的祖先元素parents([expr])可以传参数过滤一下
```
$(".item").parents("ul").css("border", "5px solid green");
```

parentsUntil(selecter) 所有祖先元素，直到传的参数那里parentsUntil([e|e][,f])

$(".item").parentsUntil("body").css("border", "5px solid blue");  /*向上找所有的祖先元素，直到body*/

offsetParent()

closest(selecter) 从自身和祖先元素中向上找到第一个满足条件closest(e|o|e)1.7*
```
$(".item").closest("li").css("border", "5px solid red");  /*找最近的*/
```

next() 紧跟在后面的一个兄弟元素next([expr])

nextAll() 跟在后面的所有兄弟元素nextAll([expr])
```
$(".item").nextAll().css("border", "5px solid red");
```

nextUntil() 跟在后面的所有兄弟元素，直到传的条件那里 nextUntil([e|e][,f])
```
$(".item").nextUntil("p").css("border", "5px solid red");
```

prev() 紧跟在前面的一个兄弟元素prev([expr])

prevAll() 跟在前面的所有兄弟元素prevall([expr])

prevUntil() 跟在前面的所有兄弟元素，直到传的条件那里prevUntil([e|e][,f])

siblings() 所有（前面和后面）的兄弟元素（不包含自己） siblings([expr])
```
$(".item").siblings("li").css("border", "1px solid red");
```

3.串联

add(expr|ele|html|obj[,con]) 1.9*
- 把选中的元素加入到当前集合
- 把与表达式匹配的元素添加到JQ对象中
- $("li").add("p").css("background-color", "orange");

andSelf() 被abbBack()代替 1.8-
- 添加堆栈中元素集合到当前集合，一个选择性的过滤选择器（紧挨着的一个）
- $("ul").find("li").addBack().css("border", "5px solid red");ul也会选中

addBack() 1.9+
- 把最近的堆栈中元素加入当前集合

contents() 返回所有子节点的集合(不是JQ DOM)

end()
- 返回最近的一个破坏性操作之前的元素。即，将匹配的元素列表变为前一次的状态
- $("ul").find("li").end().css("border", "5px solid red");只选中ul

四、属性

1. 属性操作的`方法`

prop(attr [,val]) 只能操作内置(自带的)属性

//获取 某个属性的值(一个参数)  console.log($("img").prop('src'));//处理后的地址http://...  console.log($("img").prop('width'));  //修改、添加某个属性值（两个参数）  $("img").prop("title", "哈哈哈");  $("img").prop("alt", "哈哈哈");

attr(attr [,va]) 操作自定义属性（也可以操作内置属性、存在的）

//获取自定义属性的值(一个参数)  console.log($("img").attr("loadpic"));  console.log($("img").attr("src"));//写的什么地址就是什么地址  //修改 不存在的 会自动添加（两个参数）  $("img").attr("dddd", "dds");

removeAttr(attr) 移除属性

$("img").removeAttr("dddd");/*任何属性都可移除*/  $("img").removeProp("alt");/*移除由Prop设置的 有错误（建议不用）*/

2.class操作

addClass() 添加一个类

removeClass() 移除一个类

toggleClass() 切换

hasClass() 判断一个类

// class 操作（不影响原先就有的类）  $("img").click(function(){      /*if ($(this).hasClass("current")) {          $(this).removeClass("current");      } else {          $(this).addClass("current");      }*/          $(this).toggleClass("current");      });

3.HTML代码/文本/值（方法）

html([val])

text([val])

val([val])

//获取 div内的 html内容(包含其中的标签)（不写参数）  console.log($(".content").html());  //修改html内容（写参数）  //$(".content").html("啊啊啊
")  //获取 文本内容（仅仅包含文本内容）（不写参数）  console.log($(".content").text());  //设置文本内容 原样输出（写参数）  //$(".content").text("锄禾日当午
")  //获取表单内容  $("#btn1").click(function(){      //alert($("#name")[0].value())      $("#name").val("请输入用户名");  })

五、CSS

1.css方法

css() 返回值是String

/*获取(元素中的第一个)*/  console.log($(".my-list").css('width'));  /*设置*/  $("p").css("border","1px solid red").css("padding", "20px");  /*同时设置 对象{，,}*/  $(".my-list li").css({          "border":"2px solid green",          "padding":"20px",          "margin-bottom":"10px"      })

逐渐增加div的大小

2.位置

offset() 当前视口的相对偏移（可以设置）
- 返回的对象包含两个整型属性：top和left
- 单独获取.offset().top/left
- 此方法只对可见元素有效

postion() 相对父元素的偏移（只读的，不能设置）

/*获取偏移*/  $("#btn1").click(function(){      console.log($(".my-list li").eq(2).offset())      console.log($(".my-list li").eq(1).position())  });  /*设置偏移 参数（对象）*/  $("#btn2").click(function(){      $(".my-list li").eq(2).offset({          left:100,          top:89      });  });

scrollLeft([val])

/*相对滚动条左边的偏移*/  $("#btn3").click(function(){      console.log($(".box").scrollLeft());  });  /*设置点击 内容向左滚动*/  $("#btn4").click(function(){      $(".box").scrollLeft($(".box").scrollLeft()+100)  })

scrollTop([val])
- 匹配元素相对滚动条顶部的偏移
- 此方法对可见和隐藏元素均有效

3.尺寸

width() / height()

/**   *以10像素的幅度增加p元素的高度   *参数描述function(index,height)  */  $("button").click(function(){      $("p").height(function(n,c){          return c+10;      });  });

innerWidth() / innerHeight()
- 获取内部区域的宽度和高度（包括补白、不包括边框）
- 此方法对可见和隐藏元素均有效

outerWidth() / outerHeight()参数设置为true时，计算边距在内

console.log($(".box").outerWidth(), $(".box").outerHeight());  /*设置尺寸*/  $("#btn5").click(function(){      //$(".box").width(500);      $(".box").outerWidth(500);  })

六、文档处理(添加、删除元素)DOM操作

1.内部插入

append(content|fn) （父元素来调用）添加到父元素后面插入

//添加  $("#btn01").click(function(){      //创建一个元素$("")      //var newImg = $("").prop("src", "../../dist/images/002.jpg");      //$(".box").append(newImg);      $(".box").append("");  })

appendTo(content) （子元素来调用）添加到父元素后面插入
```
$("#btn02").click(function(){          $("").appendTo(".box");      });
```

prepend(content|fn) （父元素来调用）添加到父元素前面插入
```
$("#btn03").click(function(){          $(".box").prepend("");      });
```

prependTo(content) （子元素来调用）添加到父元素前面插入

2.外部插入（插入到外面去了，成为兄弟元素）

after(content|fn) 后插

$("#btn04").click(function(){          $(".box").after("");      });

insertAfter(content) 后插（新元素调用）

$("#btn05").click(function(){          $("").insertAfter(".box");      });

before(content|fn)

$("#btn06").click(function(){          $(".box").before("");      });

insertBefore(content)

3.包裹（元素的外面再包一层元素）

wrap(html|ele|fn) 每个元素都包裹一个新的元素

wrapAll(html|ele) 所有元素包裹一个新的元素

wrapInner(html|ele|fn) 在里面包裹一个
- img是单标签，调用wrapInner没意义

unwrap() 不需要参数（删除添加的wrap，也能删除包裹在外面的父元素）

$("#btn07").click(function(){          $(".box img").wrap("");      })      $("#btn08").click(function(){          $(".box img").wrapAll("
");      });      $("#btn09").click(function(){          $(".box").wrapInner("
");      })      $("#btn10").click(function(){          $(".box img").unwrap();      });

4.替换

replaceWith(content|fn) 旧的元素调用，参数是新的

replaceAll(selector) 新的元素调用，参数是旧的

$("#btn11").click(function(){          $(".box img.current").replaceWith("")      });      $("#btn12").click(function(){          $("").replaceAll(".box img.current");      })

5.删除元素

empty() 清空（子元素），没有参数

remove([expr]) 删除（自己），想删谁就谁调用

detach([expr]) 删除（自己），

$("#btn13").click(function(){          $(".box").empty();      });      $("#btn14").click(function(){          $("img.current").remove();      })

6.克隆

clone([Even[,deepEven]])不光克隆自己，子元素也克隆
```
$(".box").clone().appendTo(document.body)
```

七、事件

1.页面载入

ready(fn)

2.事件绑定方式（事件处理）

事件(fn)

$(".box").dblclick(function(){      console.log("啊，我被双击了");  });

bind("事件名", fn) 指定对象同时绑定多个事件bind(type,[data],fn)

$(".box").bind("click", function(){      console.log("啊，我被单机了");  });

on("事件", fn) on(eve,[sel],[data],fn) 1.7+

$(".box").on("mouseover", function(){      $(this).css("background", "red");  });

off(eve,[sel],[fn]) 1.7+

one("事件", fn) 只能绑定一次

$(".box").one("mouseout", function(){      /*可以设置为空 恢复原来的样式*/      $(this).css("background", "");  });

同时绑定多个事件（bind）

$(".content").bind({      mouseover:function(){          $(this).css("background", "green");      },      mouseout:function(){          $(this).css("background", "red");      },      mousemove:function(){          console.log("OK");      }  })

3.事件解除绑定

unbind(t,[d|f])

off()

$("#btn").click(function(){      /*解除多个*/      $(".box").unbind("click").unbind("mouseout");      /*解除所有绑定（不写参数）*/      $(".box").unbind();      $(".box").off();  })

4.事件委派(新添加的元素也有效果)

live(type,[data],fn) 1.7-（取消了不用）

die(type,[fn]) 1.7-（取消了不用）

on(事件, 选择器, fn) 选择器是调用on的集合的子元素

/*解决，新添加的元素也有效果*/  $(".my-list").on("mouseover", "li", function(){      $(this).css("background", "orange");  }).on("mouseout", "li", function(){      $(this).css("background", "");  })

delegate(选择器，事件， fn) 跟上面的（on）顺序不一样,用法类似

$(".my-list").delegate("li", "click", function(){          $(this).css("border-color", "red");      });

undelegate(选择器) 事件绑定解除undelegate([s,[t],fn])
```
$(".my-list").undelegate("li");
```

5.自动触发事件

trigger(type,[data])
```
$(".my-list li").trigger("mouseover");
```

triggerHandler(type, [data])

$(".my-list li").triggerHandler("dblclick");

两者的区别：
- triggerHandler(type, [data])
  - 只触发Jquery对象集合中第一个元素的事件处理函数
  - 委派上的事件不可触发
  - 可以触发元素的自带动作(超链接a)
- trigger(type,[data])
  - 集合中全部都触发
  - 委派上的事件也可触发
  - 可以触发元素的自带动作(超链接a)

6.jQuery 事件(切换)

hover([over,]out) 把mouseover和mouseout合在一起了

toggle([spe],[eas],[fn]) 1.9-

$(function(){      $(".my-list li").hover(function(){          $(this).toggleClass("current");      });  })

7.事件

blur([[data],fn])

change([[data],fn])

click([[data],fn])

dblclick([[data],fn])

error([[data],fn])

focus([[data],fn])

focusin([data],fn) 获取焦点绑定给input父元素的

focusout([data],fn) 失去焦点绑定给input父元素的

keydown([[data],fn])

keypress([[data],fn])

keyup([[data],fn])

mousedown([[data],fn])

mouseenter([[data],fn])

mouseleave([[data],fn])

mousemove([[data],fn])

mouseout([[data],fn])

mouseover([[data],fn])

mouseup([[data],fn])

resize([[data],fn])

scroll([[data],fn])

select([[data],fn])

submit([[data],fn])

unload([[data],fn])

focusin

focusout

八、事件对象

eve.currentTarget

eve.data

eve.delegateTarget1.7+

eve.isDefaultPrevented()

eve.isImmediatePropag...()

eve.isPropagationStopped()

eve.namespace

eve.pageX

eve.pageY

eve.preventDefault()

eve.relatedTarget

eve.result

eve.stopImmediatePro...()

eve.stopPropagation()

eve.target

eve.timeStamp

eve.type

eve.which

九、效果

1.基本

show()

hide()

toggle()

2.滑动

slideDown()

slideUp()

slideToggle()

3.淡入淡出

fadeIn()

fadeOut()

fadeToggle()

fadeTo()

4.自定义

animate()

stop()

delay()

finish()

5.设置

jQuery.fx.off
- 设置为true 关闭所有动画

jQuery.fx.interval
- 设置动画的显示帧速。默认值是 13 毫秒。该属性常用于修改动画运行的每秒帧数

十、工具

1.浏览器特性检测

$.support

2.数组和对象操作

$.each(object,[callback]) 遍历数组对象

$.extend([d],tgt,obj1,[objN]) 合并对象合并到第一个参数

$.grep(array,fn,[invert]) 过滤数组

$.makeArray(obj) 把类数组对象变为数组

$.map(arr|obj,callback) 操作数组的每一单元

$.inArray(val,arr,[from]) 判断值是否在数组中

$.merge(first,second) 合并数组

$.unique(array) 去重

$.parseJSON(json) 解析json

$.parseXML(data) 解析xml

3.函数操作

$.noop 空方法

$.proxy(function,context) 改变方法的作用域

4.测试操作

$.contains(c,c) 判断一个元素是否是另一个元素的后代吗元素

$.type(obj) 判断类型

$.isarray(obj) 是否为数组

$.isFunction(obj) 是否是function

$.isEmptyObject(obj) 是否为空对象

$.isPlainObject(obj) 是否为纯粹的对象

$.isWindow(obj) 是否是window对象

$.isNumeric(value)1.7+ 是否是number

5.字符串操作

$.trim(str) 去除左右两边的空格

6.序列化

$.param(obj,[traditional]) 把对象或数组转为特殊格式的字符串

7.其他

$.error(message) 抛出错误

$.fn.jquery 返回jqueyr版本

十一、核心

1.核心函数

jQuery([sel,[context]])

jQuery(html,[ownerDoc])1.8*

jQuery(callback)

2.jquery对象访问

each(callback) 遍历jquery dom

size() 返回dom集合中的个数同length

length 同上

selector 返回选择器

context 返回原生js dom

get([index]) 获取dom集合中一个

index([selector|element]) 索引值

toArray() 转为纯数组

3.数据缓存

data([key],[value])

removeData([name|list])1.7*

4.队列

十二、插件

1.自定义插件

jQuery.extend() 扩展jQuery对象本身。

jQuery.fn.extend() 扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。

转载于:https://www.cnblogs.com/1666818961-lxj/p/7495907.html

你可能感兴趣的文章

android 设置Dialog的宽度

查看>>

std::thread join和detach区别

多线程：模拟多个人通过一个山洞.............

查看>>

关于asp.net web form 和 asp.net mvc 的区别

查看>>

【Linux基础】VI替换命令详解

查看>>

一、 jQuery 基础

1.安装jQuery

2.ready 事件(等待DOM就绪)

3.jquery dom 和 原生js dom（不一样）

4.jquery 中绑定事件

5.jquery连贯操作

二、jquery 选择器

1. 基本选择器

2.层级选择器

3. 过滤选择器

4.内容选择器

5. 可见性选择器

6.属性选择器

7. 子元素选择器

8.表单选择器

9. 表单对象选择器

三、 筛选（JQ DOM的一些方法）

返回值都是JQ DOM 一个方法调用完了之后可以接着调用另一个

1.过滤（在：满足条件下，再查找）

2. 查找(找亲戚)

3.串联

四、属性

1. 属性操作的方法

2.class操作

3.HTML代码/文本/值（方法）

锄禾日当午

五、CSS

1.css方法

2.位置

3.尺寸

六、文档处理(添加、删除元素)DOM操作

1.内部插入

2.外部插入（插入到外面去了，成为兄弟元素）

3.包裹（元素的外面再包一层元素）

4.替换

5.删除元素

6.克隆

七、事件

1.页面载入

2.事件绑定方式（事件处理）

3.事件解除绑定

4.事件委派(新添加的元素也有效果)

5.自动触发事件

6.jQuery 事件(切换)

7.事件

八、事件对象

九、效果

1.基本

2.滑动

3.淡入淡出

4.自定义

5.设置

十、工具

1.浏览器特性检测

2.数组和对象操作

3.函数操作

4.测试操作

5.字符串操作

6.序列化

7.其他

十一、核心

1.核心函数

2.jquery对象访问

3.数据缓存

4.队列

十二、插件

1.自定义插件

3.jquery dom 和原生js dom（不一样）

三、筛选（JQ DOM的一些`方法`）

`返回值都是JQ DOM 一个方法调用完了之后可以接着调用另一个`

1. 属性操作的`方法`