学习HTML的第九天

一、jQuery属性操作

1.获取父子节点

节点对象.parent() - 获取父节点
节点对象.children() - 获取所有子节点

2.属性操作

1）标签内容

节点对象.text()/节点对象.text(值)
节点对象.html()/节点对象.html(值)

2）value属性

节点对象.val()/节点对象.val（值）

3）class属性操作

节点对象.addClass(class值)
节点对象.removeClass(class值)

4）样式

节点对象.css(css属性名,css属性值) - 单独设置一个属性（属性名和属性值都要和css保持一致）
节点对象.css({
属性名1: css属性值1,
属性名2: css属性值2,
属性名3: css属性值3
…
})
注意：属性名是驼峰式的css属性名，属性值和css属性值一样

5）普通属性

节点对象.attr(属性名)/节点对象.attr(属性名,属性值)

二、事件绑定

绑定事件

jQuery节点对象.on(事件名,函数) - 直接给指定标签绑定事件
jQuery节点对象.on(事件名,选择器,函数) - 给指定标签中通过选择器选中的子标签绑定事件
父节点.on(事件名,子节点选择器,函数)

三、表格效果

1.创建表格

自调用函数：（匿名函数）（实参列表）

2.隔行换色

        function changeColor(){
            $('#tb tr:even').addClass('row-0')
            $('#tb tr:odd').addClass('row-1')
        }

3.清除数据

        function clearData(){
            $('tr:not(#first-tr)>td').text('')
        }

4.删除行

        function deleteRow(){
            $('tr:not(#first-tr):last').remove()
        }

5.隐藏表格

        function hideTable(){
            // $('#top').hide(1000)
            $('#top').slideUp()
        } 
        
        function showTable(){
            // $('#top').show(1000)
            $('#top').slideDown()
        }

四、Ajax网络请求

1.什么是Ajax

AJAX(Asynchronous JavaScript and XML) - 异步js

2.怎么使用Ajax

$.ajax({
	url:数据接口,
	type:接口类型(GET/POST),
	data:参数对象(参数是发送请求的时候客户端传输给服务器的数据)，
	success:函数（数据请求成功后会自动调用函数，函数的参数就是请求到的数据）
})