jquery基础

Posted 2021-01-01 baird

一、选择器

$("#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() 兄弟标签

三、样式操作

addClass
removeClass
toggleClass

四、属性操作

attr("a") 查看属性
attr("a","v") 增加属性
removeAttr("a")

prop("checked") 效果同attr，用于checkbox、radio
prop("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>