JQuery

选择器

一、
标签选择器
$("p") $("a")  $("div")
类选择器
$(".className")
层级选择器
$(".className li")
id选择器
$("#id")

二、筛选
获取所有的li选下标为2的
$("li").eq(2)
获取所有的li选第一个
$("li").first()
子标签
查它儿子中类为test的(可以为多个那返回的是一个列表)
$("div").children(".test") 
下一个标签
$("div").next()
上一个标签
$("div").prev()
所有的兄弟节点
$("div").siblings()
查找父结点
$("div").parent()

事件

推荐使用(用于事件的委托)
$("#id").on('事件','选择器',function(){
})

给所有的li绑定一个点击事件
$("ul li").click(function(){
    console.log(123)
})
事件的取消
$("ul").click(function(){
    $("选择器(要清除事件的那个)").off()
})
其他选择器
$("选择器").mouseenter()
$("选择器").mouseleave()
$("选择器").mousemove()
$("选择器").mouseup()

属性操作

$("#id").addClass('添加的类名')
$("#id").removeClass('删除的类名')

以下要设置值只需要在（）括号中添加值即可
$("#id").html()获取当前标签下的所有HTML
$("#id").text()获取当前标签下的所有文本
$("input").val()获取input的 value属性的值


CSS的操作
$("#c1").css({"color":"red","fontSize":"35px"})

js中是style

节点的操作

原生的js创建节点对象
document.createElement("p")-----创建了一个p标签

JQuery创建节点
$("<p>")---->创建了一个p标签

插入节点
$("#id").append() 插入到了$("#id")里面的最后面
$("").appendTo(content)  反过来了

外部插入
    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>"); ------在p的后面查了一个b
    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");------在p的前面查了一个b

删除
$("").empty()-----清空了该节点下面的所有节点
$("").remove() ----- 删除该节点

AJAX请求

1.获取前端渲染数据的id 后端拿到数据id
2. 后端拿到数据id 到数据库中取 id=id的这条数据

ajax 负责 --->   1.获取值 2.发送请求(让后端从数据库中删除) 3.删除节点

$("#baba").on('click','button',function () {
        data=$(this).prev().text();
        {#console.log(data);#}
        $.ajax({
            url: '/handler_data/',
            type: 'delete',  # 请求方式有  get（获取数据） post(增加数据) delete（删除数据）
put(修改全部数据） patch(修改部分数据)
            data:{"id":data},
            dataType:"JSON", # 交互数据是JSON --也就是该接口 需返回JSON格式的数据
            # 回调函数 服务端响应则执行
            success:function (data) {
                console.log(data)
            },
            # 回调函数 服务端没有响应则执行(报错等)
            error:function (data) {
                console.log(data)
            }
        });
        $(this).parent().remove()

})