htmlday9总结

1.jQuery补充

1.jQuery同时选中多个标签
a.同时处理 - 直接操作选中的jQuery对象,就是同时操作被选中的所有标签

$('p').css('color', 'seagreen')   // 同时设置所有p标签的文字颜色
console.log($('p'))

注意:函数中是this都是js对象

$('p').on('click', function(evt){
    console.log(this)
    console.log(this.innerText)
    //js转jq: $(js对象)  -  将js对象转换成jq对象
    console.log($(this).text())
})

因为p标签有多个,pNodes其实是一个容器型的jq对象, 可以通过下标将每个标签一一取出
注意: 单独取出来的标签都是js对象

    pNodes = $('p')
    //取指定的标签
    console.log(pNodes[0])
    console.log(pNodes[1])
    //遍历所有标签
    for(i=0;i

2.事件绑定
a.标签.on(事件名, 回调函数) - 指定的标签发送指定的事件后,自动调用对应的函数(回调函数)

divNodes.on('click', function(){
    alert(this.innerText)
})

推荐使用!!)
b.标签.on(事件名, 选择器, 回调函数) - 给父标签添加事件,将事件传递给选择器选中的子标签,函数中的this是子标签
标签 - 父标签
选择器 - 在父标签中去选中子标签

$('#box').on('click', 'div', function(evt){
    console.log(this)
    alert(this.innerText)
})

Ajax基础

1.什么是Ajax
A - asynchronous ja - javascript x - xml (异步js+xml)
Ajax类似于python中的requests第三方库,专门提供js中的网络请求功能(http请求)
2.使用方法
1)$.get/post(url,data,fn,type) - 获取url接口提供的数据(get的接口)
url - 请求地址(字符串)
data - 参数(对象)
fn - 回调函数(函数), 请求结束后,会自动调用这个函数; 这个函数的参数就是请求结果
type - 返回数据的类型(字符串,例如: json, html, text...)

$.get('http://api.tianapi.com/meinv/', {key:'772a81a51ae5c780251b1f98ea431b84', num:30},function(result){
    var newsLists = result['newslist']
    for(i=0;i')
        imgNode.attr('src', news['picUrl'])
        $('body').append(imgNode)
                    
    }
})

$.ajax({url:请求地址, type:'get'/'post', async:是否异步, success:回调函数, data:参数对象})

$.ajax({
    type:"get",
    url:"http://api.tianapi.com/meinv/",
    data:{key:'772a81a51ae5c780251b1f98ea431b84', num:10},
    async:true,
    success:function(result){
        console.log(result)
    }
});

你可能感兴趣的:(htmlday9总结)