jquery

2021年6月19日

1.jquery的使用方法：$(document).ready(function(){})

2.jquery中的选择器：属性选择器

3.jquery中的基础过滤选择器：：eq表示索引值例如：$（'#olColor li:eq(1)')在id为olColor下的li标签索引为1的标签；

4.：gt（下标）表示大于索引值得标签，：lt（下标）表示小于索引值的标签，：not（内部可以放所有的选择器）表示选择除了次标签的所有标签，：even选择到所有的偶数标签，：odd选择所有的奇数标签，：first第一个标签，：last最后一个标签

5.子元素过滤器 例如：$('#paragraph P:first-child'),表示id名为#paragraph的子元素p的第一个子元素（第一子元素必须是P标签）；$('#paragraph span:first-of-type')表示id名为#paragraph的子元素span的第一个子元素（选择到第一个span标签）;签，：first第一个标签，：last最后一个标签

5.子元素过滤器 例如：$('#paragraph P:lasth-child'),表示id名为#paragraph的子元素p的最后子元素（最后元素必须是P标签）；$('#paragraph span:last-of-type')表示id名为#paragraph的子元素span的最后一个元素（选择到最后的span标签），$('#paragraph p:nth-child(2)')表示元素i名为paragraph的元素的子元素的第二个元素（第二个元素必须是p标签）

2021年6月20日

1.通过jquery给元素添加一个class：addClass；移除一个class用方法removeClass

2.检测元素是否有class用hastClass（需检测的class名称）

3.对元素class从有到无的的来回切换：toggleClass（）；

4.插入元素，使用append（需插入的标签）方法，appendTo方法将：元素.appendTo（父级元素）将元素插入到父级元素中和append方法写法相反，prepend（插入的元素）将元素插入的子元素的最前面热（prependTo方法）

5.在外部出入元素：$(父级元素).after/befor（添加的元素），在父级元素前面、后面添加元素;（添加的元素）insertAfter/inserBefor('父级元素')，在父级元素后面/前面添加元素;

2021年6月21日

1.插入元素，html与text方法，html类似于indexHtml（）插入标签（可以查询标签），text类似于inedxText（）方法用来插入文本（可以查询标签内的文本。

2.包裹元素（给元素添加父级）

  (1)$('class/id').wrap（'元素标签（不用写闭合标签）'），给选择的元素添加一个父级标签个每一个class和id单独添加一个元素标签

  (2)$('class/id').wrapAll("元素标签")给选中的所有class/id添加一个统一的元素标签

  (3)$('class/id').wrapInner("元素标签")给选中的class/id里边添加一个标签

  (4)$('class/id').unwrap()删除class/id的父级标签

  3.删除元素

    (1)$('class/id').remove()删除class/id自己

    (2)$('class/id).empty()清空class/id下的所有子元素

    (3)var end = $('class/id').detach()将class/id删除并储存在end当中

  4.克隆元素与替换元素

    (1)$('class/id').clone(true).appendTo("父级标签class");将class/id进行克隆并且添加到父级标签中，其中clone(true)中的true代表将class中的方法一起克隆

    (2)$("创建的标签").replaceAll("需要替换的标签")主动替换标签

    (3)$('class/id（被替换标签）').replaceWith("创建替换标签（替换标签）")

  5.通用属性操作

    (1)$(class/id).attr("属性名")获取属性名的值（不管class/id选择多少内容只获取第一个值）；$(class/id).attr("属性名","自定义属性值")给属性添加属性值（添加所有选出来的class/id值;若要设置多条属性则attr({})中传递对象

    (2)$(class/id).prop("属性名")获取属性名的属性值，与arrt不同的是prop获取的src地址是绝对地址，而arrt地址是相对地址，同时arrt能获取自定义属性的值，prop不能够获取自定义的值

    (3)删除标签元素的属性$(class/id).removeArrt(属性名)；$(class/id).removeProp(属性名)删除的是DOM对象身上的属性，并不是标签身上的属性

    (4)$(class/id).val()获取表单当中的value值，$(calss/id(表单的class/id)).val("设置内容")设置表单中的value值

  6.属性操作-css类属性操作

  (1)$(class/id).css(属性)：获取css属性的参数；$(class/id).css(属性名，属性值)修改、添加属性值

  (2)$(class/id).width/height()获取class/id的宽高；$(class/id).innerWidth/innerHeight()获取盒模型加上padding的宽高

  (3)$(class/id).outerWidth/outerHeight()获取盒模型加上padding和border的宽高

  (4)位置属性$(class/id).offset().left/top显示class/id的left/top信息（相对于document的位置，并不是相对于父级)

  进行设置$(class/id).offset({left:属性值；top:属性值})

  (5)$(class/id).position().left/top相对于父级的位置

  (6)$(document).scrollTop/scrollLeft()获取滚动条的位置；滚动条的设置：事件（$(document).scrollTop/scrollLeft(数值)）当事件发生滚动条滚动

