jQuery学习

1. jQuery是什么?

• 不是一个编程语言
• 是一个第三方封装的js的函数库

---

2. jQuery有语法吗?

• 没有独立的语法,它只是一个函数库

---

3. 下载jQuery的的库文件

jquery-1.9.1.js:  没有经过压缩的,我们一般在开发环境使用
jquery-1.9.1.min.js:  经过压缩的,一般建议在生产环境使用

---

4. jQuery的选择器

let p = $(".p1")   //$: 是jquery中封装的一个函数

---

5. 使用jQuery改变CSS样式(3种方式)

$("h1").css("backgroundColor", "red")

$("h1").css("backgroundColor", "red").css("color","pink")

$("h1").css({'backgroundColor': "#f00","color":"green"});

---

6. jQuery操作元素

//添加class
$(".box").addClass("box1").addClass("box2")

      //jquery选择元素
        let $box1 = $(".box")

        //添加class
        $box1.addClass("box1")

        //给元素里面(最后面)追加节点
        $box1.append("<h1>好好学习</h1>")

        //在元素里面的最前面添加节点
        $box1.prepend("<h3>java大数据1</h3>")
        $box1.prepend("<h3>java大数据2</h3>")
        $box1.prepend("<h3>java大数据3</h3>")

        //在紧邻元素的前面或者后面添加元素
        $box1.before("<h1>前端1</h1>")
        $box1.before("<h1>前端2</h1>")

        $box1.after("<h1>大数据1</h1>")
        $box1.after("<h1>大数据2</h1>")

---

7. jQuery操作属性

//添加属性
$(".box").attr("name", "admin")
//获取属性
console.log($(".box").attr(("name")))

//添加文本
$(".box").text("<h1>好好学习</h1>")
//获取文本
console.log($(".box").text())

//添加html标签文本
$(".box").html("<h1>好好学习</h1>")

//设置值
$("input[type='text']").val("admin234")

//获取值
console.log($("input[type='text']").val())

---

8. jQuery对事件函数的封装

//jquery对页面加载函数的封装
$(function () {
    console.log("页面加载成功")
});

//jquery对事件的封装
$(".btn").click(function () {
    console.log("...")
})


$("select").change(function () {
    console.log("select里面的option选项改变了",$(this).val())
})

9. 使用js解析字符串脚本

let str = "console.log('字符串...')"
//用来执行字符串脚本
eval(str)

---

10. Json格式的字符串

{
"name": "admin",
"age": 32,
"sex": "男",
"love":[
	{"name":"java"},
	{"name":"python"}
]
}

json格式的数组

[
    {
        "name": "admin",
        "age": 32,
        "sex": "男"
    },
    {
        "name": "admin",
        "age": 32,
        "sex": "男"
    },
    {
        "name": "admin",
        "age": 32,
        "sex": "男"
    }
]

---

11. ajax(阿贾克斯)

• google的最成名的技术
• ajax是用来做异步请求
• 可以实现网页的局部刷新

基于原生的js实现异步请求

//创建xhr对象
let xhr = new XMLHttpRequest()

//和服务器建立连接
xhr.open("GET", "http://192.168.0.108:8080/goods/1351805594077573122", true)

//发送请求
xhr.send()
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {

        //把字符串转为js的对象
        let responseData = JSON.parse(xhr.responseText)
        $(".image").attr("src", responseData.image)
        $(".box .title").text(responseData.title)
        $(".price").text(responseData.price).css("color", "red")
    }
}

jQuery对原生的ajax的实现做的封装

$(".btn").click(function () {
    $.ajax({
        url: "http://localhost:8080/goods/1351805594077573122",//请求地址
        method: "GET",//请求方式
        success: function (responseData) {//成功返回的回调函数(响应码为200)
            $(".image").attr("src", responseData.image)
            $(".box .title").text(responseData.title)
            $(".price").text(responseData.price).css("color", "red")
        }
    })
})

---

12. js中的定时器与周期性执行器

//定时器
setTimeout(function () {
    console.log("我执行了")
}, 3000)

//周期性执行器
setInterval(function () {
    console.log("周期执行")
},1000,2000)

---