首页 > 技术文章 > jquery的基础语法

yx179971 2017-08-14 20:30 原文

jquery的基础语法:$(selector).action()

导入:<script src="jquery-3.2.1.js"></script>

selector:查找想操作的标签

jquery对象与DOM对象下的方法和属性不能混用

基本选择器
$("*")
$("#id")
$(".class")
$("element")
$(".class,p,div")

层级选择器
$(".outer div")
$(".outer>div")
$(".outer+div")
$(".outer~div")

基本筛选器
$("li:first")第一个
$("li:last")最后一个
$("li:eq(2)")索引 //$("li").eq(2) 推荐
$("li:even")偶数索引
$("li:odd")奇数索引
$("li:gt(1)")大于索引
$("li:lt(1)")小于索引

属性选择器
$('[id="div1"]')
$('[alex="sb"][id]')多属性

表单选择器
$("[type='text']")---->$(":text")
$("input:checked")
$("")

查找筛选器
//链式操作.next().css().next().css()
//until不包括
.next()下一个兄弟
.nextAll()
.nextUntil()
.prev()上一个兄弟
.prevAll()
.prevUntil()
.siblings()所有兄弟标签

.find()所有后代
.children()所有子代,括号中可再加筛选标签名,如.children("p")

.parent()
.parentUntil()
.parents()


一个jquery对象(集合对象).事件(function(){})

on方法直接绑定事件
$().on(事件,function(){})

事件委派
$("#a1").on(事件,$("a2"),function(){
alert($(this).html())
alert($(this).index())
alert($(this).attr())
})

事件解除
$().off(事件)

标签加载完成再执行
$(document).ready(function(){})
$(function(){})

action:
class操作
$("").addClass(class|fn)
$("").removeClass([class|fn])

属性操作
$("").attr();取/赋值
$("").removeAttr();
$("").prop();对select和checkbox的取/赋值
$("").removeProp();

文本取/赋值操作
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])//针对固有属性

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

推荐阅读