2021年6月22日

1.获取后代元素：$(class/id).children()获取class/id的后代元素；$(class/id).children(':eq(1)')获取后代子元素下标为1的子元素

2.获取后代子元素：$(class/id).find('标签名')获取后代子元素

3.获取元素的父级：$(class/id).parent()获取class/id的父级；$(class/id).parents()所有的父级（所有的祖先元素）

4.获取限定的祖先元素：$(class/id).parentsUntil('限定的父级元素')，查找限定的父级元素（找到限定标签以内的祖先元素）

5.找到有定位的祖先元素（position）:$(class/id).offsetParent()找到class/id带有定位的祖先元素

6.获取祖先元素：$(class/id).closest('限定元素')，获取class/id 的祖先元素中的限定元素（和parent不同的是closest选中的限定元素自己也算祖先元素）

7.获取后面的兄弟元素：

  (1)$(class/id).next()获取后面紧跟着的class/id的兄弟元素；$(class/id).nextAll()获取class/id后面的所有的兄弟元素节点，括号中传了参数就是限定兄弟节点为所有参数的元素节点

  (2)$(class/id)nextUntil('限定元素')查找兄弟节点当查找到限定元素就不在进行查找

  (3)获取前面的兄弟节点：$(class/id).prev() ；$(class/id).prevAll()获取前面的所有兄弟节点如果传入限定条件（参数）则会在限制元素处停止查找

  (4)获取所有兄弟节点：$(class/id),siblings()传入限定参数之后就会查找出所有的限制参数节点

8.绑定事件1：通过事件名称函数：选中元素打点调用JavaScript的原生事件名进行事件调用在传入参数中传入函数

2021年6月23日

1.绑定事件2：可以添加多个事件

  (1)通过on添加$(class/id).on('事件'，函数)

  (2)通过on添加一个参数$(class/id).on('事件'，{对象}，函数)

  (3)事件委托（冒泡、捕获）$(class/id).on('事件'，'委托事件源（需要触发的元素），{对象}，函数')其中函数可以通过形参event.data调用对象

2.绑定事件3：one()这个事件只能触发一次用法和on()相同

3.接触绑定事件$(class/id).事件（函数{(class/id需要接触的事件).off('接触的事件')}）如果off不传参数就是解除所有事件，如果传入参数就是指解除传入的蚕食

4.手动（自动）触发绑定事件：trigger()/triggerHandler

  (1)trigger()事件是先写出需要触发的事件在写定时器通过定时器打点调用手动触发时间($('触发事件源').trigger('事件名'))

  (2)trigger()会触发事件的默认行为；triggerHandler()不会触发时间的默认行为

  (3)trigger()会触发元素身上的所有事件，triggerHandler()只触发元素身上的一个事件

  (4)trigger()会冒泡，triggerHandler不会冒泡

  (5)trigger()方法可以使用链式操作，而triggerHandler()方法不能够使用链式操作

5.动画特效hide():隐藏特效括号中的第一参数可以填写时间（隐藏过度的时间）第二个参数是传递回调函数；括号中的参数有fast、nomal、slow

6.动画特效show();显示特效括号里的参数和hide参数相同

7.动画特效在显示、隐藏中来回切换用toggle();括号中的参数和hide一样

8.滑动隐藏slideUP();滑动显示slideDown();滑动隐藏/显示切换slideToggle();用法和动画特效显示和隐藏是一样的

9.淡入隐藏效果fadeOut();fadeIn();fadeToggle();淡入隐藏、淡出显示、淡入/淡出切换吗 ；fadeTo()透明度变化

10.自定义动画：animate();自定义动画animate()内部第一个参数是对象{}可以传递需要运动的属性（必须属性值是数字），对象后面跟着运动时间，时间后面跟着回调函数，animate可以进行链式操作

