jquery

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。

Jquery选择器

  • 1.ID选择器：即通过id获取对应的标签，$('#实际id')
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1"><p>id="d1"</p></div>
<div id="d2">id="d2"</div>


<script src="jquery-1.12.4.js"></script>   <!--导入jquery脚本-->
<script type="text/javascript">
    $('#d1').css('color','red');
    $('#d2').css('color','blue');
</script>
</body>
</html>

效果：


  • 2.标签名选择器element $('标签名')
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1"><p>id="d1"</p></div>
<div id="d2">id="d2"</div>


<script src="jquery-1.12.4.js"></script>   <!--导入jquery脚本-->
<script type="text/javascript">
    $('div').css('color','red');
    $('p').css('color','blue');
</script>
</body>
</html>

效果：


  • 类选择器 通过找到类，进行操作 $('.类名')
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="d1"><p>id="d1"</p></div>
<div class="d2">id="d2"</div>


<script src="jquery-1.12.4.js"></script>   <!--导入jquery脚本-->
<script type="text/javascript">
    $('.d1').css('color','red');
    $('.d2').css('color','blue');
</script>
</body>
</html>

效果：


  • *选择器 匹配所有元素 $('*')
  • 群组选择器 以上选择器的组合，同时匹配多个$('#id,.类,div')
  • 后代选择器 即通过父标签找到子标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="d1"><p>id="d1"</p>
<div class="d2">id="d1-d2"</div>
</div>
<div class="d2">id="d2"</div>
<script src="jquery-1.12.4.js"></script>   <!--导入jquery脚本-->
<script type="text/javascript">
    $('.d1 .d2').css('color','red');
</script>
</body>
</html>

效果：


  • 指定选择器 即通过标签指定匹配的类 $('dev.类名')
  • 子选择器 即通过父标签找到所有的子标签
  • next选择器 找到匹配标签的下一个

$('选择器+下一个选择器')或者
$('选择器').next(下一个选择器)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div id="demo">div</div>
<P>p4</P>
<p>p5</p>
<p>p6</p>
<P>p7</P>
<script  rel="script"  src="jquery-1.12.4.js"></script>
<script>
//$('#demo').next('p').css('color','red'); //第一种方法
$('#demo+p').css('color','red');        //第二种方法
</script>
</body>
</html>

效果：


  • nextall选择器 取出匹配的选择器后面所有的 $('选择器~下一个选择器')或者$('选择器').nextAll('下一个选择器')

  • 基本筛选器：

    • :first 第一个
    • :not(selector) 取反
    • :even 奇数行
    • :odd 偶数行
    • :eq(index) 等于
    • :gt(index) 大于
    • :last 最后一个
    • :lt(index) 小于
    • :header 匹配如 h1, h2, h3之类的标题元素
    • :animated 只有对不在执行动画效果的元素执行一个动画特效
    • :focus 添加一个"focused"的类名给那些有focus方法的元素

  • 属性

    • [attribute] 属性名 $('div[id]')
    • [attribute=value] 指定属性值$("input[name='newsletter']").attr("checked", true);
    • [attribute!=value]
    • [attribute^=value]
    • [attribute$=value]
    • [attribute*=value]
    • [attrSel1][attrSel2][attrSelN]

操作：

CSS
属性的操作

html()
text()
val()
文本的操作

事件

底层一样，但是在此基础上JQuery还做了优化

  1. 如何使用JQuery绑定
  2. 当文档加载完毕后，自动执行！ ###重要！

$(function(){
...
})
3. 延迟绑定：

$("ul").delegate("l1","click",funcation(){
...
})

现增加，现绑定

PS: 一定要先找到父标签，ul，相当于选择器
4. return false; 后面也就不提交了，和Dom里一样；

扩展：

$.xxx来执行， 如 $.login
form表单验证
Ajax：

AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。Ajax的概念由杰西·詹姆士·贾瑞特所提出
大白话：偷偷发请求

执行JQuery：

JQuery.xxx
$.xxx
JQuery的循环

.each()

posted @ 2016-08-26 22:05  Fuzengjie  阅读(208)  评论(0)    收藏  举报