JavaWEB-jQuary框架基础

jQuary框架

选择器

标签操作

<p id="p1"></p>
$("#p1") //通过给定的id匹配元素

<p class="c1"></p>
$(".c1") //通过给定的css类名匹配元素

$("*") //*表示选择所有
$("#p1,.c1") //","表示选择多个标签

层级关系

祖先后代选择器

$("div p") //匹配div标签下的p标签

父子选择器

$("div>p")

“兄弟”选择器

$("lable+input")//平级关系,找的是lable之后的第一个input

筛选器

$("td:first") //last
$("td:eq(n)") //找第n个
$("td:odd") //下标为奇数的元素(下标0开始) //even下标为偶数的元素
$("td:gt(n)")//下标大于n的元素 //lt 小于
$("td:not(td:gt(n))")取反

属性选择器

$("input[name]"); //选中有name属性的标签
$("input[value=lol]"); //匹配value值为lol的标签
$("input[value^=l]"); //value值以l开头的标签
$("input[type=button][name=aaa]")同时匹配多个属性type是button且name是aaa
$("td:nth-child(n)");//用于选择表格的第几列
$("td:nth-child(1)");表格第一列 nth换成first(第一个)同理last

表单选择器

<input type="button">

$(":button");//找到所有button
$("tbody1 :checkbox:checked"); //找到tbody1中被勾选的复选框

标签操作

修改内容

.text();//获取标签内容,功能等价于:innerText;不带参数是获取
.text(新内容);//修改内容为新的内容

$("p.first").text(); //获取标签内容
$("p.first").text("hehehehe");//替换标签内容

.html();//获取, 功能等价innerHTML
.html("<p>hello</p>");//替换

$("p.first").html(); //获取标签内容
$("p.first").html("<p>helllo</p>");//替换标签内容

.empty(); //清空内容,不删除标签
.remove(); //删除整个标签

$("input:first").remove(); //删除第一个input标签

修改属性

普通属性

.prop("属性名");
.prop("属性名","新值");

$("tbody1 :checkbox").prop("checkbox",true);

特殊属性

文本框的value

.val();
$("input").val();//获取
$("input").val("新值");//修改

样式style //操作标签的样式
.addClass("样式"); //添加样式，推荐使用
.removeClass("样式");
$("p").addClass("a");
$("p").addClass("b");
$("p").addClass("a b");

换样式
$("p:first").css("background-color","red");

显示/隐藏标签

$("p:first").hide();//将标签隐藏,实际上通过样式display:none实现
$("p:first").show();//显示
$("p:first").hide(2000);//花2s隐藏起来(动画效果),同show
$("p:first").toggle();//切换显示,隐藏效果

标签尺寸

.width();
.innerWidth();//宽度=内容+内间距(padding)
.outerWidth();//宽度=内容+内间距(padding)+边框
$("div:first").width(); //div中内容的宽度

.height();同上

$(window) //将原始的window对象包装成了jquary的window对象
$(window).width(); //浏览器页面宽高
$(window).height();

创建标签

$("<input>").prop("type","button").val("按键").appendTo("body");
$("<input type='button' value='按钮'>").appendTo("body");

添加事件

$(选择器).事件方法(匿名函数);

<script>
$("#btn1").click(
    function(){
        console.log("ok");
    }
)
</script> //注意放在body中最后面

要注意整个html的解析顺序,script如果放在head部分,执行时会找不到body中尚未解析的标签

$("#btn1").mouseover(function(){
    //在匿名函数内直接使用this,代表触发样式的标签
    //$(this)把原始对象变为jquery对象,可以调用jquery的方法
    //如果用到事件对象,只需要在匿名函数上添加e
    $(this).addClass("bigger");

});