Web之二 jQuery

最新推荐文章于 2020-01-15 09:30:42 发布

icanhaha

最新推荐文章于 2020-01-15 09:30:42 发布

阅读量498

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/icanhaha/article/details/50730402

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、jQuery选择器

1、基本选择器

1）改变 id 为 one 的元素

$("#one").css("background", "#ffbbaa");

2）改变 class 为 mini 的所有元素

$(".mini").css("background", "#ffbbaa");

3）改变元素名为 <div> 的所有元素

$("div").css("background", "#ffbbaa");

4）改变所有元素

$("*").css("background", "#ffbbaa");

5）改变所有的<span>元素和 id 为 two 的元素

$("span,#two").css("background", "#ffbbaa");

2、层次选择器

1）改变 <body> 内所有 <div>

$("body div").css("background","#ffbbaa");

2）改变 <body> 内子 <div> (不包含孙子元素)

$("body > div").css("background","#ffbbaa");

3）改变 id 为 one 的下一个 <div>

$("#one + div").css("background","#ffbbaa");

4）改变 id 为 two 的元素后面的所有兄弟<div>的元素

$("#two ~ div").css("background","#ffbbaa");

5）改变 id 为 two 的元素所有 <div> 兄弟元素

$("#two").siblings("div").css("background","#ffbbaa");

6）选择 id 为 one 的下一个 span 元素

$("#one").nextAll("span:first").css("background", "#ffbbaa");

7）选择 id 为 two 的元素前边的所有的 div 兄弟元素

$("#two").prevAll("div").css("background", "#ffbbaa");

3、过滤选择器
3.1 基本过滤选择器

1）改变第一个 div 元素

$("div:first").css("background", "#ffbbaa");

2）改变最后一个 div 元素

$("div:last").css("background", "#ffbbaa");

3）改变class不为 one 的所有 div 元素

$("div:not(.one)").css("background", "#ffbbaa");

4）改变索引值为偶数的 div 元素

$("div:even").css("background", "#ffbbaa");

5）改变索引值为奇数的 div 元素

$("div:odd").css("background", "#ffbbaa");

6）改变索引值为大于 3 的 div 元素

$("div:gt(3)").css("background", "#ffbbaa");

7）改变索引值为等于 3 的 div 元素

$("div:eq(3)").css("background", "#ffbbaa");

8）改变索引值为小于 3 的 div 元素

$("div:lt(3)").css("background", "#ffbbaa");

9）改变所有的标题元素

$(":header").css("background", "#ffbbaa");

10）改变当前正在执行动画的所有元素

$(":animated").css("background", "#ffbbaa");

11）选择 id 为 two 的下一个 span 元素

$("#two").nextAll("span:first").css("background", "#ffbbaa");

3.2内容过滤选择器

1）改变含有文本 ‘di’ 的 div 元素

$("div:contains('di')").css("background", "#ffbbaa");

2）改变不包含子元素(或者文本元素) 的 div 空元素

$("div:empty").css("background", "#ffbbaa");

3）改变含有 class 为 mini 元素的 div 元素

$("div:has(.mini)").css("background", "#ffbbaa");

4）改变含有子元素(或者文本元素)的div元素

$("div:parent").css("background", "#ffbbaa");

3.3可见性过滤选择器

1）改变所有可见的div元素的背景色为 # bbffaa

$("div:visible").css("background", "#ffbbaa");

2）选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 # bbffaa

$("div:visible").css("background", "#ffbbaa");

3.4属性过滤选择器

1）含有属性title 的div元素.

$("div[title]").css("background", "#ffbbaa");

2）属性title值等于"test"的div元素.

$("div[title='test']").css("background", "#ffbbaa");

3）属性title值不等于"test"的div元素(没有属性title的也将被选中).

$("div[tilte!='test']").css("background", "#ffbbaa");

4）属性title值以"te"开始的div元素.

$("div[title^='te']").css("background", "#ffbbaa");

5）属性title值以"est"结束的div元素.

$("div[title$='est']").css("background", "#ffbbaa");

6）属性title值含有"es"的div元素.

$("div[title*='es']").css("background", "#ffbbaa");

7）选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素.

$("div[id][title*='es']").css("background", "#ffbbaa");

8）选取含有 title 属性值, 且title 属性值不等于 test 的 div 元素.

$("div[title][title!='test']").css("background", "#ffbbaa");

3.5子元素过滤选择器

1）每个class为one的div父元素下的第2个子元素.

$("div.one :nth-child(2)").css("background", "#ffbbaa");

2）每个class为one的div父元素下的第一个子元素

$("div.one :first-child").css("background", "#ffbbaa");

3）每个class为one的div父元素下的最后一个子元素

$("div.one :last-child").css("background", "#ffbbaa");

4）如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素

$("div.one :only-child").css("background", "#ffbbaa");

3.6表单对象属性过滤选择器

1）改变表单内可用 <input> 元素的值

$(":input:enabled").val("hello");

改变表单内可用 <input type="text"> 元素的值

$(":text:enabled").val("hello");

2）改变表单内不可用 <input> 元素的值

$(":input:disabled").val("bye");

3）属性获取多选框选中的个数

$(":checkbox[name='news']:checked").length;

4）获取多选框的内容

$(":checkbox[name='newsletter']:checked").each(function(){

alert(this.value);

});

二、jQuery操作DOM元素

1.attr() 控制元素的属性