11.让动画停止stop(),让动画瞬间完成finish(),延迟动画delay()括号内放的是时间（这个是让后面的动画延迟执行）这个方法是放着执行事件之后的

2021年6月24日

1.通过jquery方法来调用ajax的get方法：$.get('url地址',{appkey:'appkey名'}，函数方法function（data){},'json数据类型')

2.通过jquery方法调用ajax的ajax方法：$.ajax({

  url：'url地址'，

  type：'请求方法get/post',

  data:{

    请求参数appkey：'appkey名'，

  dataType:数据类型json,

  success：function(data){

    请求成功：回调函数

  }，

  error:function(data){

    请求失败：回调函数

  }

  }

})

3.通过jquery方法来调用ajax的post方法，用法和get方法相同

4.通过jquery方法来调用ajax的json方法：getJSON()用法同上

2021年6月25日

1.src和href只能发送get请求不能够发送post请求

2021年6月28日

1.给jquery对象本身扩展方法：$.extend({

  方法名:function(参数){

    方法

  }

})

2.给jquery DOM对象扩展方法

$.fn.extend({

  方法名：function(){

    $(this).方法;

  }

})

调用方法：$('DOM节点').方法（）；其中this指向是谁调用指向谁（及指向DOM节点);

2021年6月30日

1.outline不会占用真实的像素，而border会占用真实的像素

2.$.extend():扩展jQuery类本身，为jQuery类添加新的方法；

3.$.fn.extend（）：扩展jQuery的实例对象，为实例对象添加新的方法

4.！！两个感叹号是快速将非布尔值转换成布尔值

2021年7月7日

1.mock语法，数据模板中的每个属性由3个部分构成：属性名、生成规则、属性值；语法：'name|rulr':value;生成的规则是需要依赖属性值的

2.mock.Random生成方法（var Random = Mock.Random)

  (1)Random.boolean()随机一个布尔值，其中括号里填min，max，true/false;

  (2)Random.natural()随机生成一个自然数

  (3)Random.integer()随机生成一个整数（正数/负数）

  (4)Random.float()随机生成一个浮点数，其中可以传4个参数，前两个定义整数部分，后两个定义小数部分

  (5)Random.character()生成一个随机的字符，可以传入lower(小写字母)upper(大写字母)number(数字)symbol(符号)

  (6)Random.string()随机生成一个字符串

  (7)Random.range()随机生成一个数组，可以传入三个参数，只传一个（必填）是生成几位数组，传入两个是生成从几到几的数组，传入三个是生成从几到几并且步长（第三个参数）为多少

2021年7月8日

1.Random.date()随机生成一个日期，里面可以传递参数

2.Random.time()随机生成一个时间，可传递参数

3.Random.datetime()随机生成一个一个带日期的时间

4.Random.now()生成当前的时间

5.Random.image()随机生成一张图片，可以传入参数大小、颜色、字体颜色、内容，站位图传入的参数是字符串

6.Random.Color()随机生成一个颜色

7.Random.hex()随机生成一个颜色

8.Random.rgb()随机生成一个rgb的颜色

9.Random.paragraph()随机生成一段文本，可以传入最小值和最大值

10.Random.cparagraph()随机生成一段中文文本

11.Random.sentence()随机生成几个单词第一单词首字母大写

11.Random.csentence()随机生成几个中文汉字

2021年7月11日

1.Random.word()随机生成一个单词

2.Random.Cword()随机生成一个汉字

3.Random.title（）随机生成一个标题，标题中的所有单词首字母都是大写，随机生成3-7个单词，生成中文标题Random.Ctitle()

4.Random.name()生成随机姓名

5.Random.cfirst()随机生成一个中文的名

6.Random.clast()随机生成一个中文姓

7.Random.cname()随机生成一个中文姓名

8.Random.url()随机生成一个地址，括号里面能传协议头

9.Random.email()随机生成一个邮箱

10.Random.ip()随机生成一个ip地址

11.Random.region()随机生成一个中国的（省）

12.Random.city()随机生成一个中国的（市），括号中填true可以显示省

13.Random.county()随机生成一个中国的（县），括号中填入true可以显示省市

14.Ranfom.id()随机生成一个身份证号

15.数据占位符的使用直接通过Mock.mock('@方法')

16.扩展一个方法Random.extend（{}）方法函数