jQuery使用case记录

添加元素/内容追加等

元素内：

append() - 在被选元素的结尾插入内容

prepend() - 在被选元素的开头插入内容

元素外：

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

删除元素/清除元素

remove() - 删除被选元素（及其子元素）

empty() - 从被选元素中删除子元素

给元素添加类或者删除类

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

父元素、子元素、同级元素

parent() 方法返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历

parents() 方法返回被选元素的所有祖先元素

children() 方法返回被选元素的所有直接子元素，该方法只会向下一级对 DOM 树进行遍历。

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

eg:

<div class="descendants" style="width:500px;">div (当前元素)

  <p>p (儿子元素)

    <span>span (孙子元素)</span>      //会被加上红色框框

  </p>

  <p>p (儿子元素)

    <span>span (孙子元素)</span>      //会被加上红色框框

  </p>

</div>

$("div").find("span").css({"color":"red","border":"2px solid red"});

siblings() 方法返回被选元素的所有同胞元素

next() 方法返回被选元素的下一个同胞元素,该方法只返回一个元素

nextAll() 方法返回被选元素的所有跟随的同胞元素

点击事件实现菜单栏高亮选中（同时取消其他高亮选中，active类为高亮样式）

$(".click_cg").click(function () {

		$(this).addClass("active").siblings().removeClass("active");

})

jq attr方法和prop方法区别

$('').attr()返回的是html对象。 操作checkbox和radio之类属性时，只能控制其选中，不能控制其取消选中。

$('').prop()返回的是DOM对象。是有true,false两个属性使用prop();（如'checked','selected','disabled'等）

jq 获取radio切换时事件

$('input:radio[name=test]).click(function(){

      xxxxxxx;

});

//当name为test的单选框被选中时触发

jq closest() 方法：方法返回被选元素的第一个祖先元素。祖先是父、祖父、曾祖父，依此类推。
```
$(obj).closest(".ttt")  // 选取当前点击元素的第一个祖先元素class为ttt的
```

jq 输入框值发生变化时触发事件

方法1：

html:

<input type="text"  id="free_value"  oninput="change_value()" onporpertychange="change_value()"  />

js:

function change_value(){

}

注意:此事件只能监听键盘输入的内容，如果是在脚本中改变input的value值不会触发事件

方法2：

html:

<input type="text"  id="free_value" />

js:

$("#free_value").on("input",function(){

})

eg: oninput("change_value()")  等价于 $("xxx").on("input",function(){})

巴特西

jQuery使用case记录

最新文章

热门文章