1、
如何引入jq语句
<script type="text/javascript">
$(document).ready(function(){
// 开始写 jQuery 代码...
});
</script>
简洁写法(与以上写法效果相同):
$(function(){
// 开始写 jQuery 代码...
});
2、
<!-- 使用JS原生语法 -->
<script type="text/javascript">
window.onload = function(){
var p = document.getElementById('imooc1');
p.innerHTML = 'P1:您好!通过慕课网学习jQuery才是最佳的途径';
p.style.color = 'red';
}
</script>
<!-- 使用jQuery语法 -->
<script type="text/javascript">
$(document).ready(function() {
var $p = $('#imooc2');
$p.html('P2:您好!通过慕课网学习jQuery才是最佳的途径').css('color','red');
});
</script>
3、
jQuery是一个类数组对象,而DOM对象就是一个单独的DOM元素。
如何把jQuery对象转成DOM对象? get()方法
<script type="text/javascript">
var $div = $('div'); //jQuery对象
var div = $div.get(0) //通过get方法,转化成DOM对象
/*var div = $div[0] //转化成DOM对象*/
div.style.color = 'red'; //操作dom对象的属性
</script>
4、
DOM对象转化成jQuery对象: $(div)
<script type="text/javascript">
var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //将dom节点div转化为$div的jquery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色
</script>
5、jQuery选择器之层级选择器
http://js.jirengu.com/vufujurabo/1/
$( "parent > child" ) 子选择器:选择所有指定“parent”元素中指定的"child"的直接子元素。
$("ancestor descendant") 后代选择器:选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子,孙子,曾孙等
$("prev + next") 相邻兄弟选择器:选择所有紧接在“prev”元素后的“next”元素
$("prev ~ siblings") 一般兄弟选择器:匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素,并匹配过滤“siblings”选择器
6、jQuery选择器之基本筛选选择器
http://js.jirengu.com/lezaterimi/1/
7、jQuery选择器之内容筛选选择器
http://js.jirengu.com/jegezimiqi/1/
8、??
9、??jQuery选择器之属性筛选选择器
在这么多属性选择器中[attr="value"]和[attr="value"]是最实用的
[attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等
[attr="value"]能在网站中帮助我们匹配不同类型的文件
http://js.jirengu.com/zequwovuke/1/
10、jQuery选择器之子元素筛选选择器
Paste_Image.png注意事项:
:first只匹配一个单独的元素,但是:first-child选择器可以匹配多个:即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
:last 只匹配一个单独的元素, :last-child 选择器可以匹配多个元素:即,为每个父级元素匹配最后一个子元素
如果子元素只有一个的话,:first-child与:last-child是同一个
:only-child匹配某个元素是父元素中唯一的子元素,就是说当前子元素是父元素中唯一的元素,则匹配
jQuery实现:nth-child(n)是严格来自CSS规范,所以n值是“索引”,也就是说,从1开始计数,:nth-child(index)从1开始的,而eq(index)是从0开始的
nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算,后者从后往前计算
http://js.jirengu.com/natuxojaka/1/
11、jQuery选择器之表单元素选择器
Paste_Image.pnghttp://js.jirengu.com/rozewivuma/1/
12、jQuery选择器之表单对象属性筛选选择器
Paste_Image.png注意事项:
选择器适用于复选框和单选框,对于下拉框元素, 使用 :selected 选择器
在某些浏览器中,选择器:checked可能会错误选取到<option>元素,所以保险起见换用选择器input:checked,确保只会选取<input>元素
http://js.jirengu.com/mocucafudo/1/
13、jQuery选择器之特殊选择器this
this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jQuery的方法和属性值。
http://js.jirengu.com/petubuzefo/1/
网友评论