jQuery

  模块=类库  jQuery就是DOM  、BOM、Javascript的封装成的类库

  一、查找元素、DOM只有10种左右选择器

          jQuery有很多选择器和筛选器

    PS:jQuery 推荐1系列最新版本,兼容性更好 1.12

 

    对象转换:一  jquery对象[0]  =>Dom对象

    

    

    对象转换二:$(Dom对象)=jquery对象

    

    选择器:$('')=jQuery('') =document.getXXX('')

    1  ID  :$('#id')

    2  class  :$('.c1')

    3  标签  :$('a')

    4  所有  $('*')

    5  组合  $('a,.c2,#i10')

    6  层级  $('#i10 a')  子子孙孙

            $('#i10>a')  只找儿子  

            $('#i10+')   下一个

           $('#i10-')    前一个

    7  筛选器(可以与上面选择器组合使用)

        :first  $('#i10>a:first')  第一个

    8  属性  $('[xxx]')    具有属性xxx的标签

        $('[xxx="123"]') 属性xxx等于123的标签

    9  表单选择器:可以不用记,用属性选择器也能解决

        $(':text')=$('input[type='text']')  

  二、操作元素

    实例:多选、反选、全选

    jQuery方法内置循环,不需要再循环操作

    $(':checkbox').each(function (k) {
    
    //this = DOM标签,当前循环的元素  $(this)
    //k 当前索引值
                })

      设置值  $(this).prop('checked',false)  

      选择值  $(this).prop('checked')

     三元运算的使用  var v=条件?真值:假值

    左侧菜单:

    

$(this).next() 
$(this).prev()
$(this).parent()
$(this).children()
$(this).siblings()
$(this).find() jQuery的链式编程,多语句有时可以叠加写。 标签文本操作:查看$('').text()      
         $('').html() 
          $('').val() 
如果加参数,则为设置内容
input系列的值操作,只要DOM的value操作的,这里都一样:  $('').val()查看
                              $('').val('')赋值 PS:写事件的两种方式,不管传过来的还是直接在script中创建事件方法,this都是DOM标签对象
1 如果在标签里直接写事件,则在script中  
1  function edit(this) {
  //this是DOM标签对象
  }
