您的位置 首页 php

PHP学习jQuery笔记(1)——关于选择器

只是学习笔记,存在错误也不奇怪,欢迎指错,进行交流学习!!!

jQuery 是JavaScript扩展库,继承了HTML, css ,Java script ,DOM,和Ajax等功能;

下载:=>

1,官网:

2,Github:

压缩版:去掉了代码的注释和代码样式,这样的文件体积很小,加载所有的宽带更少,特别适合线上环境使用;

未压缩版:保留了代码注释和代码样式,方便阅读源码,适合开发环境使用

引入:<script type=”text/JavaScript” src=”jQuery文件路径”>

优化原则:

1,将CSS文件在页面的头部引入(<head></head>);

2,将js文件在页面尾部引入(</body>之前);

语法:=>

基础:

基本语法:->逻辑:先获取HTML元素,然后再执行操作;

->$(‘选择器’).动作:$()jQuery对象;

文档就绪:$(document).ready(匿名函数声明方法 function (){//jQuery代码});

简写方式:$(匿名函数function(){//jQuery代码});

<body>

//引入JS文件

<script type=”text/javascript” src=”../../../jquery-3.3.1.min.js”></script>

//编写JS代码

<script type=”text/javascript”>

//就绪函数

$(document).ready(function() {

console.log(‘准备就绪!’);

});

//就绪函数简写方式

$(function() {

console.log(‘简写方式就绪!’);

})

</script>

</body>

——————————————————————-

选择器:=>

->基本选择器:

通配选择器:$(‘*’).action();

代码演示:=>

<body>

<div>层标记</div>

<p>段落标记</p>

<script type=”text/javascript” src=”../../../jquery-3.3.1.min.js”></script>

<script type=”text/javascript”>

//就绪函数简写方式

$(function() {

//通配选择器

//css(样式名,样式值)

$(‘*’).css(‘color’, ‘red’);

})

</script>

标签选择器:$(‘HTML标签’).action();

ID选择器:$(‘#ID名称’).action();

类选择器:$(‘.类名称’).action();

群组选择器:$(‘选择器1,选择器2,…’).action();

代码演示:=>

<body>

<div>层标签</div>

<p class=”a” id=”p1″>段落1</p>

<p class=”a”>段落2</p>

<script type=”text/javascript” src=”../../../jquery-3.3.1.min.js”></script>

<script type=”text/javascript”>

//就绪函数简写方式

$(function() {

// 标签选择器

$(‘div’).css(‘color’, ‘red’);

//类选择器

$(‘.a’).css(‘background-color’, ‘#DDCCFF’);

//ID选择器

$(‘#p1’).css(‘color’, ‘green’);

//群组选择器

$(‘div,#p1’).css(‘border’, ‘2px solid blue’);

})

</script>

</body>

————————————————–

->层次选择器:

后代选择器(空格分隔):$(‘选择器1 选择器2 …’)action();

子代选择器(>分隔):$(‘选择器1>选择器2’).action();

兄弟选择器(+分隔):$(‘选择器1+选择器2’).action();兄弟选择器表示当前节点的下一个兄弟;

泛兄弟选择器(~分隔):$(‘prev~next’).action();表示当前兄弟节点的下面所有的兄弟;

代码演示:=>

<body>

<div>

<p>段落1</p>

<p>段落2</p>

<span>

<p>段落3</p>

<p>段落4</p>

</span>

<p>段落5</p>

<p>段落6</p>

</div>

<script type=”text/javascript” src=”../../../jquery-3.3.1.min.js”></script>

<script type=”text/javascript”>

//就绪函数简写方式

$(function() {

// 后代选择器

$(‘div p’).css(‘color’, ‘red’);

//子代选择器

$(‘div>p’).css(‘background-color’, ‘#FFDDAA’);

//兄弟选择器

$(‘span+p’).css(‘font-style’, ‘italic’);

//泛兄弟选择器

$(‘span~p’).css(‘font-style’, ‘italic’);

})

</script>

</body>

————————————————–

->过滤选择器:

获取第一个元素(first):$(‘HTML标签:first’).action();

$(‘HTML标签’).first().action();

获取最后一个元素(last):$(‘HTML标签:last’).action();

$(‘HTML标签’).last().action();

获取指定索引的元素(eq):$(‘HTML标签:eq(索引)’).action();

$(‘HTML标签’).eq(索引).action();

获取小于索引的元素(lt):$(‘HTML标签:lt(索引)’).action();

获取大于索引的元素(gt):$(‘HTML标签:gt(索引)’).action();

代码演示:=>

<body>

<ul>

<li>[0]标题1</li>

<li>[1]标题2</li>

<li>[2]标题3</li>

<li>[3]标题4</li>

<li>[4]标题5</li>

<li>[5]标题6</li>

</ul>

<script type=”text/javascript” src=”../../../jquery-3.3.1.min.js”></script>

<script type=”text/javascript”>

//就绪函数简写方式

$(function() {

//获取第一个元素

$(‘li:first’).css(‘color’, ‘red’);

$(‘li’).first().css(‘border’, ‘2px solid pink’);

//获取最后一个元素

$(‘li:last’).css(‘color’, ‘green’);

$(‘li’).last().css(‘border’, ‘2px solid blue’);

//获取指定索引的元素

$(‘li:eq(2)’).css(‘font-size’, ’20px’);

$(‘li’).eq(2).css(‘border’, ‘2px solid blue’);

//获取小于2的元素

$(‘li:lt(2)’).css(‘background-color’, ‘#AABBCC’);

//获取索引大于2的元素

$(‘li:gt(2)’).css(‘background-color’, ‘#CCDDEE’);

});

</script>

</body>

———————————————————————-

奇数选择器(odd):$(‘HTML标签:odd’).action();

偶数选择器(even):$(‘HTML标签:even’).action();

声明:奇数偶数针对索引而言的!!

代码演示:=>

<body>

<table>

<tr>

< td >ID</td>

<td>用户名</td>

<td>手机号</td>

</tr>

<tr>

<td>1</td>

<td>张三</td>

<td>13333333336</td>

</tr>

<tr>

<td>2</td>

<td>张三丰</td>

<td>13555555556</td>

</tr>

<tr>

<td>3</td>

<td>张无忌</td>

<td>13585555557</td>

</tr>

<tr>

<td>4</td>

<td>王五</td>

<td>13585595657</td>

</tr>

</table>

<script type=”text/javascript” src=”../../../jquery-3.3.1.min.js”></script>

<script type=”text/javascript”>

//就绪函数简写方式

$(function() {

// 获取奇数元素

$(‘tr:odd’).css(‘background-color’, ‘#BBCCFF’);

//获取偶数元素

$(‘tr:even’).css(‘background-color’, ‘#AAEEFF’);

})

</script>

</body>

—————————————————————-

排他选择器:

$(‘HTML标签:not(选择器)’).action();

$(‘HTML标签’).not(选择器).action();

代码演示:=>

<body>

<ul>

<li>[0]标题1</li>

<li id=”second”>[1]标题2</li>

<li>[2]标题3</li>

<li>[3]标题4</li>

<li>[4]标题5</li>

<li>[5]标题6</li>

</ul>

<script type=”text/javascript” src=”../../../jquery-3.3.1.min.js”></script>

<script type=”text/javascript”>

$(function() {

// 排他选择器

$(‘li:not(“#second”)’).css(‘background-color’, ‘#FFAABB’);

$(‘li’).not(“#second”).css(‘border’, ‘2px solid #AABBCC’);

});

</script>

</body>

————————————————–

->属性选择器:

$(‘[属性名称]’).action();获取包含属性名称的元素

$(‘[属性名称=属性值]’).action();获取属性名称等于属性值的元素;例:$(‘input[type=text]’).css();

$(‘[属性名称!=属性值]’).action();获取属性名称不等于属性值得元素

$(‘[属性名称^=属性值]’).action();获取开头等于属性值的元素(应用到正则表达式);例如:匹配https开头网址;

$(‘[属性名称$=属性值]’).action();获取结尾等于属性值的元素(应用到正则表达式);例如匹配以.html结尾的链

接;

代码演示:=>

<body>

<a href=”index.php”>首页</a>

<a href=””>百度</a>

<p>段落</p>

<script type=”text/javascript” src=”../../../jquery-3.3.1.min.js”></script>

<script type=”text/javascript”>

//就绪函数简写方式

$(function() {

//属性选择器

$(‘a[href]’).css(‘border’, ‘2px solid red’);

//属性名称=属性值的元素

$(‘[href=”index.php”]’).css(‘font-size’, ’40px’);

})

</script>

</body>

————————————————–

->孩子选择器:

:first-child 匹配第一个孩子;

:last-child 匹配最后一个孩子;

————————————————–

->表单相关的选择器:

:input

:text

:password

:file

:submit

————————————————–

属性操作:=>

attr():

获取(读)属性 $(选择器).attr(属性名称);

设置属性:

单个属性赋值:$(选择器).attr(属性名称,属性值);

多个属性赋值:$(选择器).attr({属性名称1:属性值1,属性名称2:属性值2;…});

删除属性:$(选择器).removeAttr(属性名称);

prop()

获取(读)属性 $(选择器).prop(属性名称);

设置属性: 单个属性赋值:$(选择器).prop(属性名称,属性值);

多个属性赋值:$(选择器).prop({属性名称1:属性值1,属性名称2:属性值2;…});

Prop 删除属性:$(选择

器).removeProp(属性名称);

代码演示:=>

<body>

<a href=”index.php”>首页</a>

<script type=”text/javascript” src=”../../../jquery-3.3.1.min.js”></script>

<script type=”text/javascript”>

//就绪函数简写方式

$(function() {

//获取a标签的href属性

console.log($(‘a’).attr(‘href’));

// 设置属性

$(‘a’).attr(‘href’, ‘

// 设置target属性,跳转页在新页面打开

$(‘a’).attr(‘target’, ‘_black’);

//设置多个属性

$(‘a[href]’).attr({

‘id’: ‘home’,

‘class’: ‘link’

})

//删除属性

$(‘a[href]’).removeAttr(‘class’);

})

</script>

</body>

声明:

attr()和prop()区别:

1,HTML标签本身固有的属性,建议使用prop()方法来操作,返回值是boolean型,HTML标签自定义的属性,建议使用

attr()方法操作,返回值是字符串或者是undefined;

——————————————————-

样式操作:=>

获取(读)样式:$(选择器).css(样式名称);

设置样式:写单个样式:$(‘选择器’).css(‘样式名称’,’样式值’);

写多个样式:$(‘选择器’).css({‘样式名称1′:’样式值1′,’样式名称2’:’样式值2’…})

删除样式:$(‘选择器’).css(‘样式名称’,”);

代码演示:=>

<body>

<a href=”#” style=”color:red; font-size: 20px;”>首页</a>

<script type=”text/javascript” src=”../../../jquery-3.3.1.min.js”></script>

<script type=”text/javascript”>

//就绪函数简写方式

$(function() {

//读样式

console.log($(‘a’).css(‘color’));

//写单个样式

$(‘a’).css(‘font-style’, ‘italic’);

//写多个样式

$(‘a’).css({

‘background-color’: ‘#FFAACC’,

‘border’: ‘2px solid blue’

})

//删除样式

$(‘a’).css(‘color’, ”);

})

</script>

</body>

——————————————————-

->样式类操作:

添加样式类:$(‘选择器’).addClass(‘类名’);

删除样式类:$(‘选择器’).removeClass(‘类名’);

切换样式类:$(‘选择器’).toggleClass(‘类名’);如果当前元素有没有指定的类名称,则添加该类名称,如果当前元

素有类名称,则删除该类名称

代码演示:=>

<body>

<a href=”#”>首页</a>

<script type=”text/javascript” src=”../../../jquery-3.3.1.min.js”></script>

<script type=”text/javascript”>

//就绪函数简写方式

$(function() {

//添加样式类

$(‘a’).addClass(‘link’);

//删除样式类

$(‘a’).removeClass(‘link’);

// 切换样式类

$(‘a’).toggleClass(‘link’);

})

</script>

</body>

文章来源:智云一二三科技

文章标题:PHP学习jQuery笔记(1)——关于选择器

文章地址:https://www.zhihuclub.com/153832.shtml

关于作者: 智云科技

热门文章

网站地图