526互联

jQuery 片段

发布时间 2023-09-05 19:51:13作者: 小赵同学爱编码

基本选择器

  • 标签选择器 ${'tagName'}

  • id 选择器 ${'$id'}

  • class 选择器 ${'.className'}

  • 通配符选择器 ${'.className *'},对于前面的内容是啥都行，不一定非得用例选择器

  • 并集选择器 ${'p,button'},代表根据p标签、button标签获取

  • 交集选择器 ${'p.love'},代表p标签并且类名为love的元素

  • 子代选择器 ${'ul > span'},代表 ul 标签下所有的子 span 标签

  • 后代选择器 ${'ul span'}，代表 ul 标签下所有的 span 标签

  • 兄弟选择器 ${'#box+li'},代表id为box的下一个li兄弟标签

  • 过滤选择器：

<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td>女</td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

（1）基本筛选器

:even 可以取偶数行，:odd 可以取奇数行, :first 可以取首行， :last 可以取尾行

:lt(2) 可以取行数小于2的，:gt(2) 可以取行数大于2的，:eq(2) 可以取行数等于2的，:not(tr:eq(2)) 可以取行数不等于2的 【行数从0开始】

// 其他几种选择同理
${'tr:even'}.css('background', 'red');

（2）内容筛选器

// 可以获取指定类型标签包含内容为帅哥的
${'td:contains("帅哥")'}.后续操作
// 获取指定标签中的 span 标签进行处理
${'td:has(span)'}
// 实现获取内容为空的单元格
${'td:empty'}
// 获取内容不为空的单元格
${'td:parent'}

（3）属性筛选器

<a href="" hreflang="en">en</a>
<a href="" hreflang="en-UK">en-UK</a>
<a href="" hreflang="zh-CN">zh-CN</a>

// 查找 hreflang 属性的标签元素
${'[hreflang]'}
// 查找 hreflang 属性并且值为 en 的所有超链接
${'a[hreflang="en"]'}
// 查找 hreflang 属性并且值不为 en 的所有超链接
${'a[hreflang!="en"]'}
// 查找 hreflang 属性并且属性值为 en 或 以 en 开头的所有超链接
${'a[hreflang|="en"]'} 或 ${'a[hreflang^="en"]'}
// 查找 hreflang 属性并且属性值以 CN 结尾的元素
${'a[hreflang$="CN"]'}
// 查找 hreflang 属性具有一个给定的子字符串CN的超链接
${'a[hreflang*="CN"]'}
// 查找 hreflang属性用空格分隔的值中包含一个给定值为CN的超链接
${'a[hreflang~="CN"]'}
// 查找 hreflang属性为 zh-CN，tittle属性为 Chinese 的超链接
#{'a[hreflang="zh_CN"][title="Chinese"]'}

（4）可见性筛选器

<p style="display: block">我是显示段落</p>
<p style="display: none">我是隐藏段落</p>
// 筛选出隐藏的p标签
${'p:hidden'}.css('display', 'block');
// 筛选出来显示的p标签
${'p:visible'}.css('display', 'none');

（5）子元素筛选器

<ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
    <li>我是列表项3</li>
    <li>我是列表项4</li>
</ul>
// 获取 ul 标签下的第一个 li 标签
${'ul li:first-child'}
// 获取 ul 标签下的最后一个 li 标签
${'ul li:last-child'}
// 获取 ul 标签下的第二个 li 标签
${'ul li:nth-child(2)'}
  • 表单选择器:

（1）表单类型选择器

<form>
    <input type="text"><br>
    <input type="password"><br>
    <input type="file"><br>
    <input type="button" value="按钮"><br>
    <input type="submit" value="提交按钮"><br>
    <input type="reset" value="重置按钮"><br>
</form>
// 选中表单中各种类型的输入框
$('input:text').css('background', 'red');
$('input:password').css('background', 'red');
$('input:file').css('background', 'red');
$('input:button').css('background', 'red');
$('input:submit').css('background', 'red');
$('input:reset').css('background', 'red');

<form>
    <input type="checkbox">复选框<br>
    <input type="radio">单选框<br>
</form>
// 选中表单中的单选框、复选框，然后输出标签信息
console.log($(':checkbox')[0]);
console.log($(':radio')[0]);

（2）表单状态选择器

<form>
    <input type="text" autofocus><br>
    <input type="checkbox" checked>复选框<br>
    <input type="radio" disabled>单选框<br>
    <select>
        <option selected>列表项1</option>
        <option>列表项2</option>
    </select>
</form>

// 输出表单获取焦点、表单选中、表单禁用、表单列表项选中的状态所在的标签信息
console.log($(':focus')[0]);
console.log($(':checked')[0]);
console.log($(':disabled')[0]);
console.log($(':selected')[0]);

常用工具

  • $.each 方法可以用来遍历数组或对象
// 遍历数组，index 索引、element 元素值
let arr = [1, 2, 3];
$.each(arr, function(index, element){
    console.log(index, element);
});
// 遍历对象 key-value
let obj = {
    name : '张三',
    age : 20,
};
$.each(obj, function(key, value){
    console.log(key, value);
});

  • $.trim 方法可以去掉字符串起始和末尾的空格 $.trim('star')

  • $.type 方法可以判断 JavaScript 对象的类型 $.type('happy')

  • $.isArray 方法可以判断指定对象是否为一个数组 $.isArray('new')

  • $.isFunction 方法可以判断指定对象是否为一个函数 $.isFunction('love')

AJAX

  • $.ajax 方法可以用来执行一个异步的 http 请求
// 执行一个异步的 HTTP GET 请求，从服务器加载数据
$.ajax({
    url: '/api/getdata'.
    type: 'get',
    data: {
    	username: 'admin',
    	password: '123456'
	},
    dataType: 'text',
        success: function(response) {
    		alert(response);
		},
        error: function(response) {
            alert(response);
        }
});

// 执行一个异步的 HTTP POST 请求，从服务器加载数据 
$.ajax({
    url: '/api/getdata'.
    type: 'post',
    data: {
    	username: 'admin',
    	password: '123456'
	},
    dataType: 'text',
        success: function(response) {
    		alert(response);
		},
        error: function(response) {
            alert(response);
        }
});
  • $.get、$.post 方法是上面方法的缩写，用于发送 get、post请求
$.get('/api/foundMyself', {username:'admin',password:'123456'},function(response){
    alert(response);
});
$.post('/api/foundShe', {username:'admin',password:'123456'},function(response){
    alert(response);
});
// 相当于省略了下面的内容
$.ajax({
    url: url,
    data: data,
    success: success,
    dataType: dataType
});