一、选择器
$("#id") ??????????????id选择器$(".class") ???????????class选择器$("a") ->所有a标签 ?????标签选择器$("#id,.class,a") ?????多重选择$("#id a") ->id下层的a标签,全部递归 ??层级选择$("#id>a") ->id下层的a标签,只找子级 ??层级选择$(":[input_type]") ?????input选择器 $("[custom_attribute]") ??????自定义属性选择$("[custom_attribute=‘value‘]") ???自定义属性选择$("#id").find(input[attribute = "value"]) ->id下层的属性为value的input标签二、筛选
$(a:first) ?找到第一个a标签$(a:last) ??找到最后一个a标签$(a:eq(索引值)) 找到第一个a标签,索引值从0开始$(a:gt(索引值)) 大于索引值$(a:lt(索引值)) 小于索引值$(:header) ???$找到h标签$(this).next() ??下一个$(this).prev() ??上一个$(this).parent() 父级$(this).children() ??子级$(this).sibling() 兄弟标签
三、样式操作
addClassremoveClasstoggleClass
四、属性操作
attr("a") 查看属性attr("a","v") 增加属性removeAttr("a")prop("checked") 效果同attr,用于checkbox、radioprop("checked",true)五、示例
示例一
1 ????<script src="jquery.js"></script> 2 ????<script> 3 ????????function check_all() { 4 ????????????$(‘:checkbox‘).prop(‘checked‘,true); ??#查找所有checkbox,使其选中 5 ????????} 6 ????????function cancel_all() { 7 ????????????$(‘:checkbox‘).prop(‘checked‘, false); #查找所有checkbox,使其不被选中 8 ????????} 9 ????????function reverse() {10 ????????????$(‘:checkbox‘).each(function () {11 ????????????????this.checked = this.checked? false:true ??#反转checkbox的checked属性12 ????????????}) ?//1.X版本13 ????????}14 ????????$(".edit").click(function () {15 ????????????var texts = $(".dialog>input")16 ????????????var tds = $(this).parent().prevAll()17 18 ????????????$(texts[0]).val( $(tds[1]).text() )19 ????????????$(texts[1]).val( $(tds[0]).text() )20 21 ????????????$(".dialog").removeClass("hide")22 ????????????$(".mask").removeClass("hide")23 ????????})24 25 ????????$(".cancel").click(function () {26 ????????????$(".dialog").addClass("hide")27 ????????????$(".mask").addClass("hide")28 ????????})29 ????</script>示例二
1 <script src="jquery.js"></script>2 ????<script>3 ????????$(".header").click(function () {4 ????????????//选中标签的父级的兄弟的class含有‘content’的标签,增加‘hide’样式5 ????????????$(this).parent().siblings().find(‘.content‘).addClass(‘hide‘)6 ????????????$(this).next().removeClass(‘hide‘) ?//移除下一个标签的‘hide’样式7 ????????})8 ????</script>jquery基础
原文地址:https://www.cnblogs.com/baird/p/9542472.html