摘要:关于选择器相关的笔记如下========================== jQuery的基本选择器=====================1. id —— $( ‘#id’ )2.class——$( ‘.class’ )3.元素——$(‘element’)4.所有元素——$( ‘*’ )5.页面中多个选择器 ——$(‘#id , .class , element’)=======
关于选择器相关的笔记如下
========================== jQuery的基本选择器=====================
1. id —— $( ‘#id’ )
2.class——$( ‘.class’ )
3.元素——$(‘element’)
4.所有元素——$( ‘*’ )
5.页面中多个选择器 ——$(‘#id , .class , element’)
========================== jQuery的层级选择器=====================
父亲下的所有子元素 $( ‘ father > child ‘ )
父亲下的所有后代元素 $( ‘ father child ‘ )
紧跟在prev后的next元素 $( ‘ prev + next ‘ )——同级的元素
在prev后所有的siblings元素 $( ‘ prev~ siblings ‘ ). //局限比较小
========================== jQuery的顺序选择器=====================
1. 顺序
$( ‘ :first ‘ ) 第一个元素
$( ‘ :last ‘ ) 最后一个元素
2.比较
$( ‘ :gt(x) ‘ ) 大于x 的元素
$( ‘ :lt(x) ‘ ) 小于x 的元素
$( ‘ :wq(x) ‘ ) 等于x 的元素
3.奇偶数 //0开始
$( ‘ : odd‘ ) 奇数顺序(对奇数行进行操作)
$( ‘ : even‘ ) 偶数顺序(对偶数行进行操作)
4.非
$( ‘ : not(selector)‘ ) 不是这个值的所有
========================== jQuery的内容选择器=====================
$ ( ‘: contains(text)’ ) ——匹配包含给定文本的元素
$ ( ‘ : has(selector)’ )——匹配包含特定选择器元素的元素
$ ( ‘ : empty ’ ) ——空元素
$ ( ‘: parent ‘ )——含有子元素或者文本的元素
========================== jQuery的属性选择器=====================
找什么样的元素?
这里所说的attribute和value都是html的标签中的内容
例如,如果type = button
则type是attribute,button是value
[ ]外面是标签的名字
$( ‘ [ 属性名 ] ‘ ) ——包含给定属性
$( ‘ [ attribute = value ] ‘ )——给定属性是某个特定值
$( ‘ [ attribute != value ] ‘ )——不含有属性 / 属性不等于特定值
$( ‘ [ attribute ^= value ] ‘ ) ——以特定值开始
$( ‘ [ attribute $= value ] ‘ )——以特定值结尾
$( ‘ [ attribute *= value ] ‘ )——包含某些值
$( ‘ attrSel[1] attrSell[2] attrSel[3] ‘ )——复合选择器,需要同时满足多个条件时使用
========================== jQuery的表单选择器=====================
$( ‘ : enabled ‘ ) —— 所有可用的input元素
$( ‘ : disabled ‘ ) ——所有禁用的input元素。//不可以被使用。input标签中有disabled
$( ‘ : selected ‘ ) —— 所有被选中的元素,针对于select元素
select标签嵌套option标签。option中默认被选中的就是<option selected> 针对下拉列表中的元素
$( ‘ : checked ‘ ) ——所有被选中的input元素
针对多选框。这个后面需要加【 .parent】才能找到内容,对其更改。
input标签,type = checkbox。
默认被选中,写一个checked
一个小的测试如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ基础语法</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('ul>li').css('list-style','none');
$('ul li').css('list-style','none');
$('label+input').css('height','50px');//同级紧跟着的元素,不怎么常用
$
})
</script>
<ul>
<li>1</li>
<li>2</li>
<div>
<li>nihao</li></div>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<form>
<label>姓名</label>
<input type = "">
</form>
</body>
</html>
批改老师:查无此人批改时间:2019-04-03 17:39:44
老师总结:完成的不错。jq比js简单很多,用心学,可以先代替js写页面。继续加油。