数据库实训第二天笔记，jQuery的补充和ajax的学习和案例

jQuery补充

• jQuery 事件

dom：

<ul>
        <li class="li1">li li</li>
        <li class="li2">li li</li>
        <li class="li3">li li</li>
</ul>
<button>按钮</button>
<a href="http://baidu.com" index="1">aa</a>

​ 1、事件基础写法

$('button').click(function(){
	console.log('我是按钮')
})

​ 2、事件的升级写法（类似js）

// on 的第一个参数是：事件名
$('button').on('click',function(){
    console.log('我是一个按钮')
})

​ 3、事件的升级写法

• 第二个参数（事件委托，事件委托适用场景1）//网页的设计很多很多的使用事件委托，因为网页是动态生成的。

// 需求：给 li 的子元素绑定单独的事件，需要先绑定父级
// 第二个参数：子元素的选择器（类名、id、标签）
// 这种写法叫：事件委托。
// 就是将事件交给父级，交父级之后，点击子元素，由父级分配这个事件(点击谁)
// 事件委托适用场景1：想给每一个子元素都绑定事件
$('ul').on('click','li',function(){
	console.log($(this))
})

• 不委托写法

// 给每个事件绑定
        $('ul li').click(function(){
            console.log($(this))
        })

• 事件委托适用场景2

	// 如果是动态添加的 li ，通过 click 方法是不能给动态元素绑定（传统写法）
        $('ul li').click(function(){
            console.log($(this))
        })
        
        //  动态添加的元素，只有使用事件委托的方式才能绑定事件
        $('ul').on('click','li',function(){
            console.log($(this))
        })

        //append 就是向某个元素中追加内容
        $('ul').append('<li> 我是追加的 li</li>')

• jQuery 属性操作

设置或获取元素固有属性值 prop()。

dom：

<a href="http://baidu.com" index="1">aa</a>

​ 1、获取元素的固有属性（元素本身自带的属性）

console.log($('a').prop('href'))

​ 2、给元素固定的苏醒设置罪行的属性值

// 第一个参数：需要设置的属性
// 第二个参数：最新的属性值
$('a').prop('href','http://fanyi.baidu.com')

​ 3、 获取自定义的属性

console.log($('a').attr('index'))

​ 4、给自定义属性设置属性值

$('a').attr('index',2)

• 循环、遍历

dom:

<div>盒子1</div>
<div>盒子2</div>
<div>盒子3</div>

script中的遍历：

// 之前的隐式迭代(同时获取同名，同类型的标签，对同一元素做同一操作)
// $('div').css('background','skyblue')

​ 需求：给同一类元素做不同操作，就需要遍历：

// .each 就是 jQuery中的遍历方法
// .each 接受一个函数作为参数，函数有两个参数
// 第一个参数，索引。第二个参数，js中的DOM对象

//数组定义颜色
const arr =['skyblue','orange','pink']

$('div').each(function(index,domEle){
    // console.log(arr[index]) // 通过索引获取arr中的每一个颜色

    // domEle 是DOM对象，不能直接调用jQuery对象，需要先转换成jQuery对象
    $(domEle).css('background',arr[index])
})

• 对数组的遍历

var heroList=['亚索','阿狸','盖伦']

// 主要用来对数据进行遍历：数组
// 第一个参数：需要遍历的数据
// 第二个参数：函数，函数中也有俩个参数
//   1、索引：index
//   2、遍历的数据的每一项：item、element
$.each(heroList,function(index,item) {
	console.log(item)
})
var object={
    name: '亚索',
    age: 10
}

// 对对象进行遍历
// 函数的第一个参数：对象的属性
// 函数的第二个参数：对象的属性值
$.each(object,function(index,item) {
    // 如果遍历的是对象，index 打印出来的时序性
    console.log(index)
    // item 是属性值
    console.log(item)
})