jquery 给类名元素添加行内样式_学Jquery的第一天

1.创建一个div

<body>
   <div id="mydiv"></div>
</body>
<script src="js/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

2. Dom对象

var divDom = document.getElementById("mydiv");
console.log(divDom);

3.Jquery包装集对象

var divJquery = $("#mydiv");
console.log(divJquery);
console.log("====Dom对象与Jquery对象的互相转换====");
var domToJquery = $(divDom);
console.log(domToJquery);
var jqueryToDom = divJquery[0];
console.log(jqueryToDom);

4.each() Jquery方法，遍历方法

divJquery.each(function(index,element){
 console.log(index);
 console.log("--------");
 console.log(element);// dom对象
 console.log(this); // dom对象
});

一、选择器

（一）、基础选择器

1、ID选择器

格式：$("#id属性值")

获取指定id值的对象(只会获取到第一个id的值)

1.1 id选择器

var div1

(

"#div1"

);

console

.log(

div1

);

2、类选择器

格式：$(".class属性值")

获取所有指定class属性值的元素

2.1 类选择器例：

var cls

(

".test"

);

console

.log(

cls

);

3、元素选择器

格式：$("元素名/标签名")

获取所有指定标签名的元素

3.1 元素选择器例：

var divs

(

"div"

);

console

.log(

divs

);

4、通用选择器

格式：$("*")

获取所有的元素的对象

4.1 元素选择器例：

var divs

(

"div"

);

console

.log(

divs

);

5、组合选择器例：

格式：$("选择器1,选择器2...")

5.1组合选择器例：
var group = $("#div1,span,.test");
console.log(group);

（二）层次选择器

1.后代选择器

ancestor descendant $("#parent div")选择id为parent的元素的所有div元素

1.1例：

var houdai = $("#parent div");

2.子代选择器

parent > child $("#parent>div")选择id为parent的直接div子元素

2.1例：

var zidai = $("#parent > div");
zidai.each(function(){
 console.log(this);
 });
3.相邻选择器

prev + next $(".blue + img")选择css类为blue的下一个img元素

3.1例：

var xl = $("#child + p");
xl.each(function(){
 console.log(this);
});

4.同辈选择器

prev ~ sibling $(".blue ~ img")选择css类为blue的之后的img元素

4.1例：

var tb = $(".gray ~ img");
tb.each(function(){
 console.log(this);
});

（三）、过滤选择器

1.:checked 选择所有被选中的元素

var checkboxs = $(":checkbox");
checkboxs.each(function(){
 console.log(this);
 console.log(this.checked);
});
var ckeckeds = $(":checkbox:checked");
ckeckeds.each(function(){
 console.log(this);
});

2.:eq(index)匹配指定下标的元素

console.log("==============");
var second = $(":checkbox:eq(1)")
second.each(function(){
 console.log(this);
});

3.:gt(index) 匹配下标大于指定值的所有元素

console.log("==============");
var gtfirst = $(":checkbox:gt(0)")
gtfirst.each(function(){
 console.log(this);
});
4.:odd

选择每个相隔的（奇数）元素

console.log("==============");
var odds= $(":checkbox:odd")
odds.each(function(){
 console.log(this);
});

5.:even 选择每个相隔的（偶数）元素

console.log("==============");
var evens= $(":checkbox:even")
evens.each(function(){
 console.log(this);
});

三、jquery DOM操作

(一)、操作元素的属性

1.获取属性的值

attr(属性名称) 获取指定的属性值，操作 checkbox 时选中返回 checked，没有选中返回

undefined。 attr('checked') attr('name')

prop(属性名称) 获取具有true和false两个属性的属性值 prop('checked')

<script type="text/javascript">
   // 获取元素的属性
   var hef = $("a").attr("href");
   console.log(hef);
   var hef2 = $("a").prop("href");
   console.log(hef2);
   
   var aa1 = $("a").attr("aa");
   console.log(aa1);
   var aa2 = $("a").prop("aa");
   console.log(aa2);
   
   // 获取复选框的选中状态
   var ck1 = $("#ck1").attr("checked");
   var ck2 = $("#ck1").prop("checked");
   console.log(ck1);
   console.log(ck2);
   
   var ck3 = $("#ck2").attr("checked");
   var ck4 = $("#ck2").prop("checked");
   console.log(ck3);
   console.log(ck4);

   // 设置属性的值
   $("a").attr("href","http://www.shsxt.com");
   
   $("#ck1").prop("checked",false);
   //$("#ck2").prop("checked",true);
   $("#ck2").attr("checked","checked");
   
   $("a").attr("aa","aabbcc"); 
   //移除属性
   $("a").removeAttr("href");
   