2  $('.header').click(function (k) {
  //this是DOM标签对象 
  }
样式操作:addClass,removeClass,hasClass,toggleClass(样式没有则添加,有则删除)

属性操作:  
$('').attr  
专门用于做自定义属性   可以设置属性
$('').attr('type') 可以查看属性
$('').attr('key','value') 可以设置属性
与之相对  $('').removeattr('key') 删除属性 $('').prop
专门用于为checkbox和radio类标签做操作的,不要用attr做这些标签的操作,可能会失效
$('').prop('checked',true) 设置值
$('').prop('checked')    获取值

文档处理
var temp = 字符串拼接
$('').append(temp);
$('').prepend(temp);
$('').after(temp);
$('').before(temp);
$('').remove();
$('').empty();
$('').clone();


CSS处理:
$('').css('样式名称','样式值')


点赞:需要用到的功能点:
$('').append()
setinterval
透明度
position
字体大小设置


位置:
$(window).scrollTop() 获取
$(window).scrollLeft()
$(window).scrollTop(0) 设置
$(window).scrollLeft(0)


$().offset() 获取坐标 相对整个窗口的位置
$().offset().top
$().offset().left


$().position() 相对上一个relative的标签的相对位置


$().height() 获取标签的纯高度
$().innerHeight() 获取边框+纯高度
$().outerHeight()


写例子:获取纯高度、边框、外边距、内边距


绑定事件的方式
DOM:三种


jQuery: 1 $().click() ...很多 把on都去掉了


2 $().bind('click',function(){})
$().unbind('click',function(){})


3 $('.c').delegate('a','click',function(){}) ***委托 这是比较牛掰的方式去动态绑定新增标签的事件
$('.c').undelegate('a','click',function(){}) 只有在代码执行的时候才会绑定事件


4 $().on('click',function()) 基本型


$().outerHeight(true)


a标签 加载onclick事件后,如果事件最后返回false,则不会再执行href的网址跳转了
两种绑定方式的不同,DOM方式,需要多写一个return
onclick = "return clickon();
如果用jquery方式,则不用写return


阻止事件发生
jquery的each方法,做判断和返回时,false只退出each的函数体,最外层函数并不会返回false值,只能做一个flag来处理


正常页面执行顺序
所有元素渲染完成后,才会加载script事件


想要提前加载事件
<SCRIPT>
$(function () {

});
当页面框架加载完毕后,就执行这里面的script事件绑定


jQuery的扩展
1 $('').jquery的选择器的方法
2 ¥.ajax() jquery扩展
$.fn.extend
$.extend


为避免引入多种第三方扩展导致方法名、变量名重复的问题,可以使用自执行函数方法去规避
把每个扩展都包装在一个自执行函数体内
(function(arg) {
var status = 1;


arg.extend({
'func_name':function(){


}
}
);


})(jQuery);


jQuery作业:
1 练习获取标签高度和边框、纯高度的
2 所有示例手敲一遍
3 实现编辑框功能


js正则  正则表达式用\   \括起来

    两种方法来使用  

test  判断字符串是否符合规定的正则

rep = /\d+/;

rep.test('dafdasf432aaaa')

# true

rep = /^\d+$/;

rep.test('sadfasdfasd34535qqq')

# false

exec提取根据正则匹配到的数据

rep = /\d+/;

str = "wangshen_67_houyafa_20"

rep.exec(str)

# ['67']

分组匹配1

"JavaScript is more fun than Java or JavaBeans!"

var pattern = /\bJava(\w+)\b/;

# ['JavaScript','Script']

全局匹配

var pattern = /\bJava\w+\b/g;

# ['JavaScript']

# ['Java']

# ['JavaBeans']

# null

全局分组匹配

var pattern = /\bJava(\w+)\b/gm;

# ['JavaScript','Script']

# ['Java','']

# ['JavaBeans','Beans']

# null

基于jQuery的三大第三方组件
一、BootStrap  最强大、既有组件也有多种模板可直接修改使用
二、EasyUI    界面一般,可以修改使用
三、JQueryUI   界面较为好看,里面可能会用到Ajax。直接使用可以,但如果要修改起来会比较麻烦。 推荐使用BootStrap
以后写代码优先从网上找现成的合适自己的组件或模板,修改使用,以提高工作效率。
BootStrap使用中注意三点:
一、响应式布局:@media 根据条件变化修改CSS样式
二、图标、字体:使用字体来做图标,调用的时候直接根据图标代码来调用图标就可以用了。
三、基本使用:调用样式,如果做一定的修改,而且写在了前面,如果想生效,则在后面加上 ! important

轮播插件的使用:
bxslider.com jQuery学习参考网站:

http://jquery.cuishifeng.cn/

Python3.5 学习十七的更多相关文章

  1. python3.4学习笔记(十七) 网络爬虫使用Beautifulsoup4抓取内容

    python3.4学习笔记(十七) 网络爬虫使用Beautifulsoup4抓取内容 Beautiful Soup 是用Python写的一个HTML/XML的解析器,它可以很好的处理不规范标记并生成剖 ...

  2. python3.4学习笔记(十四) 网络爬虫实例代码,抓取新浪爱彩双色球开奖数据实例

    python3.4学习笔记(十四) 网络爬虫实例代码,抓取新浪爱彩双色球开奖数据实例 新浪爱彩双色球开奖数据URL:http://zst.aicai.com/ssq/openInfo/ 最终输出结果格 ...

  3. python3.4学习笔记(十三) 网络爬虫实例代码,使用pyspider抓取多牛投资吧里面的文章信息,抓取政府网新闻内容

    python3.4学习笔记(十三) 网络爬虫实例代码,使用pyspider抓取多牛投资吧里面的文章信息PySpider:一个国人编写的强大的网络爬虫系统并带有强大的WebUI,采用Python语言编写 ...

  4. python3.4学习笔记(十八) pycharm 安装使用、注册码、显示行号和字体大小等常用设置

    python3.4学习笔记(十八) pycharm 安装使用.注册码.显示行号和字体大小等常用设置Download JetBrains Python IDE :: PyCharmhttp://www. ...

  5. python3.4学习笔记(二十六) Python 输出json到文件,让json.dumps输出中文 实例代码

    python3.4学习笔记(二十六) Python 输出json到文件,让json.dumps输出中文 实例代码 python的json.dumps方法默认会输出成这种格式"\u535a\u ...

  6. python3.4学习笔记(二十五) Python 调用mysql redis实例代码

    python3.4学习笔记(二十五) Python 调用mysql redis实例代码 #coding: utf-8 __author__ = 'zdz8207' #python2.7 import ...

  7. python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法

    python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法window安装redis,下载Redis的压缩包https://git ...

  8. python3.4学习笔记(二十三) Python调用淘宝IP库获取IP归属地返回省市运营商实例代码

    python3.4学习笔记(二十三) Python调用淘宝IP库获取IP归属地返回省市运营商实例代码 淘宝IP地址库 http://ip.taobao.com/目前提供的服务包括:1. 根据用户提供的 ...

  9. python3.4学习笔记(二十二) python 在字符串里面插入指定分割符,将list中的字符转为数字

    python3.4学习笔记(二十二) python 在字符串里面插入指定分割符,将list中的字符转为数字在字符串里面插入指定分割符的方法,先把字符串变成list然后用join方法变成字符串str=' ...

随机推荐

  1. 【C++】c++中栈 队列 的应用

    C++中提供了STL模板statck 在使用的时候更为方便 除了一般的队列外 还有STL更有双向队列可以使用 #include<deque> 声明:deque <type > ...

  2. [C#]“正在终止线程”的问题

    在C#中启用线程后,如果试图使用Abort方法来终止线程,那么必定会抛出“正在终止线程”的异常,一开始我也想过如何来避免这种异常出现,花了不少气力,但最后发现全是徒劳. 原因是一个正在运行的线程被终止 ...

  3. Centos上安装phpmyadmin

    查看PHP有没有安装:php -v查看apache有没有安装:httpd -v如已经安装则想办法删除. 一.安装Apache(默认安装目录etc/httpd/) 1. 使用yum命令安装Apache ...

  4. transform.forward和vector3.forward

    Vector3.forward的值永远是(0,0,1)(这里的(0,0,1)是世界坐标的(0,0,1)),而transform.forward我们可以理解为其对应物体的z轴方向,是一个向量,而不是一个 ...

  5. Python10/17-re模块/hashlib模块/logging模块

    import logging # 1.日志的级别# logging.debug("这是一个调试信息") # 10# logging.info("常规信息") # ...

  6. 2018.11.02 NOIP模拟 飞越行星带(最小生成树/二分+并查集)

    传送门 发现题目要求的就是从下到上的瓶颈路. 画个图出来发现跟去年noipnoipnoip提高组的奶酪差不多. 于是可以二分宽度+并查集检验,或者直接求瓶颈. 代码

  7. linux 下安装安装mysql 5.6. 5.7

    linux版本:CentOS7 64位 5.7.20 安装请看 他人博客 我已经安装成功了 https://www.cnblogs.com/cz-xjw/p/8006904.html 5.6安装 前提 ...

  8. $.cookie is not a function的错误原因

    网上说的原因是:“手残导入2次jquery库文件 ” 是的,就是这个原因.引入了两次jquery.js

  9. MFC调试时无法解析外部类

    1.是否添加头文件 2.是否对类进行声明

  10. Apache hadoop安装配置

    1.网络中继更改问题 命令:   vi /etc/sysconfig/network-scripts/ifcfg-eth0 需要修改的代码 DEVICE=eth0 HWADDR=00:0C:29:11 ...