脚本宝典收集整理的这篇文章主要介绍了JQeury1,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
1. 第一个JQuery
$(document).ready()与onload的区别
<script type="text/javascript">
// 当文件加载完毕再执行
// 原生js写法
onload = function(){
alert('原生js');
}
// jquery 写法
$(document).ready(function(){
alert('jquery');
})
// 简写
$(function(){
alert('简写');
})
</script>
2. DOM对象和JQuery对象
js语言:
DOM 对象,只能使用原生js的方法及属性
DOM对象不能使用jQuery的属性及方法jQuery语言:
jQuery语法创建的对象,建议使用$开头
jQuery对象:是一个jQuery的结果集
jQuery创建出来的对象只能jQuery的属性及方法
jQuery对象就是对DOM对象的包装
jQuery对象只能使用jQuery对象的方法及属性
// 二者之间的相互转换
// jQuery对象转为DOM对象
var divJs1 = $div[0];
console.log(divJs1);
var divJs2 = $div.get(0);
console.log(divJs2);
// DOM对象转为jQuery对象
var $div2 = $(div1);
console.log($div2);
3.JQuery选择器
jQuery选择器的返回值为jQuery对象的结果集 本身是一组
jQuery对象
标签的选择器的结果不能直接使用,需要获取到里面的独立的对象在进行调用属性或方法可以使用2种方法获取对象;
1.get(index)或 [index] ===>返回DOM对象,只能调用DOM的属性
2.eq(index) ===返回jQuery对象 只能调用jQuery的属性和方法
选择器
语法格式
1- id选择器
$('#id')
2 - 标签选择器
$('标签名称')
3 - class选择器
$('.class')
4 - 通配符选择器 获取到所有标签
$('*')
5 - 复合选择器 并集选择器
$('选择器1, 选择器2'...)
6 - 子代选择器
6.1 能够获取到选择器1的所有的后代选择器2
$('选择器1 选择器2')
6.2 能够获取到选择器1的直属的子代选择器2
$('选择器1 > 选择器2')
7 - 同代选择器
7.1 返回选择器1后面紧接(相邻)着的选择器2
$('选择器1 + 选择器2')
7.2 返回选择器1后面所有的选择器2
$('选择器1~选择器2')
8 - 过滤选择器
8.1 visible 获取到显示(style="visibility: hidden" 也能获取)
$('input:visible')
8.2 hidden; 获取隐藏的标签
$('input:hidden')
8.3 eq(index)选择器 获取第index个标签
$('input:hidden:eq(0)')
8.4 even 偶数
$('tr:even')
8.5 odd 奇数
$('tr:odd')
8.6 first:第一行
$('tr:first')
8.7 :parent :返回不为空的单元格,匹配含有子元素或者文本元素的
$('td:parent')
8.8 :empty : 返回空的单元格
$('td:empty')
8.9 :contains(str):返回包含内容为str的单元格
$("td:contains('004')")
8.10 :checked: 能够获取属性checked='checked'的标签
$('input:checked')
8.11 :selected 能够获取属性selected='selected'的标签
$('option:selected')
8.12 :disabled 获取不可用标签
$('input:disabled')
8.13 获取div下面的第一个p标签
$('div p:first-child')
8.14 获取div下面的最后一个标签
$('div p:last-child')
8.15 获取div下面的第index个p标签
$('div p:nth-child(3)')
8.16 获取div下只有一个p标签的p标签
$('div p:only-child')
9 - 属性选择器
9.1 通过属性名称获取标签
$('div[class]')
9.2 属性class值为div1的
$("div[class=div1]")
9.3 所有包含str字符串的
$("div[class*='str']")
9.4 除了class = 'div3'的
$('div[class!=div3]')
9.5 以div开头的
$("div[class^='div']")
9.6 class$='ox' 以ox结尾的
$("div[class$='ox']")
9.7 以div3- 开头或值就是div3
$("div[class丨='div3']")
9.8 复合选择器 多个条件一起
$("div[class][id]")
9.9 ~= 必须包含该单词 而不是子字符串
$("div[class~='tes']")
10 - 交集选择器 class为name的div 注意与子代选择器的区别 子代选择器有个空格
$('div.name')
11 -特殊符号
jQuery中 # . () [] 特殊字符 使用 转义
12 - 表单选择器 通过表单中的input类型获取标签
$(':file') $(':password') 等
// 过滤选择器的小应用
<!--下拉框-->
<!--onchange:下拉框的事件-->
<select onchange="func()">
<option selected="selected">11</option>
<option>22</option>
<option>33</option>
</select>
<script>
// 当下拉框被触发时执行 !!!
function func () {
//console.log('123');
// 获取当前被选中的option
var $se = $('select option:selected');
console.log($se.get(0).innerText); // get(0) dom对象
}
</script>
以上是脚本宝典为你收集整理的JQeury1全部内容,希望文章能够帮你解决JQeury1所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。