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

最新推荐文章于 2021-12-10 16:24:06 发布

weixin_39952031

最新推荐文章于 2021-12-10 16:24:06 发布

阅读量928

点赞数

文章标签： jquery 给类名元素添加行内样式 jquery找最后一个兄弟li元素添加

一.jQuery的优点

（1）提供了强大的功能函数 （2）解决浏览器兼容性问题 （3）实现丰富的 UI 和插件 （4）纠正错误的脚本知识

二.jQuery的核心

1.用法

用之前先引入jquery的文件

2.核心

三.DOM 对象和 jQuery 包装集对象

1.dom对象

  代码示例:    
 <body>
	<div id="mydiv"></div>
</body>

/*Dom对象*/
		var divDom = document.getElementById("mydiv");
		console.log(divDom);

2.jquery获取对象

/*Jquery包装集对象*/
		var divJquery = $("#mydiv");
		console.log(divJquery);

3.dom对象转jquery对象

var domToJquery = $(divDom);

4.jquery对象转dom对象

//第一种方式
var jqueryToDom = divJquery[0];

//第二种方式
// each() Jquery方法，遍历方法
		divJquery.each(function(index,element){ //两个参数一般不写
			console.log(index);
			console.log("--------");
			console.log(element);// dom对象
			console.log(this); // dom对象
		});

四.jquery的选择器

1.基础选择器(必须掌握前三种)

1、ID选择器 格式：$("#id属性值") 获取指定id值的对象(只会获取到第一个id的值)2、类选择器 格式：$(".class属性值") 获取所有指定class属性值的元素3、元素选择器 格式：$("元素名/标签名") 获取所有指定标签名的元素 4、通用选择器 格式：$("*") 获取所有的元素的对象 5、组合选择器 格式：$("选择器1,选择器2...")

代码示例:
<body>
  <div id="div1" class="test">div2</div>
  <div id="div1">div1</div>
 <div class="test">div3</div>
 <div>div4</div>
 <p class="test">这是一个P</p>
 <span class="test">这是一个span</span>
</body>

<script type="text/javascript">
		
		// id选择器
		var div1 = $("#div1");
		console.log(div1);
		
		// 类选择器
		var cls = $(".test");
		console.log(cls);
		
		// 元素选择器
		var divs = $("div");
		console.log(divs);
		
		// 通用选择器
		var all = $("*");
		console.log(all);
		
		
		// 组合选择器
		var group = $("#div1,span,.test");
		console.log(group);
		
</script>

2.层次选择器(了解)

1.后代选择器 ancestor descendant 格式: $("#parent div") 选择id为parent的元素的所有div元素
2.. 子代选择器 parent > child 格式:$("#parent>div") 选择id为parent的直接div子元素
3. 相邻选择器 prev + next 只会查询指定元素的下一个指定元素（只往下找一次元素） 格式:$(".blue + img") 选择css类为blue的下一个img元素
4. 同辈选择器 prev ~ sibling 格式:$(".blue ~ img") 选择css类为blue的之后的img元素

3.表单选择器

1.表单元素：文本框、密码框、单选框、复选框、文件域、隐藏域、文本域textarea、下拉框select
示例: var inputs = $( ":input"); // 表单选择器，所有表单元素(所有标签)
2. 非表单元素：div、span、p、h1~h6、img、a、table var inputs2 = $( "input"); //元素选择器(只选择元素名为input的元素)

4.过滤选择器

1:checked 选择所有被选中的元素
2:eq(index) 匹配指定下标的元素
3 :gt(index) 匹配下标大于指定值的所有元素
4 :odd 选择每个相隔的（奇数）元素
5 :even 选择每个相隔的（偶数）元素

<body>
爱好:<input type="checkbox" name="ufav" value="篮球" checked="checked"/>篮球
    <input type="checkbox" name="ufav" value="爬床"/>爬床
    <input type="checkbox" name="ufav" value="代码" checked="checked"/>代码
    <input type="checkbox" name="ufav" value="爬床1"/>爬床1
    <input type="checkbox" name="ufav" value="代码1" checked="checked"/>代码1<br />
</body>	

<script type="text/javascript">
           var checkboxs = $(":checkbox");
		checkboxs.each(function(){
			console.log(this);
			console.log(this.checked);//打印所有input
		});
		
		console.log("========

最低0.47元/天解锁文章

weixin_39952031

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery 给类名元素添加行内样式_JAVA学习之路~JQuery-Day28

一.jQuery的优点（1）提供了强大的功能函数（2）解决浏览器兼容性问题（3）实现丰富的 UI 和插件（4）纠正错误的脚本知识二.jQuery的核心1.用法用之前先引入jquery的文件2.核心三.DOM 对象和 jQuery 包装集对象1.dom对象代码示例: <body> <div id="mydiv"></div></body&g...
复制链接

扫一扫