3.1 size()

size(): 可以获取元素对象的个数, 没有参数, 返回的是包含元素对象的个数,是字符串类型

DOM结构:

  1. <p>1</p>
  2. <p>2</p>
  3. <p>3</p>
  4. <p>4</p>
  5. <p>5</p>
  6. <p>6</p>
  7. <p>7</p>

执行代码:

  1. //输出所有的p元素的个数
  2. console.log($("p").size());//读代码的过程: 选中所有的p元素,进行打点调用size()方法
  4. //常用的是length属性
  5. console.log($("p").length);

结果:
image.png

3.2 css()

l css(): 可以读取元素计算后的样式属性, 属性就是要读取的属性名, 返回的是读取的属性值,是一个字符串类型

  1. //读取teshu元素的宽度
  2. console.log($("p.teshu").css("width"));

输出:
image.png

l css(): 可以设置元素对象的属性

可以设置单一属性
使用方式:
对象打点调用css
对象.css(“k”,”v”)
K: 要设置的属性名
V: 要设置的属性名

  1. //设置单一属性
  2. $(".teshu").css("width","250px")//设置的宽度添加到行内样式
  3. $(".teshu").css("width",250)//可以不添加单位
  4. $(".teshu").css("height",250)//
  5.  所有的样式默认添加到行内样式

image.png

l css(): 还可以设置多个属性

使用方法:
对象.css({
K:v,
K:v,
K:v,
});

dom结构:

  1. <p class="teshu">1</p>

执行代码:

  1. $(".teshu").css({
  2. "width": "400px",
  3. "height": "100px",
  4. "backgroundColor": "green"
  5. })
  7. //等价方式
  8. $(".teshu").css("width","300px")
  9. $(".teshu").css("height","100px")
  10. $(".teshu").css("backgroundColor","red")

结果:
image.png

3.3 jquery 绑定事件的方式

Jquery中绑定事件的方式有2种
第一种使用方式:
$(dom).on(type,fn)
type: 事件类型
Fn: 匿名函数

举例1:

  1. //使用第一种方式添加点击事件
  2. $("#btn").on("click",function(){
  3. //css()的特殊用法   +=
  4. $("#box").css("width","+=100px");
  5. })

举例2:

第二种使用方式:
对象.click(function(){}) 参数就是匿名函数

  1. $("#btn").click(function () {
  2.   $("#box").css("width", "+=50px");
  3.   $("#box").css("backgroundColor", "red");
  4. });

3.4 show()和hide()

show() : 显示的意思 , 只有当元素的状态是display:none的时候才可以使用,最终状态的是 dispaly:block
hide() : 隐藏的意思 , 只有当元素的状态是 dispaly:block 的时候才可以使用, 最终状态是 dispaly:none

可以不写参数, 表示 “干蹦效果”

  1. //初始状态是none
  2. //添加点击事件
  3. $("#btn1").click(function(){
  4.   $("#box").show();
  5. })
  6. //给btn2添加点击事件
  7. $("#btn2").click(function(){
  8.   $("#box").hide();
  9. })

还可以书写参数,参数就是要完成动画的事件,单位是ms ,省略不写

  1. //给btn3添加点击事件
  2. $("#btn3").click(function(){
  3.   $("#box").show(2000);
  4. })
  5. //给btn4添加点击事件
  6. $("#btn4").click(function(){
  7.   $("#box").hide(2000);
  8. })

toggle: 显示 , 消失切换 . 不写参数也是”干蹦”效果 , 也可以书写参数,单位也是ms,可以省略不写
toggle() 同时包含show()和 hide() 2种功能
toggle(2000)

3.5 slideDown()和slideUp()

slideDown() : 慢慢合起(展开)
slideUp() : 慢慢合起
slideDown() : 只有当元素的状态是dispaly:none 的时候才可以调用, 当元素调用该方法的时候 , 元素的height瞬间为0 , 然后慢慢的以动画的形式变到元素的初始height, 最终状态是dispaly:block
slideUp() : 刚好相反
SlideToggle() :切换
可以不写参数, 也是动画的效果 , 默认是400ms

  1. //添加点击事件
  2. $("#btn1").click(function(){
  3.   $("#box").slideDown();
  4. })
  5. //添加点击事件
  6. $("#btn2").click(function(){
  7.   $("#box").slideUp();
  8. })

还可以书写参数 , 参数就是完成动画的事件 , 单位是ms 省略不写

  1. //有参数的
  2. $("#btn3").click(function(){
  3.   $("#box").slideDown(3000);
  4. })
  5. $("#btn4").click(function(){
  6.   $("#box").slideUp(3000);
  7. })

