jQuery学习笔记

最新推荐文章于 2022-09-16 14:43:31 发布

RocMaster

最新推荐文章于 2022-09-16 14:43:31 发布

阅读量304

点赞数

分类专栏： java 文章标签： jquery

本文链接：https://blog.csdn.net/hello19888/article/details/50588541

版权

java 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、基础选择器

1）id：var str=$("#id").html();

2）element：var str=$("button").html();

3) .class：var str=$(".red").html();

4) *：$("div*").html("全部都是1");

5）多个：$("span,p").html("相同");

6）层次：$("div span").html("所有span元素");

7）child：$("div>span").html("第一层span元素");

8）prev+next：$("p+span").html("p下紧邻span元素");

9）prev+siblings：$("p~span").html("p同级下所有span元素");

2、过滤选择器

1）:first：$("li:first").css("color","red");//last

2）:eq(index)：$("li:eq(2)").css("color","red");

3）:contains(text)：$("li:contains('我是')").css("color”,”red“);

4）:has(selector)：$("li:has('p')").css("color","red");

5）:hidden:var str=$("p:hidden").html();//visible类似

6）[attribute=value]：$("li[title='我喜欢']").css("color","red");//!=

7）[attribute*=value]：$("li[title*='最']").css("color","red");//所有’最‘选中

8）:first-child：$("li:first-child").css("color","red");//所有li第一个子元素选中(last-child)

3、表单选择器

<form id="frmTest" action="#">
<input type="text" value="Input Button" /><br />
<select>
<option>Option</option>
</select><br />
<textarea rows="3" cols="8"></textarea><br />
<button>
Button</button><br />
</form>

1）:inupt：$("#frmTest :input").addClass("bg_blue");//获取所有表单：input,select,textarea,button;注意空格

2）:text：$("#frmTest :text").addClass("bg_blue");//获取所有单行文本输入：input；type=:password、:radio、:checkbox、input:submit、:image、:button、checked(所有选中)

3）:selected： var $txtOpt = $("#frmTest :selected").text();

4、操作DOM元素

1）attr()：var url=$("#a1").attr("href");//获取href属性值

2) var $content = "<b>唉，我又变胖了！</b>";
$("#html").html($content);//可获取原文格式
$("#text").text($content);//只是获取内容

3) addClass()和.css： $("#content").addClass("red"); $("#content").css({"background-color":"red"});

4）removeAttr()：$("#a1").removeAttr("href");

5）append()： $("body").append(str);

var $html = "<span class='red'>小青蛙</span>"

6） appendTo()：$( $html ).appendTo(div);

7）before：$("#.green").after($html);//before前面

8） $("body").append($("span").clone())

9）replaceWith：$(".green").replaceWith($html);

10）遍历：<span class="green">香蕉</span><span class="red">橘子</span><span>苹果</span>

$("span").each(function(index){

if(index==1){

$(this).addClass("focus");

}

});

11 ）remove：$("span").remove(".red");$("span").empty();

5、事件与应用

1）初始加载：$(document).ready(function(){

});

2）绑定事件： $("#btntest").bind("click", function () {
$(this).attr("disabled", "true");
})

3）移入移除：$("div").hover(
function () {
$(this).addClass("orange");
},
function () {
$(this).removeClass("orange")
})

4）单击事件：var intI = 0;
$("div").one("click", function () {
intI++;
$(this).css("font-size", intI + "px");
})

5）鼠标焦点：$("#txtest").bind("focus", function () {
$("div").html("请输入您的姓名！");
})
$("#txtest").bind("blur", function () {
if ($(this).val().length == 0)
$("div").html("你的名称不能为空！");
})

6）change： $("#seltest").bind("change", function () {
if ($(this).val() == "苹果")
$(this).css("background-color", "red");
else
$(this).css("background-color", "green");
})