-
$(":first/last/even/odd/header/root/animated/lang(language)")
$(":lt/eq/gt(index)")
$(":not(selector)")
eg:$("input:not(:checked)+p")
查看全部 -
var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色查看全部 -
jquery:http://jquery.com/download/
压缩版(compressed) 与 开发版(development)
查看全部 -
javascript-->jquery react.js sea.js node.js
jquery:js+DHTM
简易、兼容、ajax封装、UI、强大的选择器+完善的事件机制
链式操作 回调函数 迭代器 延迟对象 队列...
样式篇+dom篇+事件篇+动画篇
查看全部 -
javascript-->jquery react.js sea.js node.js
jquery:js+DHTM
简易、兼容、ajax封装、UI、强大的选择器+完善的事件机制
查看全部 -
分情况讨论如上图所示查看全部 -
两种写法：
查看全部 -
head内的js改成
https://libs.baidu.com/jquery/1.9.1/jquery.min.js
查看全部 -
一、jquery的搭建环境：
两种引入方法：
在head头部引入
在body内的script标签中引入
二、jquery对象与dom对象不一样
三、原生js操作dom和jq操作dom的区别：
通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。
通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短。
查看全部 -
.css() 方法：获取元素样式属性的计算值或者设置元素的CSS属性
获取：
.css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值
.css( propertyNames )：传递一组数组，返回一个对象结果
设置：
.css(propertyName, value )：设置CSS
.css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理
.css( properties )：可以传一个对象，同时设置多个样式
注意事项：
查看全部 -
.next(selector) 匹配所有与元素相邻的含有selector元素的对象。
.next() 匹配所有与元素相邻的对象。
查看全部 -
removeClass( )方法
.removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名
.removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名
查看全部 -
.addClass( className )方法
.addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名
.addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名
查看全部 -
<script type="text/javascript">
//单个select，返回第一个
$("p").text( $("#single").val() )
</script>
<script type="text/javascript">
//多个select被选择，返回["imocc", "博客园"]
$("p").text( $("#multiple").val() )
</script>
<script type="text/javascript">
//选择一个表单，修改value的值
$("input[type='text']").val('修改表单的字段')
</script>
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h3>.html()与.text()</h3>
<div class="left first-div">
<div class="div">
<a>:first-child</a>
<a>第二个元素</a>
<a>:last-child</a>
</div>
<div class="div">
<a>:first-child</a>
<a>第二个元素</a>
<a>:last-child</a>
</div>
</div>
<h4>显示通过html方法获取到的内容</h4>
<p></p>
<h4>显示通过text方法获取到的内容</h4>
<p></p>
<script type="text/javascript">
//显示出html方法获取到的内容
//.html()是整个html文档结构
$('p:first').html( $(".first-div").html() )
</script>
<script type="text/javascript">
//显示出text方法获取到的内容
//.text()是文本内容的合集
$('p:last').text( $(".first-div").text() )
</script>
<script type="text/javascript">
//通过.text()方法替换文本内容
$(".left a:first").text('替换第一个a元素的内容')
</script>
<script type="text/javascript">
//通过.html()方法替换html结构
$(".left div:first").html('整个div的子节点都被替换了')
</script>
<script type="text/javascript">
//通过.text()的回调，获取原本的内容，修改，在重新赋值
$(".left a:first").text(function(idnex,text){
return '增加新的文本内容' + text
})
</script>
</body>
</html>
查看全部
举报