//设置href属性
$("#a1").attr("href" , "http://www.baidu.com");
//获取href属性
var $url = $("#a1").attr("href");
//设置img的src
$("#warnImg").attr("src", "app/images/preview/rain-red.png");

2.html()、text() 操作元素的内容

var $content = "<b>唉，我又变胖了！</b>";
$("#html").html($content);
$("#text").text($content);
注：html()方法可以获取元素的HTML内容，因此，原文中的格式代码也被一起获取，而text()方法只是获取元素中的文本内容，并不包含HTML格式代码

3.css()、addClass() 操作元素的样式

//设置单个样式
$("#content").css("color","white");
//设置多个样式
$("#content").css({"background-color":"red","color":"white"});
//直接添加样式
.bg{
	background-color:red;
}
.white{
	color:white;
}
$("#content").addClass("bg white");

4.removeAttr(name)、removeClass(class)移除属性和样式

$("#content").removeAttr("href");
$("#content").removeClass("blue");

5 each() 遍历元素

<span class="green">香蕉</span>
<span class="green">桃子</span>
<span class="green">葡萄</span>
<span class="green">荔枝</span>

<script type="text/javascript">
	$("span").each(function (index) {
		if (index == 2) {
			this.attr("class", "red");
		}
	});
</script>

6.remove() empty() 删除元素

remove()方法删除所选元素本身和子元素 empty()方法则只删除所选元素的子元素

<span class="green">香蕉</span>
<span class="red">桃子</span>
<span class="green">葡萄</span>
<span class="red">荔枝</span>

<script type="text/javascript">
	//删除类名为red的两个元素
	$("span").remove(".red");
	//删除span下的元素
	$("span").empty();
</script>

7 append()方法追加内容

function rethtml() {
	var $html = "<div id='test' title='hi'>我是调用函数创建的</div>"
	return $html;
}
$("body").append(rethtml());

8 appendTo() 向被选元素内插入内容

$(content).appendTo(selector)
var $html = "<span class='red'>小青蛙</span>"
$($html).appendTo("div");

9 before() after() 在元素前后插入内容

var $html = "<span class='red'>兄弟。</span>"
$("span").before($html);
$("span").after($html);

10 clone() 复制元素

$("body").append($("span").clone());

11 replaceWith() replaceAll() 替换元素或元素中的内容

$(selector).replaceWith(content)
$(content).replaceAll(selector)
var $html = "<span class='red' title='hi'>我是土豪</span>";
$($html).replaceAll($(".green"));
$(".green").replaceWith($html);

12 wrap()和wrapInner() 包裹元素和内容

$(selector).wrap(wrapper) //包裹元素本身
$(selector).wrapInner(wrapper) //包裹元素的内容

<span class="red" title='hi'>我的身体有点歪</span>
<script type="text/javascript">
	$(".red").wrapInner("<i></i>");
	$(".red").wrap("<div style='border:solid 1px'></div>");
</script>

三、jQuery事件

1 ready()

$(document).ready(function(){}) 
$(function(){});
类似于：
window.onload = function(){}

注：前者只要页面的DOM结构加载后便触发，而后者必须在页面全部元素加载成功才触发，ready()可以写多个，按顺序执行。

2 bind() 绑定元素的事件

<input id="btntest" type="button" value="点击或移出就不可用了" />
$("#btntest").bind("click", function () {
	$(this).attr("disabled", "true");
})

3 hover() 切换事件

	$("div").hover(
	function () {
		$(this).addClass("orange");
	},
	function () {
		$(this).removeClass("orange")
	})

4 toggle() 1.绑定多个函数,依次执行 2.实现元素显示与隐藏的切换

<input id="btntest" type="button" value="点一下我" />
<div>我是动态显示的</div>

//1.绑定多个函数，在点击div时，依次执行
$(function () {
	$("div").toggle(function(){
		$(this).html("苹果");
	},function(){
		$(this).html("荔枝");
	},function(){
		$(this).html("香蕉");
	})
});
			
//2.每次点击btn，div显示与隐藏切换			
$("#btntest").bind("click", function () {
	$("div").toggle()
})

5 unbind() 移除元素绑定的事件

$("#btntest").unbind("dblclick");
//若不设置参数，则移除所有事件
 $("#btntest").unbind();

6 one() 绑定元素的一次性事件

//div的click事件只执行一次
("div").one("click", function () {
	intI++;
})

7 trigger() 手动触发指定的事件

$("div").bind("click", function () {
	alert("hello");
});
//执行本行代码，即会执行div的click事件
$("div").trigger("click");

8 focus() blur() 焦点事件

$("input")
.bind("focus", function () {
	$("div").html("请输入您的姓名！");
})
.bind("blur", function () {
	if ($(this).val().length == 0)
		$("div").html("你的名称不能为空！");
})

9 change() 元素值发生改变时

<select id="seltest">
	<option value="葡萄">葡萄</option>
	<option value="苹果">苹果</option>
	<option value="荔枝">荔枝</option>
	<option value="香焦">香焦</option>
</select>

<script type="text/javascript">
	$(function () {
		$("seltest").bind("change", function () {
			if ($(this).val() == "苹果")
				$(this).css("background-color", "red");
			else
				$(this).css("background-color", "green");
		})
	});
</script>

icanhaha

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web之二 jQuery

一、jQuery选择器1、基本选择器 1）改变 id 为 one 的元素$("#one").css("background", "#ffbbaa");2）改变 class 为 mini 的所有元素$(".mini").css("background", "#ffbbaa");3）改变元素名为的所有元素$("div").css("background"
复制链接

扫一扫