</script>

2.设置属性的值

attr(属性名称,属性值);

rop(属性名称,属性值);

<style type="text/css">
      div{
          padding: 8px;
          width: 180px;
      }
      .blue{
         background: blue;
      }
      .red {
         background: red;
      }
      .larger{
         font-size: 30px;
         background: pink;
      }
      .green {
         background : green;
      }
      
   </style>
</head>
<body>
   <h3>css()方法设置元素样式</h3>
   <div id="conBlue" class="blue larger">天蓝色</div>
       <div id="conRed">大红色</div>
       <div id="remove" class="blue larger">天蓝色</div>
</body>
<script src="js/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
   /* attr */
   // 设置元素的class属性（如果属性不存在，则添加属性）
   $("#conRed").attr("class","red");
   
   // 如果属性存在，则修改属性值
   $("#conBlue").attr("class","green");
   
   // addClass() 添加样式，原来的样式保留，如果出现相同的样式，以后面定义样式为准
   $("#conRed").addClass("larger");
   
   // css() 
   // 添加一个具体样式  css("样式名","样式值")
   $("#remove").css("color","red");
   // 同时添加多个具体的样式名 css({"样式名":"样式值","样式名":"样式值"})
   $("#remove").css({"color":"red","font-family":"楷体","background-color":"gray"})
   
   
</script>

3.移除属性

removeAttr(属性名) 移除指定的属性 removeAttr('checked')

如果属性的返回值是true或false（checked、selected、disabled），使用prop()方式；其他属性使用attr();

<body>
   <h3><span>html()和text()方法设置元素内容</span></h3>
   <div id="html"></div>
       <div id="text"></div>
       <input type="text" name="uname" value="oop" />
       <div id="getHtml" >
           这是一个Div
           <span>span标签</span>
           <p>这是P</p>
       </div>
</body>
<script src="js/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
   // 设置（非表单）元素的内容
   // 包含的html标签
   $("#html").html("<h3>上海</h3>"); 
   // $("#html").html("上海");
   // 不包含html标签,只能设置纯文本
   $("#text").text("<h3>上海</h3>"); 
   $("#text").text("上海");
   
   // 设置表单元素的值
   $("input").val("Hello");
   
   // 获取元素的值
   console.log($("#getHtml").html());
   console.log($("#getHtml").text());
   
   console.log($("input").val());
   
</script>

(二)、操作元素的样式

1.操作元素样式的方法有哪些？

1）attr(“class”) 获取class属性的值，即样式名称

2）attr(“class”,”样式名”)

修改class属性的值，修改样式

3）addClass(“样式名”)

添加样式名称

4）css() 添加具体的样式

removeClass(class)

移除样式名称

2.元素样式例：

2.1设置元素的class属性（如果属性不存在，则添加属性）$(

"#conRed"

).attr(

"class"

"red"

);

2.2如果属性存在，则修改属性值$(

"#conBlue"

).attr(

"class"

"green"

);

2.3 addClass() 添加样式，原来的样式保留，如果出现相同的样式，以后面定义样式为准$(

"#conRed"

).addClass(

"larger"

);

2.4 css()

添加一个具体样式 css("样式名","样式值")$(

"#remove"

).css(

"color"

"red"

);

2.5同时添加多个具体的样式名 css({"样式名":"样式值","样式名":"样式值"})$(

"#remove"

).css({

"color"

"red"

"font-family"

"楷体"

"background-color"

"gray"

})；

（三）、操作元素的内容

1.操作元素内容的方法有以下几种

html() 获取元素的html内容

html("html,内容") 设定元素的html内容

text() 获取元素的文本内容，不包含html

text("text 内容") 设置元素的文本内容，不包含html

val() 获取元素value值

val(‘值’) 设定元素的value值

<script type="text/javascript">
		// 设置（非表单）元素的内容
		// 包含的html标签
		$("#html").html("<h3>上海</h3>"); 
		// $("#html").html("上海");
		// 不包含html标签,只能设置纯文本
		$("#text").text("<h3>上海</h3>"); 
		$("#text").text("上海");
		// 设置表单元素的值
		$("input").val("Hello");
		// 获取元素的值
		console.log($("#getHtml").html());
		console.log($("#getHtml").text());
		console.log($("input").val());
	</script>

（四）、创建元素

$("元素内容")

添加元素