切换:

  1. $("#btn5").click(function(){
  2.   $("#box").slideToggle();
  3. })
  4. $("#btn6").click(function(){
  5.   $("#box").slideToggle(3000);
  6. })

小小实战 

  1. //添加鼠标进入事件
  2. $("#box").mouseenter(function(){
  3.   $("#p1").slideDown(1000);
  4. })
  5. //添加鼠标离开事件
  6. $("#box").mouseleave(function(){
  7.   $("#p1").slideUp(1000);
  8. })

3.6 fadeln() 和 fadeout()

fadeln(): 淡入效果
fadeOue : 淡出效果
fadeIn() : 只有当元素的状态是dispaly:none 的时候才可以调用, 当元素调用该方法的时候 , 该元素的opactiy:0 ,然后慢慢的增加到opactiy : 1 ,最终状态是 dispaly :block

fadeToggle(): 切换
FadeTo(600,0.5) : 第一个参数就是完成事件 , 第二个参数就是透明度

  1. //不传递参数
  2. $("#btn1").click(function(){
  3.   $("#box").fadeIn();
  4. })
  5. $("#btn2").click(function(){
  6.   $("#box").fadeOut();
  7. })
  8. //传递参数
  9. $("#btn3").click(function(){
  10.   $("#box").fadeIn(2000);
  11. })
  12. $("#btn4").click(function(){
  13.   $("#box").fadeOut(2000);
  14. })
  16. $("#btn5").click(function(){
  17.   $("#box").fadeToggle();
  18. })
  19. $("#btn6").click(function(){
  20.   $("#box").fadeToggle(2000);
  21. })
  22. //fadeTo 可以自定义 时间  和透明度
  23. $("#btn7").click(function(){
  24.   $("#box").fadeTo(600,0.5);
  25. })

呼吸轮播图在实列代码中

3.7 html()方法动态添加标签或文本

Html(): 可以获取元素的内部文本, 不需要书写参数.

  1. //获取元素内部文本
  2. console.log($("#box").html());

Html(): 可以设置元素的内部文本 , 参数就是要设置的内容

  1. //改变元素的内部文本
  2. $("#box").html("我是改变html 的文本")

image.png

Html() : 可以添加节点.

  1. //添加节点
  2. $(".box").html("<ul><li>123465<li></ul>")

image.pngimage.png

3.8 addClass()和removeClass()添加类名

addClass() 添加类名
removeClass() 移除类名

  1. //添加类名
  2. $("#btn1").click(function () {
  3.   $("#box").addClass("red fz");
  4. })
  5. //移除类名
  6. $("#btn2").click(function () {
  7.   $("#box").removeClass("red fz");
  8. })

3.9 attr()设置元素原有属性

attr() : 可以设置元素的原有属性
使用方法:
对象:attr(k,v)
K : 设置的属性名
V : 属性值

举例: 目地,鼠标进入, 鼠标离开

  1. //添加鼠标移入事件
  2. $("#box").mouseenter(function () {
  3. $("#pic").attr("src", "./images/byqpai2.jpg")
  4. });
  5. $("#box").mouseleave(function () {
  6. $("#pic").attr("src", "./images/byamaj.jpg")
  7. });

当传递一个参数的时候 , 表示读取 ,当传递2个参数的时候 , 表示设置

  1. //读取box的原有属性
  2. console.log($("#box").attr("id"));

4.0 prop()设置元素的固有属性

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

  1. body.find('#word-case').prop('checked', tr.camilo_dai == 1 ? true : false);

也可以这样

  1. $("#word-case").prop('checked', tr.camilo_dai, true);

4.1 prop和attr的区别

就是这个prop和attr 之前用的是attr方法 但是在火狐中不出效果 于是特意看了两者的区别
主要区别就是: prop 对于HTML元素本身就带有的固有属性 attr 对于HTML元素我们自定义的加在标签中的属性
· 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
· 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
上面的描述也许有点模糊，举几个例子就知道了。
百度
这个例子里元素的DOM属性有“href、target和class”，这些属性就是元素本身就带有的属性，也是W3C标准里就包含有这几个属性，或者说在IDE里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用prop方法。
删除
这个例子里元素的DOM属性有“href、id和action”，很明显，前两个是固有属性，而后面一个“action”属性是我们自己自定义上去的，元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用attr方法。使用prop方法取值和设置属性值时，都会返回undefined值。
再举一个例子：
是否可见
是否可见
像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。
$(“#chk1”).prop(“checked”) == false
$(“#chk2”).prop(“checked”) == true
如果上面使用attr方法，则会出现：
$(“#chk1”).attr(“checked”) == undefined
$(“#chk2”).attr(“checked”) == “checked”