JQuery复习第一天 | 8月更文挑战

jquery

jquery引包

jquery是javascript的一个库， 如果想要使用jquery，必须先引入jquery，引入jquery的script标签，不能和书写jquery语句的script标签是同一个。

举例：

<!-- 引入jquery包 -->
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
// 书写所有jquery语句
</script>

jquery小体会

• 简化了元素的选择， 直接使用css选择器

// 使用js获取元素
var a = document.getElementById("box").getElementsByTagName("a")[0];
// 改变颜色
a.style.color = "red";
// 使用jquery选择元素
$("#box ul li.teshu a").css("color", "blue");

• 简化了元素的运动

// 选中所有的p
$("p").animate({"left": 500}, 2000);

• jquery所有的操作都是批量的，不需要在使用for循环， 不管是添加事件还是改变样式都是批量的。

// 将所有的p元素背景颜色改变
$("p").css("backgroundColor", "lightblue");

• jquery简化了DOM操作，如添加、删除和修改节点。

• jquery都是兼容的， 不需要再进行能力检测了。

总结：jquery是javascript的一个库，它不是一门新的语言，里面的所有语句都是使用js书写的。

$函数

jquery对象

juqery是js库，如果想要使用要先引入， 引入之后，才可以使用里面的各种各样的方法，会向全局暴露一个$()函数，所以我们书写juqery的所有语句都是以$开头，jquery有很多方法，我们可以接着打点调用其他方法。

获取内部文本：

js:   p1.innerHTML
jquery: $("p.teshu").html()

• Js对象转为jQuery对象

  直接使用$()

  $(p1).html("是今天天气很好");
  

• jQuery对象转为Js对象

  直接使用[]

$(".teshi")[0].innerHTML = "p元素";

选择器

jquery非常好用的一点就是选择器，直接使用css选择器即可选中元素。

CSS2.1选择器

// Css2.1选择器
$(".box").css("color", "red");

还支持Css3选择器

$("p:first").css("color", "red");

eq(n)还可以提取出一个方法

$("p").eq(4).css("color", "red");

jQuery函数

jquery最初引入的时候向全局暴露的是jQuery函数，但是后来人们觉得写起来复杂，才修改为$，jquery和$使用方式完全一样，jquery仍然保留，还可以继续使用.

// jQuery函数
// 选中所有p元素并改变颜色
jQuery("p").css("background-color", "red");

常用方法

size()

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

DOM结构：

<p>1</p>
<p>2</p>
<p>3</p>

执行代码:

// 输出所有P元素的个数
console.log($("p").size());
// 常用的是length
console.log($("p").length);

css()

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

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

• css(): 可以设置元素对象的样式属性

    可以设置单一属性
    使用方式：
        对象.css("k", "v")
        k:  要设置的属性名
        v: 设置的属性值
  

$(".teshu").css("width", 150); // 可以不添加单位，一定不要使用双引号
$(".teshu").css("height", "150px"); // 可以带单位， 但是一定要加上双引号
所有的样式默认添加到行内样式

• css(): 还是设置多个属性

    使用方式：
    接受一个参数： json
    对象.css({
        k: v
    })
  

DOM结构：

<p class="teshu">5</p>

执行代码：

// 设置多个属性
// $(".teshu").css({
// "width": 300,
// "height": 300,
// "backgroundColor": "red"
// })
// 等价方式
$(".teshu").css("width", "300px");
$(".teshu").css("height", "300px");
$(".teshu").css("background-color", "red");

jquery绑定事件的方式

jquery中绑定事件的方式有两种：

第一种使用方式：

$(dom).on(type, fn)

type: 事件类型

fn: 匿名函数

举例：

// 使用第一种方式添加点击事件

$("#btn").on("click", function() {
// css()的特殊用法 +=
$("#box").css("width", "+=30px");
})

第二种使用方式：

对象.click(function() {})  参数就是匿名函数

举例：

// 使用第二种绑定方式添加点击事件
$("#btn").click(function() {
$("#box").css("width", "+=30px");
})

show()和hide()

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

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

可以不写参数， 表示“干嘣”效果

// 添加点击事件
$("#btn1").click(function() {
$("#box").show();
})
// 给btn2添加点击事件
$("#btn2").click(function() {
$("#box").hide();
})

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

// 给btn3绑定事件
$("#btn3").click(function() {
$("#box").show(2000);
})

toggle: 显示、消失切换。 不写参数也是“干嘣”效果， 也可以书写参数，单位也是ms, 省略不写

// 传递参数
$("#btn6").click(function() {
$("#box").toggle(2000);
})

slideDown()和slideUp

slideDown(): 慢慢展开

slideUp(): 徐徐合起

slideDown(): 只有当元素的状态是display: none的时候才可以调用， 当元素调用该方法的时候，元素的height瞬间为0， 然后慢慢的以动画的形式变到元素的初始height，最终状态是display: block

slideUp(): 刚好相反

slideToggle()：切换

可以不写参数，也是动画的效果， 默认是400ms

// 给btn1添加点击事件
$("#btn1").click(function() {
$("#box").slideDown();
})
// 给btn2添加点击事件
$("#btn2").click(function() {
$("#box").slideUp();
})

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

// 给btn3绑定点击事件
$("#btn3").click(function() {
$("#box").slideDown(3000);
})

fadeIn()和fadeout()

fadeIn(): 淡入

fadeOut(): 淡出

fadeIn(): 只有当元素的状态是display: none才可以调用，当元素调用该方法的时候，该元素的opacity：0， 然后慢慢的增加到opacity：1 ，最终状态是display: block.

fadeOut(): 与fadeIn()相反

fadeToggle(): 切换

fadeTo(600, 0.5): 第一个参数就是完成事件， 第二个参数就是透明度

可以不写参数，默认是400ms ， 也可以书写参数 自定义时间

举例：

// 不传递参数
$("#btn1").click(function() {
$("#box").fadeIn();
})
// 传递参数
$("#btn3").click(function() {
$("#box").fadeIn(2000);
})

html()

html(): 可以获取元素的内部文本，不需要书写参数。

// 获取box的内部文本
console.log($("#box").html());

html(): 设置元素的内部文本， 参数就是要设置的内容。

// 改变box的内部文本
$("#box").html("我是一个p标签");

html(): 还可以添加节点。

// 添加节点
$("#box1").html("<ul><li>123</li></ul>")

addClass()和removeClass()

addClass(): 添加类名

removeClass(): 移除类名

举例：

// 添加类名
$("#btn").click(function() {
$("#box").addClass("red fz");
})
// 移除类名
$("#btn1").click(function() {
$("#box").removeClass("fz red");
})

attr()

attr(): 可以设置元素的原有属性

    使用方式：
        对象.attr(k, v)
        k: 设置的属性名
        v:  属性值

举例：

// 添加鼠标移入事件
$("#box").mouseenter(function() {
$("#pic").attr("src", "images/aoyun/1.jpg");
})
// 鼠标离开图片恢复
$("#box").mouseleave(function() {
$("#pic").attr("src", "images/aoyun/0.jpg");
})

当鼠标移入图片的时候：

当鼠标离开图片的时候：

当传递一个参数的时候，表示读取

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