prepend(content) 在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。

$(content).prependTo(selector) 把 content 元素或内容加入 selector 元素开头

append(content) 在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。

$(content).appendTo(selector) 把 content元素或内容插入selector 元素内，默认是在尾部

before()

在元素前插入指定的元素或内容:$(selector).before(content)

after()

在元素后插入指定的元素或内容:$(selector).after(content)

<script type="text/javascript">
		// 父元素
		var parent = $("#parent");
		// 要追加的内容 
		var span = $('<span class="pink">女神</span>');
		// 前追加 （追加的都是子元素）
		// prepend(content)
		 parent.prepend(span);
		// $(content).prependTo(selector)
		$(".blue").prependTo(parent);
		
		// 后追加（追加的都是子元素）
		var singer = '<span class="green">歌手</span>';
		// append(content)
		// parent.append(singer);
		// $(content).appendTo(selector)
		$(singer).appendTo(parent);
		
		
		// 插入同级元素
		// $(selector).before(content)
		$("#xxr").before("<div class='blue'><span>小奶狗</span></div>");
		// $(selector).after(content)
		$("#xxr").after("<div class='red'><span>老腊肉</span></div>");
		
		
	</script>

（五）、删除元素

remove() 删除所选元素或指定的子元素，包括整个标签和内容一起删。

empty() 清空所选元素的内容

<script type="text/javascript">
		// remove()
		$(".green").remove();
		
		// empty()
		$(".blue").empty();
	</script>

（六）、ready事件

1.ready()加载事件

ready()类似于 onLoad()事件

ready()可以写多个，按顺序执行

$(document).ready(function(){})等价于$(function(){})

2. onload与ready()的区别：

2.1 ready()在DOM结构解析完毕后即执行

2.2 onload在DOM结构解析完毕，并且外部资源加载完毕后执行

<script type="text/javascript">
			 //js的onlooad事件
			indow.onload = function(){
				var mydiv = $("#mydiv");
				console.log(mydiv);
			}
			
			// jquery的ready事件
			$(document).ready(function(){
				var mydiv = $("#mydiv");
				console.log(mydiv);
			});
			
			$(function(){
				var mydiv = $("#mydiv");
				console.log(mydiv);
			});
		</script>

（七）、事件

1.确定为哪些元素绑定事件

获取元素

2.绑定什么事件（事件类型）

第一个参数：事件的类型

3.相应事件触发的，执行的操作

第二个参数：函数

<script type="text/javascript">
		/*绑定简单事件*/
		// js绑定事件
		document.getElementById("btn").onclick = function(){
			alert('这是个按钮。。。');
		};	
		// bind()绑定事件
		$("#btn").bind("click",function(){
			alert('这是个按钮。。。');
		});
		
		// 直接绑定事件
		$("#btn").click(function(){
			alert('这是个按钮。。。');
		});
	
		/*绑定多个事件*/
		// 聚焦失焦事件
		// 方式一：
		$("#txt").focus(function(){
			// 聚焦时清空文本框
			$("#txt").val("");
		}).blur(function(){
			$("#txt").val("你好");
		});
		
		// 多个事件绑定一种行为
		$("#txt").bind("focus blur",function(){
			console.log("。。。");
		});
		
		$("#txt").bind("focus",function(){
			console.log("aaa");
		}).bind("blur",function(){
			console.log("bbb");
		});
		
		$("#txt").bind({
			focus:function(){
				console.log("链式编程1");
			},
			blur:function(){
				console.log("链式编程2");
			}
		});
		
	</script>

jquery 给类名元素添加行内样式_学Jquery的第一天

一、选择器

继续阅读

jquery 当页面图片加载之后_jquery笔记

jquery 当页面图片加载之后_JQuery选择器+DOM操作+事件+DOM与JQuery对象间的转化

jquery 移动到对应元素_文章文档标题自动生成导航jQuery小插件titleNav.js

jquery 给类名元素添加行内样式_页面中常用样式及解决办法

jquery 给类名元素添加行内样式_Selenium元素定位不到？JS注入轻松搞定！

jquery 给类名元素添加行内样式_element UI table组件修改单独行/列样式

jquery 给类名元素添加行内样式_JAVA学习之路~JQuery-Day28

jquery 字符串查找_JQuery、Vue等考点

jquery 元素第二个_Web前端之jQuery

jquery csv转化为数组_什么是jQuery？什么是Jquery？为什么要使用Jquery？回顾javascript

jquery 判断是否有类名_jQuery简单小结(1)