jquery 基础入门attr 设置或获取元素的属性。 prop 设置或获取元素的属性。注意：具有 true 和 fa

选择器

基本选择器

id - #： $("#box")
类 - .：$(".box")
标签：$("div")
多元素 - 几种选择器组合：$("#box,.box,div")
后代 - 用空格隔开：$("#box p")
子元素 - 用 > 隔开：$("#box > p")

属性选择器

= - $("input[value=men]")：找 value=men 的 input 元素
*= - $("input[value*=men]")：找 value 里面包含 men 的 input 元素
^= - $("input[value^=men]")：找 value 里面以 men 开头的 input 元素
$= - $("input[value$=men]")：找 value 里面以 men 结尾的 input 元素

过滤选择器

:first：第一个元素
:last：最后一个元素
:not(selector)：去除所有与给定选择器匹配的元素
:even：索引值为偶数的元素，从 0 开始计数
:odd：索引值为奇数的元素，从 0 开始计数
:eq(index)：指定索引值的元素，从 0 开始计数
:gt(index)：大于给定索引值的元素，从 0 开始计数
:lt(index)：小于给定索引值的元素，从 0 开始计数

常用方法

DOM 属性相关

addClass 添加样式

$('div').addClass('box')

removeClass 删除样式，一个、多个或全部

$('p').removeClass('myClass yourClass')

toggleClass 样式切换，如果有就删除，如果没有就添加

$("p").click(function () {
   $(this).toggleClass("highlight")
})

css 设置或获取css样式

$('div').css('color','red'); //设置所有div字体颜色为红色
$('div').css('color')  //获取颜色
$('div').css('color',function(index,item){
      if(index <=4 ){
           return  'blue'; 
      }
}) //下标小于4的都设置成蓝色

html 设置或获取元素的html内容

$('p').html() //获取p标签里面的内容
$('p').html('床前明月光')；//设置html里面的内容

text 设置或获取元素的文本内容
each 循环遍历方法

$("li").each(function(index, item){
   // index 为 li 的下标，  item 表示每个 li
   console.log(index, item)   
]})

attr 设置或获取元素的属性。

$("em").attr("title")

prop 设置或获取元素的属性。

$("input").prop("checked", true)

removeAttr 删除属性

$("input").removeAttr("data")

removeProp 删除属性

$("input").removeProp("checked")

注意：具有 true 和 false 两个属性值的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr() 。

DOM 操作相关

父子元素

append、appendTo，添加子元素，往后

$("#ul").append(li); // 在 ul 中添加一个 li 元素 ，这个元素被添加到 ul 中原有元素的后面
$(li).appendTo($("#ul")); // 把 li 元素添加到 ul 中 ，这个元素被添加到 ul 中原有元素的后面

prepend、prependTo，添加子元素，往前

$("#ul").prepend(li); // 在 ul 中添加一个 li 元素 ，这个元素被添加到 ul 中原有元素的前面
$(li).appendTo($("#ul")); // 把 li 添加到 ul 中 ，这个元素被添加到 ul 中原有元素的前面

兄弟元素

after、insertAfter，添加兄弟元素，往后

$("#li1").after($("#li2")); // 在 li1 后面添加一个 li2 元素
$("#li2").insertAfter($("#li1")); // 把 li2 添加到 li1 后面

before、insertBefore，添加兄弟元素，往前

$("#li1").before($("#li2")); // 在 li1 前面添加一个 li2 元素
$("#li2").insertBefore($("#li1")); // 把 li2 添加到 li1 前面

其他方法

index：获取元素下标

$("box").on("clicki",function(){
      $(this).index() // 得到当前被点击的对象的 下标
})

prev：获取前面一个兄弟节点
prevAll：获取前面所有的兄弟节点
next：获取后面一个兄弟节点
nextAll：获取后面所有的兄弟节点
siblings：获取所有的兄弟节点
find：查找子节点

$(".box").find("p"); // 找到box类下面所有的p标签

closest：查找父节点

$("input").closest('li');//找到input上面最近的li父级

get：获取指定索引的元素

$(".box").get(0);  // 获取所有box类中的第一个元素对象

事件

事件绑定

on 方法绑定

$('#box').on('click',function(){
    alert(1);
})

直接绑定

$("#box").click(function(){
     alert(1）
})

off 删除事件

$("#box").off("blur")

注意：事件里面的 this 是原生的 this，如果要使用 jquery 方法需要 $(this)

事件委托 `delegate`

$("ul").delegate("li","click",function(){
     $(this).css("background","#ccc");
})

阻止事件冒泡 `stopPropagation`

事件冒泡就是事件会从元素内部往外传播的一种现象，事件冒泡的好处就是可以节约代码

$("#btn1").on("click",function(ev){
      ev.stopPropagation();
})

阻止浏览器默认行为 `preventDefault`

浏览器会自带一些默认行为，比如说右键菜单，表单提交等，如果要实现自定义右键菜单或者表单验证这些功能的时候就需要把这些默认行为阻止掉。

$("#btn1").on("click",function(ev){
      ev.preventDefault();
})

注意：在 jquery 中可以直接 return false ；return false 具有阻止浏览器默认行为和阻止冒泡的功能

ajax

$.ajax

$.ajax({
    url:'',                                    // 请求地址
    type:'GET',                                // 请求类型
    dataType:'jsonp',                          // 数据类型
    data:{ "name":"str"},                // 数据参数
    jsonp:'callback',                          // 服务器端获取回调函数名的key
    jsonpCallback:'getName',                   // 回调函数名
    success:function(result){ },               // 成功处理
    error:function(msg){  }                    // 错误处理
});

jquery 基础入门

选择器